/* ============================================================
 * login.css — sign-in page (recreated from iOWL /sign-in)
 * ============================================================ */

.login-page {
  position: fixed; inset: 0; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  background-color: rgb(251, 249, 244);
  overflow: hidden;
}

/* decorative background blobs */
.bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 1; opacity: 0.6; }
.bg-blob--yellow {
  width: 400px; height: 400px; top: 10%; left: 10%;
  background: radial-gradient(circle, rgb(253, 228, 169), rgba(253, 228, 169, 0) 70%);
}
.bg-blob--blue {
  width: 500px; height: 500px; bottom: 10%; right: 10%;
  background: radial-gradient(circle, rgb(197, 223, 255), rgba(197, 223, 255, 0) 70%);
}

/* back button (top-right) */
.back-btn {
  position: absolute; top: 24px; right: 32px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; color: rgb(132, 96, 4);
  font-weight: 700; font-size: 16px; z-index: 10;
  text-decoration: none; background: none; border: none; font-family: inherit;
  transition: opacity 0.2s;
}
.back-btn:hover { opacity: 0.8; }
.back-btn .svg-icon { font-size: 18px; }

/* card */
.login-card {
  outline: none; background: #fff;
  width: 100%; max-width: 450px;
  padding: 40px 65px; border-radius: 24px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 40px;
  text-align: center; position: relative; z-index: 2;
}

.top-decoration {
  position: absolute; top: 14px; left: 0; width: 100%;
  display: flex; justify-content: center;
}
.top-decoration__line {
  width: 78%; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg,
    #f2dcba 0%, #d1a783 14%, #a37a5d 26%, #d1a783 36%,
    #f2dcba 49%, #d1a783 61%, #a37a5d 72%, #d1a783 84%, #f2dcba 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 0, #000 0, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  opacity: .85;
}

.header { margin-top: 14px; }
.header h1 {
  margin: 0; font-size: 30px; color: rgb(29, 43, 101);
  font-weight: 700; font-family: "Times New Roman", Georgia, serif;
}
.subtitle { margin-top: 8px; color: rgb(136, 136, 136); font-size: 14px; }

.login-form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }

/* input field */
.field {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 14px;
  border: 1px solid #e0e0e0; border-radius: 10px;
  background: #fff; transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: var(--gold); box-shadow: rgba(245,197,24,0.16) 0 0 0 2px; }
.field:hover { border-color: #b0b0b0; }
.field .login-icon { color: rgb(29, 37, 80); font-size: 18px; flex-shrink: 0; }
.field input {
  flex: 1 1 0%; border: none; outline: none; background: transparent;
  font-size: 15px; font-family: inherit; color: var(--ink-2);
}
.field input::placeholder { color: rgb(170,170,178); }

/* inline error */
.login-inline-error {
  display: none; align-items: center; gap: 6px;
  color: rgb(245, 108, 108); font-size: 13px;
  background-color: rgb(254, 240, 240);
  padding: 8px 12px; border-radius: 6px; text-align: left;
}
.login-inline-error.is-visible { display: flex; }

.submit-btn {
  border-radius: 10px; margin-top: 4px;
  background-color: rgb(26, 26, 72); color: #fff;
  border: 1px solid rgb(26, 26, 72);
  height: 48px; font-weight: 600; letter-spacing: 1px;
  width: 100%; font-size: 15px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color .3s, opacity .2s;
}
.submit-btn:hover { background-color: rgb(44, 44, 107); }
.submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.divider { display: flex; align-items: center; margin: 20px 0; color: rgb(153, 153, 153); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1 1 0%; border-bottom: 1px solid rgb(224, 224, 224); }
.divider span { padding: 0 10px; }

.other-methods { display: flex; flex-direction: column; gap: 12px; }
.method-btn {
  height: 48px; border-radius: 10px; font-weight: 700;
  display: flex; justify-content: center; align-items: center;
  position: relative; padding: 0 48px;
  font-size: 15px; font-family: inherit; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.method-btn .btn-left, .method-btn .btn-right {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
}
.method-btn .btn-left { left: 14px; }
.method-btn .btn-right { right: 14px; }
.method-btn .btn-text { display: inline-block; text-align: center; }

.ip-btn {
  background-color: rgb(255, 251, 240); color: rgb(184, 134, 11);
  border: 1px solid rgb(240, 230, 204);
}
.ip-btn:hover { background-color: rgb(255, 244, 219); border-color: rgb(230, 214, 168); }
.ip-btn .btn-icon { color: rgb(216, 191, 137); font-size: 15px; }
.arrow-icon { font-size: 16px; }

.agreement-text {
  font-size: 12px; color: rgb(136, 136, 136);
  text-align: center; margin-top: 24px; line-height: 1.4;
}
.agreement-text .link { color: rgb(29, 37, 80); text-decoration: none; margin: 0 2px; cursor: pointer; }
.agreement-text .link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .login-card { padding: 28px 24px; margin: 0 16px; }
  .header h1 { font-size: 24px; }
  .submit-btn, .method-btn { height: 44px; }
  .back-btn { top: 16px; right: 18px; }
}