/* 全局样式重置+盒模型统一 防止padding撑大宽度，全局自适应基础【保留+优化】 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    background: url(../images/loginbg.png) no-repeat center center fixed;
    background-size: cover;
    background-color:#7ea9d3;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow: hidden; /* 全设备禁止滚动条，完美全屏 */
}

/* ========== ✅ 核心基准：1920×1080原版样式【位置不变、尺寸不变】 ✅ ========== */
.main_box {
    position: absolute; 
    top:55%; 
    left:70%; 
    transform: translate(-50%, -50%); /* 精准居中，位置永不偏移 */
    margin: 0;
    padding: clamp(20px, 2vw, 30px);
    width: clamp(300px, 31vw, 600px);
    max-width: 600px;
    min-width: 260px;
    height: auto;
    min-height: 400px;
    background: #FAFAFA; 
    background: rgba(255,255,255,0.2); 
    border: 1px #DDD solid;
    border-radius: 5px;
    -webkit-box-shadow: 1px 5px 8px #888888; 
    -moz-box-shadow: 1px 5px 8px #888888; 
    box-shadow: 1px 5px 8px #888888;
    font-size: clamp(12px, 0.8vw, 14px);
    line-height: clamp(35px, 2.8vw, 50px);
    overflow: hidden;
    z-index: 2;
}
/* 中英文切换按钮 自适应 */
.main_box .setting {
    position: absolute; 
    top: clamp(8px, 0.5vw, 10px); 
    right: clamp(8px, 0.5vw, 10px); 
    font-weight:bold; 
    text-decoration:none;
    font-size: clamp(11px, 0.7vw, 14px);
}
.main_box .setting {position: absolute; top: 10px; right: 10px; }
.main_box .setting a {color: #FF6600;}
.main_box .setting a:hover {color: #555;}


.main_box .settingleft {position: absolute; top: 10px; left: 10px;  font-weight:bolder;}
.main_box .settingleft a {color:#075f79; text-decoration: none;}
.main_box .settingleft a:hover {color: White;}
.main_box .settingleft a:visited {  color: #075f79;   text-decoration: none;}

.login_logo {
    margin-bottom: clamp(15px, 1vw, 20px); 
    height: clamp(40px, 2.5vw, 45px); 
    text-align: center; 
    font-size:clamp(16px, 1.2vw, 20px); 
    font-family:隶书; 
    color:#FF6600; 
    font-weight:bold;
}
.login_logo img {height: 100%;}
.img{border:0}

/* 验证码图片 自适应缩放 */
#imgCHVerifyCode, #imgENVerifyCode { 
    cursor: pointer; 
    vertical-align: middle; 
    max-width: clamp(100px, 10vw, 130px);
    height: auto;
}

/* 底部版权信息 自适应 */

.bottom {padding-top: 80px;text-align: center; font-size: 12px;}
.bottom  a {color: #000000;}
.bottom  a:hover {color: #ff4d59;}

/*-----------文本框样式【全尺寸自适应+PAD同步缩小+手机竖屏放大】----------------------*/
:root {
  --primary-color: #075f79;
  --primary-hover: #075f79;
  --primary-active: #075f79;
  --error-color: #ff4757;
  --success-color: #2ecc71;
  --text-color: #333;
  --text-light: #666;
  --border-color: #ddd;
  --border-focus: #b3c6ff;
  --bg-color: #fff;
  --disabled-bg: #f5f5f5;
  --shadow-focus: 0 0 0 3px rgba(74, 107, 255, 0.2);
  --transition: all 0.3s ease;
  --border-radius: 6px;
}
 
.input-container {
  margin-bottom: clamp(10px, 1vw, 1.5rem);
  position: relative;
  width: 100%;
}
 
.input-label {
  display: block;
  margin-bottom: clamp(3px, 0.3vw, 0.5rem);
  color: var(--text-color);
  font-weight: 500;
  font-size: clamp(10px, 0.7vw, 0.9rem);
}
 
.input-helper {
  margin-top: clamp(2px, 0.2vw, 0.3rem);
  font-size: clamp(9px, 0.6vw, 0.8rem);
	color: var(--text-light);
}
 
/* 文本框核心自适应 - 和main_box等比联动缩放 */
.input-field,
.textarea-field {
  width: 100%;
  max-width: clamp(200px, 16vw, 300px);
  min-width: 50px;
  padding: clamp(8px, 0.6vw, 0.5rem) clamp(10px, 0.8vw, 1rem);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: clamp(10px, 0.7vw, 0.8rem);
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: var(--transition);
  appearance: none;
  height:clamp(35px, 2.2vw, 45px);
  line-height: 1; /* 文字垂直居中无偏移 */
}
 
.textarea-field {
  min-height: clamp(30px, 2vw, 80px);
  resize: vertical;
  line-height: 1.5;
}
 
.input-field:hover, .textarea-field:hover { border-color: #bbb; }
.input-field:focus, .textarea-field:focus {
  outline: none;
	border-color: var(--primary-color);
  box-shadow: var(--shadow-focus);
}
.input-field:disabled, .textarea-field:disabled {
  background-color: var(--disabled-bg);
  color: #999;
  cursor: not-allowed;
}
.input-field.error, .textarea-field.error { border-color: var(--error-color); }
.input-field.error:focus, .textarea-field.error:focus { box-shadow: 0 0 0 3px rgba(255,71,87,0.2); }
.error-message { color: var(--error-color); font-size:clamp(9px, 0.6vw,0.8rem); margin-top:0.3rem; display:block; }
.input-field.success, .textarea-field.success { border-color: var(--success-color); }
.input-field.success:focus, .textarea-field.success:focus { box-shadow:0 0 0 3px rgba(46,204,113,0.2); }
 
.input-with-icon { position: relative; width:100%; }
.input-with-icon .input-field { padding-left: clamp(30px, 2vw, 2.5rem); }
.input-icon {
  position: absolute; left:clamp(8px, 0.8vw,1rem); top:50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none;
}

/*-----------提示框样式【全尺寸自适应】----------------------*/
.bold{ font-weight:bold;}
div.OkMsg, div.WarningMsg, div.ErrorMsg, div.Msg, div.Tips {
    padding: clamp(8px, 0.8vw,12px) clamp(8px,0.8vw,12px) clamp(8px,0.8vw,12px) clamp(35px,3vw,45px);
    background-repeat: no-repeat;
    background-position: clamp(8px,0.8vw,12px) center;
    color: #333;
    min-height: clamp(35px,2vw,40px);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    border-radius: 4px;
    margin: clamp(5px,0.5vw,8px) 0;
    font-size: clamp(11px,0.7vw,14px);
    box-sizing: border-box;
    border-left: 4px solid;
    background-color: #f8f8f8;

}
div.Tips {
    border-left-color: #3681b6;
    background-color: #e8f4fd;
    background-image: url(../images/msg/tips.png);  
}
div.Msg  {
    border-left-color: #3681b6;
    background-color: #e8f4fd;
}
div.OkMsg {
    border-left-color: #2e7d32;
    background-color: #e8f5e9;
    background-image: url(../images/msg/OK.png);  
}
div.WarningMsg {
    border-left-color: #ff8f00;
    background-color: #fff8e1;
    background-image: url(../images/msg/warning.png);  
}
div.ErrorMsg {
    border-left-color: #c62828;
    background-color: #ffebee;
    background-image: url(../images/msg/error.png);  
}
div.Tips {
    font-weight: 500;
    background-color: #e3f2fd;
    border-left-color: #1565c0;
}

/*-----------按钮样式【全尺寸自适应+PAD同步缩小+手机竖屏放大】----------------------*/
.btn-action {
    display: inline-block;
    padding: clamp(3px,0.3vw,4px) clamp(8px,0.8vw,10px);
    margin: clamp(2px,0.2vw,3px) clamp(2px,0.2vw,3px);
    font-size: clamp(10px,0.6vw,12px);
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.2s;
    background-color:#085491;
    color:white;
}
.btn-action:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color:#085491;
    color:white;
}
 /* 登录/注册主按钮核心自适应 */
.btn {
    display: inline-block;
    padding: clamp(8px, 0.6vw,10px) clamp(15px,1vw,20px);
    font-size: clamp(14px, 0.9vw,18px);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: clamp(3px,0.3vw,4px);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    margin: clamp(3px,0.3vw,5px);
}
.btn-darkgreen {
    background-color: #075f79;
    color: white;
} 
.btn-darkgreen:hover {
    background-color: #054558;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.btn-primary {background-color: #4285f4;color: white;}
.btn-success {background-color: #34a853;color: white;}
.btn-success:hover {background-color: #2d9248;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.btn-danger {background-color: #ea4335;color: white;}
.btn-danger:hover {background-color: #d33426;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.btn-warning {background-color: #fbbc05;color: #333;}
.btn-warning:hover {background-color: #e8ac04;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.btn-ghost {background-color: transparent;color: #4285f4;border: 2px solid #4285f4;}
.btn-ghost:hover {background-color: #4285f4;color: white;}
.btn:disabled, .btn.disabled  {opacity: 0.65;cursor: not-allowed;box-shadow: none;}

/* ========== ✅ 分层精准适配【优先级从高到低】 ========== */
/* 1. 超宽屏 ≥1920px (大屏电脑) - 适度放大，清晰不夸张 */
@media screen and (min-width: 1920px) {
  .main_box {
      font-size: clamp(14px, 0.9vw, 16px);
      line-height: clamp(50px, 3vw, 55px);
      width: clamp(600px, 32vw, 650px);
      min-height: 460px;
  }
  .input-field, .textarea-field {
      max-width: clamp(300px, 17vw, 330px);
      height: clamp(45px, 2.5vw, 50px);
      font-size: clamp(12px, 0.8vw, 0.95rem);
      border-radius: 8px;
  }
}

/* 2. 电脑端 1200px ~ 1919px (常规台式/笔记本) - 原版尺寸，无缩放 */
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .main_box { width: 600px; min-height: 460px; }
  .input-field { max-width:300px; height:45px; }
}

/* 3. 小电脑/大屏平板 1025px ~ 1199px - 缩小1/6，过渡尺寸，无违和感 */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
  .main_box {
      width: 500px;
      min-height: 380px;
      font-size: 12px;
      line-height: 40px;
      padding: 20px;
  }
  .input-field { max-width:260px; height:40px; font-size:11px; }
  .btn { padding:8px 18px; font-size:15px; }
  #imgCHVerifyCode, #imgENVerifyCode { max-width:110px; }
}

/* ✅✅✅ 4. PAD平板核心区间 768px ~ 1024px 【重中之重：在缩1/3基础上 再缩小1/4 极致适配】✅✅✅ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .main_box {
      top:55%;
      left:70%;
      transform: translate(-50%, -50%);
      width: 300px !important; /* 核心修改：600→400(缩1/3)→300(再缩1/4) 精准值 */
      min-height: 220px !important;
      padding: 10px !important; /* 内边距同步极致缩小 */
      font-size: 8px !important; /* 文字同步再缩1/4 */
      line-height: 24px !important; /* 行距同步再缩1/4 */
      border-radius: 4px;
      border-width: 0.5px !important;
  }
  /* PAD端-文本框 同步再缩小1/4 */
  .input-field, .textarea-field {
      max-width: 150px !important; /* 300→200→150 精准缩1/4 */
      height: 22px !important; /* 45→30→22 精准缩1/4 */
      padding: 4px 8px !important;
      font-size: 8px !important;
      border-radius: 4px !important;
  }
  /* PAD端-按钮 同步再缩小1/4 */
  .btn {
      padding: 4px 10px !important;
      font-size: 10px !important;
      margin: 1px !important;
      border-radius: 3px !important;
  }
  /* PAD端-验证码图片 同步再缩小1/4 */
  #imgCHVerifyCode, #imgENVerifyCode { max-width: 60px !important; }
  /* PAD端-底部版权/切换按钮 同步缩小 */
  .bottom { padding-top:10px !important; font-size:7px !important; }
  .main_box .setting { font-size:7px !important; top:4px; right:4px; }
  /* PAD端-提示框 同步缩小 */
  div.OkMsg, div.WarningMsg, div.ErrorMsg { font-size:7px !important; padding:4px 4px 4px 22px !important; min-height:25px !important; }
}

/* ✅✅✅ 5. 手机竖屏 专属适配【核心要求：main_box 整体放大1倍，操作舒适/文字清晰】✅✅✅ */
/* ========== ✅ 手机竖屏专属优化【表格自动适应屏幕】 ✅ ========== */
@media screen and (max-width: 767px) and (orientation: portrait) {
  /* 原有样式保留 */
  .main_box {
      width: clamp(560px, 95vw, 620px) !important;
      min-height: 560px !important;
      padding: 25px !important;
      font-size: 16px !important;
      line-height: 45px !important;
      border-radius: 6px !important; 
      border-width: 1px !important;
  }

  /* 🔥 新增：表格内部自适应优化 🔥 */
  .main_box table {
      width: 100% !important;
      table-layout: auto !important; /* 自动列宽，防止溢出 */
  }
  
  .main_box td {
      display: table-cell !important; /* 保持表格布局 */
      padding: 8px 6px !important;    /* 增加触摸舒适区 */
      word-break: break-word !important;
      vertical-align: middle !important;
  }
  
  /* 左侧标签列：自适应宽度 + 不换行 */
  .main_box td:first-child {
      width: auto !important;
      white-space: nowrap !important;
      padding-right: 12px !important;
      font-size: 15px !important;
  }
  
  /* 右侧输入列：占据剩余全部宽度 */
  .main_box td:last-child {
      width: 100% !important;
  }

  /* 🔥 输入框宽度100%撑满单元格，不留白 🔥 */
  .input-field, .textarea-field {
      max-width: 100% !important;   /* 替代原360px限制 */
      width: 100% !important;
      height: 48px !important;
      padding: 12px 15px !important;
      font-size: 15px !important;
      border-radius: 8px !important;
      box-sizing: border-box !important;
  }

  /* 验证码图片保持合适大小，不拉伸变形 */
  #imgCHVerifyCode, #imgENVerifyCode {
      max-width: 120px !important;
      height: auto !important;
      display: inline-block !important;
  }

  /* 🔥 按钮优化：增大点击区域，保持并排布局 🔥 */
  .btn {
      display: inline-block !important;
      padding: 12px 20px !important;
      font-size: 16px !important;
      min-width: 120px !important;
      margin: 6px 8px !important;
      border-radius: 8px !important;
  }

  /* 按钮容器居中且自动换行适配 */
  .main_box tr:has(td[colspan="2"]) td,
  .main_box td[colspan="2"] {
      text-align: center !important;
      white-space: normal !important;
  }

  /* 底部版权信息 */
  .bottom {
      padding-top: 20px !important;
      font-size: 13px !important;
      line-height: 1.4 !important;
  }

  /* 语言切换按钮 */
  .main_box .setting {
      font-size: 13px !important;
      top: 12px !important;
      right: 12px !important;
  }

  /* 提示消息框 */
  div.OkMsg, div.WarningMsg, div.ErrorMsg {
      font-size: 13px !important;
      padding: 10px 10px 10px 38px !important;
      min-height: 44px !important;
      background-size: 24px !important;
  }

  /* 忘记密码链接 */
  .main_box a[href="ResetPSW.aspx"] {
      font-size: 13px !important;
      display: inline-block !important;
      margin: 8px 0 !important;
  }
  
  /* 表格内图片（帮助图标）大小适配 */
  .main_box img[src*="help_circle.png"] {
      width: 18px !important;
      height: auto !important;
      vertical-align: middle !important;
  }
}


/* ✅ 手机横屏 适配【保持原有尺寸，不放大，正常显示】✅ */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .main_box {
      left: 70%;
      top: 55%;
      width: clamp(280px, 90vw, 320px) !important;
      min-height: 280px !important;
      padding: 12px !important;
      font-size:9px !important;
      line-height:28px !important;
  }
  .input-field { max-width:180px !important; height:28px !important; font-size:8px !important; }
  .btn { padding:5px 10px !important; font-size:11px !important; }
  #imgCHVerifyCode, #imgENVerifyCode { max-width:70px !important; }
  .bottom { padding-top:12px !important; font-size:8px !important; }
  td { padding:0 3px !important; }
}