:root { color-scheme: light; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14221e; background: #eef1e5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #e9ecdc url('/login-scene.png') center / cover no-repeat fixed; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(238,241,226,.08), rgba(245,246,237,.16) 35%, rgba(245,246,237,.16) 65%, rgba(238,241,226,.08)); }
main { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.login-card { width: min(100%, 520px); padding: 42px 46px 38px; border: 1px solid rgba(210,211,197,.92); border-radius: 30px; background: rgba(255,253,247,.94); box-shadow: 0 26px 80px rgba(37,53,43,.18), inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.login-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
.login-brand > div:last-child { display: grid; gap: 5px; }
.login-brand strong { color: #111916; font-size: 21px; letter-spacing: .28em; line-height: 1; }
.login-brand span { color: #39433e; font-size: 9px; font-weight: 800; letter-spacing: .28em; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 62px; height: 62px; overflow: hidden; border-radius: 16px; background: #0d0e0f; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
h1 { margin: 0; font-size: clamp(35px, 4vw, 47px); line-height: 1.04; letter-spacing: -.045em; }
.intro { margin: 15px 0 28px; color: #65716b; font-size: 16px; line-height: 1.5; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; color: #1c2722; font-weight: 760; font-size: 13px; }
input { width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid #cfd4cb; border-radius: 12px; background: rgba(255,255,255,.7); color: #15221e; font: inherit; outline: none; }
input::placeholder { color: #929b96; }
input:focus { border-color: #2f7d6a; box-shadow: 0 0 0 4px rgba(47,125,106,.12); }
.show-password { width: fit-content; margin-top: -7px; display: flex; grid-template-columns: none; align-items: center; gap: 9px; color: #52655d; font-weight: 650; cursor: pointer; }
.show-password input { width: 17px; height: 17px; margin: 0; padding: 0; accent-color: #2f7d6a; box-shadow: none; cursor: pointer; }
button { min-height: 54px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #26755e, #12543f); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 10px 20px rgba(21,85,64,.16); }
button:hover { background: linear-gradient(135deg, #226c56, #104b39); }
button:disabled { opacity: .65; cursor: wait; }
.error { min-height: 20px; margin: -6px 0; color: #a13d3d; font-size: 13px; }
.error.success { color: #236454; }
.approval-wait { margin-top: 18px; padding: 18px; border: 1px solid #bfd9cf; border-radius: 16px; background: #f2faf7; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; }
.approval-wait[hidden] { display: none; }
.approval-wait strong { display: block; color: #174f40; font-size: 14px; }
.approval-wait p { margin: 6px 0 0; color: #546860; font-size: 13px; line-height: 1.5; }
.approval-wait button { grid-column: 1 / -1; min-height: 42px; }
.approval-pulse { width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; background: #2f8b70; box-shadow: 0 0 0 0 rgba(47,139,112,.35); animation: approval-pulse 1.8s infinite; }
.approval-wait.final .approval-pulse { animation: none; background: #a13d3d; box-shadow: none; }
@keyframes approval-pulse { 70% { box-shadow: 0 0 0 9px rgba(47,139,112,0); } 100% { box-shadow: 0 0 0 0 rgba(47,139,112,0); } }
.account-recovery { color:#65756e;font-size:13px;line-height:1.55; }
.account-recovery strong { color:#2b3b35; }
.security-note { margin: 22px 0 0; padding-top: 17px; border-top: 1px solid #e0e2da; color: #858e89; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  body { background-position: 28% center; }
  body::before { background: rgba(241,244,234,.5); }
  main { padding: 18px; }
  .login-card { padding: 30px 24px; border-radius: 22px; }
  .login-brand { margin-bottom: 26px; }
  .login-brand strong { font-size: 17px; letter-spacing: .2em; }
  .login-brand span { font-size: 8px; letter-spacing: .2em; }
  .brand-mark { width: 54px; height: 54px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  main { padding: 14px; }
  .login-card { width: min(100%, 472px); padding: 22px 34px 20px; border-radius: 25px; }
  .login-brand { margin-bottom: 16px; }
  .brand-mark { width: 52px; height: 52px; border-radius: 14px; }
  .login-brand strong { font-size: 18px; }
  h1 { font-size: 37px; }
  .intro { margin: 10px 0 16px; font-size: 14px; }
  form { gap: 11px; }
  input { min-height: 46px; padding: 11px 14px; }
  .show-password { margin-top: -2px; }
  button { min-height: 48px; }
  .error { min-height: 16px; margin: -4px 0; }
  .account-recovery { margin: 10px 0; font-size: 12px; }
  .security-note { margin-top: 12px; padding-top: 12px; }
}