/* LAILAI 管理後台 登入頁：獨立於主系統style.css，主題「深夜海面」+ 強調色「晨間出海」，
   只服務login.html這一頁，不與Index.html共用任何元件樣式，避免互相牽動。 */
*{box-sizing:border-box}
body{margin:0}
.hidden{display:none!important}

body.login-page{
  min-height:100vh;
  min-height:100dvh;
  background:radial-gradient(circle at 50% 32%,#1c3c54 0%,#12293B 48%,#0A1B28 100%);
  font-family:"Microsoft JhengHei",system-ui,sans-serif;
  color:#1F2E3B;
  position:relative;
  overflow-x:hidden;
}

.login-wrap{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
}

.login-card{
  width:min(400px,100%);
  background:#FAF8F3;
  border-radius:16px;
  padding:clamp(28px,8vw,40px) clamp(22px,7vw,36px);
  box-shadow:0 24px 60px rgba(10,27,40,.35);
}

.login-brand{
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  background:#F1E4CD;
  color:#8B6B3D;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.login-title{margin:14px 0 0;font-size:26px;font-weight:900;color:#1F2E3B}
.login-subtitle{margin:6px 0 0;font-size:13px;color:#8B7F6E}

.login-divider{display:block;margin:18px 0 2px;overflow:visible}
.login-divider path{
  fill:none;
  stroke:#D98E4B;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:login-divider-draw .6s ease-out .1s forwards;
}
@keyframes login-divider-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .login-divider path{animation:none;stroke-dashoffset:0}
}

.login-form{margin-top:6px}
.login-field{display:block;margin-top:18px;font-size:13px;font-weight:700;color:#5B5142}
.login-field input{
  display:block;
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  border:1px solid #DDD6C7;
  border-radius:10px;
  background:#F5F1E8;
  color:#1F2E3B;
  font:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.login-field input::placeholder{color:#A69A88}
.login-field input:focus{
  outline:none;
  border-color:#D98E4B;
  background:#FAF8F3;
  box-shadow:0 0 0 4px rgba(217,142,75,.18);
}
/* Chrome/Edge/Safari的自動填入會用瀏覽器內建的淺藍/淺黃底色蓋掉background，
   一般權重的background規則蓋不過，要用這個inset box-shadow的技巧才蓋得掉 */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#1F2E3B;
  -webkit-box-shadow:0 0 0 1000px #F5F1E8 inset;
  box-shadow:0 0 0 1000px #F5F1E8 inset;
  transition:background-color 9999s ease-in-out 0s;
}
.login-field input:autofill{
  background:#F5F1E8;
}

.login-error{
  margin:16px 0 0;
  padding:11px 14px;
  border-radius:10px;
  background:#FBEAE6;
  color:#9B3A2E;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}

.login-submit{
  display:block;
  width:100%;
  margin-top:26px;
  padding:13px 20px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#D98E4B,#C17A38);
  color:#FDF6EC;
  font:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(193,122,56,.35);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(193,122,56,.45);
  background:linear-gradient(135deg,#e0995a,#C17A38);
}
.login-submit:active{transform:translateY(0)}
.login-submit:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:0 10px 24px rgba(193,122,56,.35)}

.login-horizon{
  position:fixed;
  left:0;right:0;bottom:0;
  width:100%;
  height:36px;
  opacity:.4;
  pointer-events:none;
}
.login-horizon path{fill:none;stroke:#2B4A63;stroke-width:1}