/* BME Systems Authentication UI — Hercules hierarchy + restrained macOS interaction */
:root{
  --auth-bg:#fafafa;
  --auth-surface:#ffffff;
  --auth-border:#e5e5e5;
  --auth-border-strong:#cfcfcf;
  --auth-text:#171717;
  --auth-muted:#737373;
  --auth-placeholder:#a3a3a3;
  --auth-hover:#f5f5f5;
  --auth-active:#efefef;
  --auth-danger:#a94444;
  --auth-danger-bg:#fff7f7;
  --auth-success:#2f6f55;
  --auth-success-bg:#f3faf6;
  --auth-brand:#0b315f;
  --auth-brand-hover:#08294f;
  --auth-focus:rgba(23,23,23,.055);
  --auth-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.055);
  --motion-base:var(--motion-normal,180ms);
}

html[lang="th"] body.auth-page{font-family:"Noto Sans Thai","Inter",sans-serif}
html[lang="en"] body.auth-page{font-family:"Inter","Noto Sans Thai",sans-serif}
body.auth-page{
  min-height:100dvh;
  margin:0;
  color:var(--auth-text);
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.94) 0,rgba(255,255,255,.34) 28%,transparent 58%),
    var(--auth-bg);
  font-size:14px;
  line-height:1.5;
  font-weight:400;
}
.auth-page button,.auth-page input{font-family:inherit}
.auth-page a{color:inherit}
.auth-text-en{display:none}
html[lang="en"] .auth-text-th{display:none}
html[lang="en"] .auth-text-en{display:inline}

.auth-topbar{
  position:fixed;
  inset:0 0 auto;
  z-index:10;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px clamp(16px,3vw,32px);
  pointer-events:none;
}
.auth-topbar>*{pointer-events:auto}
.auth-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  color:#686868;
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  transition:color var(--motion-base) var(--ease-standard),background-color var(--motion-base) var(--ease-standard),transform var(--motion-fast,120ms) var(--ease-standard);
}
.auth-home:hover{color:var(--auth-text)}
.auth-home:active{transform:scale(.985)}
.auth-home svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

.auth-language{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  padding:2px;
  border:1px solid #e7e7e7;
  border-radius:10px;
  background:#f1f1f1;
}
.auth-language button{
  min-width:38px;
  height:28px;
  padding:0 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#777;
  font-size:11px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  transition:background-color var(--motion-base) var(--ease-standard),color var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),transform var(--motion-fast,120ms) var(--ease-standard);
}
.auth-language button:hover{color:#444}
.auth-language button:active{transform:scale(.975)}
.auth-language button.is-active{
  background:#fff;
  color:#202020;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}

.auth-main{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:76px 16px 32px;
}
.auth-card{
  width:min(424px,100%);
  padding:30px 30px 26px;
  border:1px solid var(--auth-border);
  border-radius:16px;
  background:var(--auth-surface);
  box-shadow:var(--auth-shadow);
  animation:auth-card-enter var(--motion-slow,240ms) var(--ease-smooth,cubic-bezier(.16,1,.3,1)) both;
}
.auth-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:26px;
}
.auth-logo{
  display:block;
  width:104px;
  height:auto;
  margin-bottom:16px;
}
.auth-brand h1{
  margin:0;
  font-family:"Tenor Sans","Inter","Noto Sans Thai",sans-serif;
  font-size:18px;
  line-height:1.3;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--auth-text);
}
.auth-brand p{
  margin:5px 0 0;
  color:var(--auth-muted);
  font-size:12px;
  line-height:1.5;
  font-weight:400;
}
.auth-divider{
  height:1px;
  margin:0 0 23px;
  background:#eeeeee;
}
.auth-form-title{
  margin:0 0 4px;
  color:var(--auth-text);
  font-size:16px;
  line-height:1.4;
  font-weight:500;
}
.auth-form-subtitle{
  margin:0 0 22px;
  color:var(--auth-muted);
  font-size:12px;
  line-height:1.55;
  font-weight:400;
}

.wrap-input100{margin:0 0 15px}
.wrap-input100>label{
  display:block;
  margin:0 0 7px;
  color:#3f3f3f;
  font-size:14px;
  line-height:1.4;
  font-weight:500;
}
.input-shell{
  position:relative;
  height:44px;
  display:flex;
  align-items:center;
  border:1px solid var(--auth-border);
  border-radius:10px;
  background:#fff;
  transition:border-color var(--motion-base) var(--ease-standard),background-color var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard);
}
.input-shell:hover{border-color:#d9d9d9}
.input-shell:focus-within{
  border-color:#bdbdbd;
  box-shadow:0 0 0 3px var(--auth-focus);
}
.input100{
  width:100%;
  min-width:0;
  height:100%;
  padding:0 12px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--auth-text);
  caret-color:var(--auth-brand);
  font-size:14px;
  line-height:1;
  font-weight:400;
}
.input100::placeholder{color:var(--auth-placeholder);opacity:1}
.password-input{padding-right:44px}
.toggle-password{
  position:absolute;
  top:50%;
  right:5px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#858585;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background-color var(--motion-base) var(--ease-standard),color var(--motion-base) var(--ease-standard),opacity var(--motion-fast,120ms) var(--ease-standard);
}
.toggle-password:hover{background:var(--auth-hover);color:#4a4a4a}
.toggle-password:active{background:var(--auth-active)}
.toggle-password svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toggle-password .eye-closed{display:none}
.toggle-password.is-visible .eye-open{display:none}
.toggle-password.is-visible .eye-closed{display:block}
.field-error{
  min-height:17px;
  margin:5px 0 0;
  color:var(--auth-danger);
  font-size:12px;
  line-height:1.45;
  font-weight:400;
}
.field-error:not(:empty){animation:auth-error-enter var(--motion-base) var(--ease-smooth) both}
.wrap-input100.invalid .input-shell{border-color:#c98282;box-shadow:0 0 0 3px rgba(169,68,68,.045)}

.login-options{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 18px;
}
.remember{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:#666;
  font-size:12px;
  line-height:1.4;
  font-weight:400;
  cursor:pointer;
  user-select:none;
}
.remember input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--auth-brand);
}
.forgot-link{
  color:#555;
  font-size:12px;
  line-height:1.4;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--motion-base) var(--ease-standard),opacity var(--motion-base) var(--ease-standard);
}
.forgot-link:hover{color:#171717;text-decoration:underline;text-underline-offset:3px}

.login100-form-btn{
  position:relative;
  width:100%;
  height:44px;
  display:grid;
  place-items:center;
  padding:0 16px;
  border:1px solid #092b53;
  border-radius:10px;
  background:var(--auth-brand);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-size:14px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  overflow:hidden;
  transition:background-color var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),transform var(--motion-fast,120ms) var(--ease-standard),opacity var(--motion-fast,120ms) var(--ease-standard);
}
.login100-form-btn:hover:not(:disabled){background:var(--auth-brand-hover);border-color:#072344}
.login100-form-btn:active:not(:disabled){transform:scale(.985)}
.login100-form-btn:focus-visible,.auth-language button:focus-visible,.auth-home:focus-visible,.forgot-link:focus-visible,.toggle-password:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(11,49,95,.11);
}
.login100-form-btn:disabled{opacity:.68;cursor:wait;transform:none}
.button-text{transition:opacity var(--motion-fast,120ms) var(--ease-standard)}
.button-loader{
  position:absolute;
  width:16px;
  height:16px;
  border:1.5px solid rgba(255,255,255,.34);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:auth-spin .7s linear infinite;
}
.login100-form-btn.loading .button-text{opacity:0}
.login100-form-btn.loading .button-loader{opacity:1}

.form-message{
  display:none;
  margin-top:12px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:12px;
  line-height:1.45;
  text-align:left;
}
.form-message.show{display:block;animation:auth-message-enter var(--motion-base) var(--ease-smooth) both}
.form-message.success{color:var(--auth-success);border-color:#dceee4;background:var(--auth-success-bg)}
.form-message.error{color:var(--auth-danger);border-color:#efdada;background:var(--auth-danger-bg)}
.auth-footnote{
  margin:20px 0 0;
  color:#999;
  font-size:11px;
  line-height:1.5;
  text-align:center;
  font-weight:400;
}

@keyframes auth-card-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes auth-error-enter{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes auth-message-enter{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes auth-spin{to{transform:rotate(360deg)}}

@media(max-width:560px){
  .auth-topbar{min-height:54px;padding:9px 16px}
  .auth-main{padding:66px 14px max(18px,env(safe-area-inset-bottom));place-items:start center}
  .auth-card{width:100%;padding:22px 20px 20px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.025);}
  .auth-brand{margin-bottom:20px}
  .auth-logo{width:72px;max-height:72px;object-fit:contain;margin-bottom:12px}
  .auth-brand h1{font-size:17px}
  .auth-divider{margin-bottom:20px}
  .auth-form-subtitle{margin-bottom:18px}
  .login-options{align-items:center}
}
@media(max-width:360px){
  .auth-card{padding-inline:20px}
  .auth-home span{display:none}
  .remember{font-size:11.5px}
  .forgot-link{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .auth-card,.field-error:not(:empty),.form-message.show{animation:none!important}
  .auth-page :is(button,a,input,.input-shell){transition-duration:.01ms!important;transition-delay:0s!important}
  .button-loader{animation-duration:1.2s}
}