/* MegaTron animated login / sign-up (based on the "animated login form" template, MIT) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
:root { --white-color: hsl(0,0%,100%); --gold: #ffd84a; --gold-deep: #b8860b; --body-font: "Poppins", system-ui, sans-serif; --h1-font-size: 1.75rem; --normal-font-size: 1rem; --small-font-size: .813rem; --font-medium: 500; }
* { box-sizing: border-box; padding: 0; margin: 0; }
body, input, button { font-size: var(--normal-font-size); font-family: var(--body-font); }
body { color: var(--white-color); background: #050403; }
input, button { border: none; outline: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

.login { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; align-items: center; padding: 1.5rem 0; }
.login__img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.login__form {
  position: relative; background-color: hsla(0,0%,6%,.35);
  border: 2px solid var(--gold); margin-inline: 1.25rem; padding: 2.25rem 1.5rem; border-radius: 1rem;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 0 30px rgba(255,216,74,.35), inset 0 0 18px rgba(255,216,74,.08);
}
.login__brand { display: block; width: 84px; margin: 0 auto .6rem; filter: drop-shadow(0 0 12px rgba(255,216,74,.7)); border-radius: 50%; }
.login__title { text-align: center; font-size: var(--h1-font-size); font-weight: var(--font-medium); margin-bottom: 1.6rem;
  background: linear-gradient(135deg,#fff1b8,#ffd84a 40%,#b8860b 70%,#f5d76e); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.login__msg { border-radius: .6rem; padding: .7rem .9rem; margin-bottom: 1.2rem; font-size: var(--small-font-size); line-height: 1.4; }
.login__msg.error { background: rgba(127,29,29,.75); border: 1px solid #f87171; color: #fee2e2; }
.login__msg.success { background: rgba(20,83,45,.75); border: 1px solid #4ade80; color: #dcfce7; }
.login__content, .login__box { display: grid; }
.login__content { row-gap: 1.6rem; margin-bottom: 1.4rem; }
.login__box { grid-template-columns: max-content 1fr; align-items: center; column-gap: .75rem; border-bottom: 2px solid var(--gold); }
.login__icon, .login__eye { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login__input { width: 100%; padding-block: .8rem; background: none; color: var(--white-color); position: relative; z-index: 1; }
.login__input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.login__box-input { position: relative; }
.login__label { position: absolute; left: 0; top: 13px; font-weight: var(--font-medium); color: rgba(255,255,255,.9); transition: top .3s, font-size .3s, color .3s; pointer-events: none; }
.login__eye { position: absolute; right: 0; top: 18px; z-index: 10; cursor: pointer; }
.login__box.has-eye input { padding-right: 1.8rem; }
.login__input:focus + .login__label,
.login__input:not(:placeholder-shown) + .login__label { top: -12px; font-size: var(--small-font-size); color: var(--gold); }
.login__check, .login__check-group { display: flex; align-items: center; justify-content: space-between; }
.login__check { margin-bottom: 1.4rem; gap: .6rem; flex-wrap: wrap; }
.login__check-label, .login__forgot, .login__register { font-size: var(--small-font-size); }
.login__check-group { column-gap: .5rem; justify-content: flex-start; }
.login__check-input { width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.login__forgot, .login__check-label a { color: var(--gold); }
.login__forgot:hover, .login__check-label a:hover { text-decoration: underline; }
.login__button { width: 100%; padding: 1rem; border-radius: .5rem; background: linear-gradient(135deg,#fff1b8 0%,#ffd84a 35%,#b8860b 70%,#f5d76e 100%); background-size: 200% 200%; color: #1a1300; font-weight: 600; cursor: pointer; margin-bottom: 1.6rem; box-shadow: 0 0 18px rgba(255,216,74,.4); animation: sheen 6s ease-in-out infinite; }
.login__button:hover { box-shadow: 0 0 30px rgba(255,216,74,.7); }
@keyframes sheen { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
.login__register { text-align: center; }
.login__register a { color: var(--gold); font-weight: var(--font-medium); }
.login__register a:hover { text-decoration: underline; }
.login__hint { font-size: var(--small-font-size); color: rgba(255,255,255,.75); margin: -.9rem 0 1.2rem; }
.login__modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 50; padding: 1.5rem; }
.login__modal[hidden] { display: none; }
.login__modal div { background: #12100a; border: 1px solid var(--gold); border-radius: 1rem; padding: 1.4rem; max-width: 420px; font-size: .9rem; line-height: 1.5; }
.login__modal h3 { color: var(--gold); margin-bottom: .6rem; }
@media screen and (min-width: 576px) {
  .login { justify-content: center; }
  .login__form { width: 452px; padding: 2.75rem 3rem 2.5rem; border-radius: 1.5rem; margin-inline: 0; }
  .login__title { font-size: 2rem; }
}