/*css reset-uimaker.com版权所有*/
html{*overflow:auto;}

/*页面容器 - flex 垂直水平居中*/
#container{
	position:relative;background-color:#0170a4;
	display:flex;flex-direction:column;
	min-height:100vh;align-items:center;justify-content:center;
}
#bd{
	position:relative;width:100%;flex:1;
	display:flex;align-items:center;justify-content:center;
}

/* logo 图片 */
#logo{background-image:url(/assets/img/skin_/aoollogo.png) !important;}

/* Chrome 自动填充样式修复 */
input:-internal-autofill-previewed,
input:-internal-autofill-selected{
	-webkit-text-fill-color:#333 !important;
	transition:background-color 5000s ease-in-out 0s !important;
}

/*登录卡 - 居中定位*/
#main{
	position:relative;width:460px;min-height:538px;margin:0 auto;
	background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.25),0 8px 24px rgba(0,0,0,0.15);
	animation:login-card-in 600ms var(--ease-spring) both;
	overflow:hidden;
}
#main::before{
	content:"";position:absolute;top:0;left:0;right:0;height:4px;
	background:linear-gradient(to right,#00977D,#0e8bc5,#0170a4);
}

/* ============================================================
   品牌区 - LOGO + 标题 + 标语 全部居中
   ============================================================ */
.login-box{
	padding:36px 48px 24px 48px;
	display:flex;flex-direction:column;align-items:center;
}
.brand-area{
	width:100%;text-align:center;margin-bottom:12px;
	animation:login-brand-in 700ms var(--ease-out) 100ms both;
}
@keyframes login-brand-in{
	from{opacity:0;transform:translateY(-12px);}
	to{opacity:1;transform:translateY(0);}
}

/* LOGO - 引用澳镭青绿色 LOGO */
.login-box #logo{
	height:auto;margin:0 auto 14px auto;
	background:url(/assets/img/skin_/aoollogo.png) no-repeat center center;
	background-size:contain;
	min-height:64px;
	animation:login-logo-in 800ms var(--ease-spring) both;
}
@keyframes login-logo-in{
	from{opacity:0;transform:scale(0.85);}
	to{opacity:1;transform:scale(1);}
}

/* 主标题 - 生产订单管理系统 */
.login-box h1{
	font-size:32px;font-weight:700;letter-spacing:3px;
	color:#01587D;margin:0 0 6px 0;line-height:1.4;
}

/* 品牌标语 */
.brand-slogan{
	font-size:12px;color:#00977D;letter-spacing:2px;
	margin:0 0 8px 0;line-height:1.6;
	font-weight:500;
}

/* ============================================================
   表单区 - 居中排列
   ============================================================ */
.login-box .input{
	position:relative;width:100%;max-width:360px;height:44px;
	margin:0 auto 16px auto;
	animation:login-input-in 500ms var(--ease-out) both;
}
.login-box .input.username{animation-delay:300ms;}
.login-box .input.psw{animation-delay:380ms;}
.login-box .input.validate{animation-delay:460ms;}
@keyframes login-input-in{
	from{opacity:0;transform:translateY(8px);}
	to{opacity:1;transform:translateY(0);}
}

.login-box .input label{
	position:absolute;left:0;top:0;
	height:44px;line-height:44px;font-size:13px;color:#666;
	transition:color var(--t-base) var(--ease-out);
}
.login-box .input input{
	position:absolute;left:0;top:0;
	width:100%;height:44px;
	padding:0 14px 0 68px;
	border:1px solid #e0e0e0;border-radius:6px;
	outline:none;background:#fff;color:#333;font-size:14px;
	transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
	box-sizing:border-box;
}
.login-box .input input:focus{
	border-color:#00977D;
	box-shadow:0 0 0 3px rgba(0,151,125,0.12);
	background:#fff;
}
.login-box .input:focus-within label{color:#00977D;font-weight:600;}

/* 验证码 */
.login-box .validate .value{
	position:absolute;right:0;top:0;
	width:100px;height:44px;cursor:pointer;
	border-radius:0 6px 6px 0;overflow:hidden;
}
.login-box .validate .value img{width:100%;height:100%;}

/* 浏览器版本提示 */
.browser-tip{
	width:100%;max-width:360px;margin:4px auto 18px auto;
	text-align:center;color:red;font-size:12px;line-height:1.6;
}

/* ============================================================
   登录按钮 - 全宽居中
   ============================================================ */
#btn{
	position:relative;width:100%;max-width:360px;height:44px;
	margin:0 auto;
	animation:login-input-in 500ms var(--ease-out) 540ms both;
}
#btn .login.button{
	width:100%;height:44px;border:none;cursor:pointer;
	font-size:16px;font-weight:600;letter-spacing:4px;
	background:linear-gradient(135deg,#00977D 0%,#0e8bc5 100%);
	color:#fff;border-radius:6px;outline:none;
	transition:background var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),transform var(--t-fast) var(--ease-out);
}
#btn .login.button:hover{
	background:linear-gradient(135deg,#007f6a 0%,#047db6 100%);
	box-shadow:0 6px 20px rgba(0,151,125,0.35);
	transform:translateY(-1px);
}
#btn .login.button:active{transform:translateY(0);}

/*页脚*/
#ft{position:absolute;bottom:16px;left:0;right:0;height:auto;width:100%;text-align:center;line-height:1.6;color:#fff;font-size:12px;opacity:0.85;letter-spacing:1px;}

/* ============================================================
   背景装饰 - 渐变 + 光晕圆
   ============================================================ */
#container{
	background:linear-gradient(135deg,#0170a4 0%,#00977D 100%);
	position:relative;overflow:hidden;
}
#container::before,#container::after{
	content:"";position:absolute;border-radius:50%;
	pointer-events:none;
}
#container::before{
	top:-20%;left:-10%;width:45%;padding-bottom:45%;
	background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,transparent 70%);
}
#container::after{
	bottom:-20%;right:-10%;width:50%;padding-bottom:50%;
	background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);
}

/* ============================================================
   登录卡入场动画
   ============================================================ */
@keyframes login-card-in{
	from{opacity:0;transform:translateY(24px) scale(0.95);}
	to{opacity:1;transform:translateY(0) scale(1);}
}

/* ============================================================
   登录页响应式
   ============================================================ */
@media (max-width:768px){
	#main{width:calc(100% - 32px);min-height:auto;margin:60px auto 0 auto;border-radius:10px;}
	.login-box{padding:28px 24px 20px 24px;}
	.login-box #logo{width:200px;min-height:56px;}
	.login-box h1{font-size:18px;letter-spacing:1px;}
	.brand-slogan{font-size:11px;letter-spacing:0;}
	.login-box .input{max-width:100%;}
	.login-box .input input{padding:0 12px 0 60px;font-size:14px;}
	.login-box .validate .value{width:80px;}
	#btn{max-width:100%;}
	#ft{bottom:10px;font-size:11px;padding:0 12px;}
}
@media (max-width:480px){
	#main{width:calc(100% - 20px);}
	.login-box{padding:22px 18px 16px 18px;}
	.login-box #logo{width:170px;min-height:48px;}
	.login-box h1{font-size:16px;}
	.brand-slogan{display:none;}
}


/* ============= 图标嵌入输入框内部（非独立分区） ============= */
/* 去掉独立分区样式 + 把图标绝对定位到 input 框内左侧 14px */
.input-icon-wrap{
  position:absolute !important;
  left:14px !important; top:0 !important;
  width:auto !important; height:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:none !important; border-radius:0 !important; background:transparent !important;
  pointer-events:none !important; z-index:3 !important;
  padding:0 !important;
}
.input-icon-wrap svg{ width:20px !important; height:20px !important; display:block !important; stroke:#999999 !important; }
/* 聚焦时图标变绿（不做背景变化） */
.login-box .input:focus-within .input-icon-wrap svg{ stroke:#00977D !important; transition: stroke 0.2s ease; }

/* 隐藏用户名/密码 label 文字——图标在框里，不需要重复的 label */
.login-box .input.username > label,
.login-box .input.psw > label{ display:none !important; }

/* 输入框 padding-left 只留图标+间距（14px left + 20px 图标 + 10px gap ≈ 44px） */
.login-box .input.username input,
.login-box .input.psw input{
  padding-left: 44px !important;
}

/* 验证码 validate 不受影响 */