/* ============ 变量（青绿政务标准色） ============ */
:root{
  --primary:#36B0AD;         /* 主品牌青绿 */
  --primary-deep:#2A7A88;    /* 深青 */
  --primary-dark:#1F5F6B;
  --primary-soft:#5CC1BE;
  --primary-bright:#7FD0CD;
  --primary-bg:#E8F2FC;      /* 输入框基底 */
  --page-bg:#F2F7FA;         /* 页面底色 */
  --line:#E0E2E3;            /* 输入框描边 */
  --panel-line:#E8EAEB;      /* 面板描边 */
  --title:#2A7A88;           /* 标题蓝青 */
  --text:#333333;
  --text-sub:#5A6B72;
  --text-faint:#8AA0A6;
  --error:#D9534F;
  --shadow:0 30px 80px rgba(42,122,136,.18), 0 6px 20px rgba(80,130,140,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ height:100% }
html,body{ min-height:100% }
body{
  font-family:var(--font);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  background-color:var(--page-bg);
  background-image:
    linear-gradient(160deg, rgba(244,249,251,.45) 0%, rgba(236,245,247,.34) 40%, rgba(228,240,244,.44) 100%),
    url("../images/loginbg.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:68px 26px 56px;
  overflow-x:hidden;
  overflow-y:auto;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
/* 底部水墨山形装饰 */
.deco{ position:fixed; inset:auto 0 0 0; height:140px; z-index:0; opacity:.5; pointer-events:none }

/* ============ 登录大卡片（左表单 + 右品牌） ============ */
.card{
  position:relative; z-index:1;
  width:920px; max-width:94vw;
  display:flex;
  background:#fff;
  border:1px solid var(--panel-line);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ---- 左栏：登录表单（白底） ---- */
.card-form{ flex:0 0 55%; padding:30px 58px 26px; min-width:0 }
.card-top{ margin-bottom:14px }
.card-top .cn{ font-size:23px; font-weight:700; color:var(--title); letter-spacing:5px }
.card-top .en{ font-size:11px; color:var(--text-faint); letter-spacing:2px; margin-top:6px }

/* Tab（基础高亮态） */
.tabs{ display:flex; gap:42px; margin-bottom:14px; border-bottom:1px solid var(--panel-line) }
.tab{ padding:8px 2px; font-size:15px; font-weight:500; color:var(--text-sub); cursor:pointer; border:none; background:none; position:relative; font-family:inherit; transition:color .2s }
.tab:hover{ color:var(--primary) }
.tab.on{ color:var(--primary); font-weight:700; border-bottom:2px solid var(--primary) }

/* 输入项 */
.group{ margin-bottom:18px; padding-bottom:10px }
.field{ display:flex; align-items:center; background:var(--primary-bg); border:1px solid var(--line); border-radius:11px; height:42px; padding:0 16px; transition:border-color .25s }
.field .ic{ width:22px; color:var(--text-faint); flex-shrink:0; margin-right:8px; display:inline-flex }
.field input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:14px; color:var(--text); height:100%; font-family:inherit }
.field input::placeholder{ color:var(--text-faint) }
.cap-img{ width:100px; height:32px; border-radius:7px; flex-shrink:0; cursor:pointer; border:1px solid var(--panel-line); display:inline-block; object-fit:cover; background:#fff }
.cap-img:hover{ border-color:var(--primary) }
/* 密码显示/隐藏 */
.pwd-eye{ flex-shrink:0; width:22px; height:22px; color:var(--text-faint); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-left:8px }
.pwd-eye svg{ width:21px; height:21px }
.pwd-eye:hover{ color:var(--primary) }
/* 字段提示（静态说明文字） */
.msg{ font-size:12px; color:var(--text-faint); margin:3px 2px 0; line-height:1.35 }

/* 忘记密码 / 等高占位 */
.row{ display:flex; justify-content:flex-end; height:2px; align-items:flex-end }
.row a{ font-size:13px; color:var(--primary); text-decoration:none; border:none; background:none; cursor:pointer; font-family:inherit }
.row a:hover{ color:var(--primary-deep); text-decoration:underline }

/* 登录按钮 */
.btn{ width:100%; height:44px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--primary-soft) 0%,var(--primary) 52%,var(--primary-deep) 100%); background-size:200% 100%; color:#fff; font-size:16px; font-weight:700; letter-spacing:9px; text-indent:9px; cursor:pointer; box-shadow:0 10px 26px rgba(54,176,173,.32); transition:transform .25s, box-shadow .25s, background-position .4s; font-family:inherit; display:flex; align-items:center; justify-content:center }
.btn:hover:not(:disabled){ background-position:100% 0; transform:translateY(-2px); box-shadow:0 14px 32px rgba(54,176,173,.40) }
.btn:disabled{ opacity:.72; cursor:not-allowed; transform:none }
.btn .spin{ width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; display:none }
.btn.loading .spin{ display:inline-block; margin-right:8px }

/* 次按钮：注册 */
.reg{ width:100%; height:40px; margin-top:18px; border:1.5px solid var(--panel-line); border-radius:12px; background:#fff; color:var(--text-sub); font-size:14px; font-weight:600; letter-spacing:6px; text-indent:6px; cursor:pointer; transition:all .25s; font-family:inherit; display:flex; align-items:center; justify-content:center }
.reg:hover{ border-color:var(--primary); color:var(--primary-deep); background:var(--primary-bg) }

.tip{ font-size:12px; color:var(--text-faint); text-align:center; margin-top:10px; line-height:1.6 }

/* 短信获取验证码按钮 */
.sms-btn{ flex-shrink:0; border:none; background:none; color:var(--primary); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; padding:0 2px; font-family:inherit }
.sms-btn:disabled{ color:var(--text-faint); cursor:not-allowed }

/* ---- 右栏：品牌展示区（深青申报政务感） ---- */
.card-aside{
  flex:1 1 auto;
  position:relative;
  color:#fff;
  padding:46px 46px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(127,208,205,.26) 0%, rgba(42,122,136,0) 46%),
    linear-gradient(200deg, #2A96A6 0%, #2A7A88 58%, #1F5F6B 100%);
}
.card-aside .logo{ width:84px; height:84px; border-radius:50%; background:#fff; display:flex; margin:0 auto; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.18); overflow:hidden }
.card-aside .logo img{ width:100%; height:100%; object-fit:contain; display:block }
.card-aside .sys-name{ margin-top:30px }
.card-aside .sys-name .line1{ font-size:27px; font-weight:800; letter-spacing:1px; line-height:1.55 }
.card-aside .sys-name .line2{ margin-top:12px; font-size:18px; font-weight:600; letter-spacing:3px; opacity:.96 }
.card-aside .divider{ width:46px; height:3px; border-radius:3px; background:rgba(255,255,255,.85); margin-top:22px }
.aside-en{ margin-top:20px; font-size:11px; letter-spacing:2px; line-height:1.9; opacity:.85 }
.aside-feats{ list-style:none; margin-top:30px; display:grid; gap:14px }
.aside-feats li{ display:flex; align-items:center; gap:12px; font-size:14.5px; letter-spacing:1px; opacity:.97; padding:3px 0 }
.aside-feats li svg{ width:20px; height:20px; flex-shrink:0 }
.aside-ft{ margin-top:36px; font-size:13px; letter-spacing:4px; opacity:.92; font-weight:600 }
/* 右栏底部远山（单层简约） */
.aside-deco{ position:absolute; inset:auto 0 0 0; opacity:.5; pointer-events:none }

/* ---- 版权栏（非固定，跟随页面不被遮挡） ---- */
.footer{ text-align:center; font-size:12px; color:#7d9199; letter-spacing:.5px; margin-top:26px; position:relative; z-index:1 }

/* 弹层 */
.toast{ position:fixed; left:50%; top:8%; transform:translateX(-50%); background:rgba(31,95,107,.94); color:#fff; font-size:14px; padding:12px 22px; border-radius:10px; z-index:99; opacity:0; pointer-events:none; transition:opacity .3s; box-shadow:0 10px 30px rgba(0,0,0,.18) }
.toast.show{ opacity:1 }

@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }
@media (max-width:900px){
  body{ justify-content:flex-start; padding-top:22px }
  .card{ flex-direction:column; width:460px; max-width:94vw }
  .card-form{ flex:none; padding:30px 28px 26px; order:2 }
  .card-aside{ order:1; padding:32px 30px 28px; align-items:center; text-align:center; justify-content:flex-start }
  .card-aside .sys-name{ margin-top:22px }
  .card-aside .divider{ margin-left:auto; margin-right:auto }
  .aside-feats{ justify-content:center }
  .aside-feats li{ justify-content:center }
  .aside-ft{ margin-top:26px }
}
@media (max-width:420px){
  .card{ width:100% }
  .deco{ height:100px }
}
@media print{
  body{ background:#fff }
  .footer,.deco{ display:none }
}