* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pink: #e83e8c;
  --pink-dark: #c92f75;
  --gold: #c9a227;
  --white: #ffffff;
  --text: #29212a;
  --muted: #817681;
  --border: #eadfe7;
  --background: #fff7fb;
  --card: rgba(255, 255, 255, 0.94);
  --danger: #d93025;
  --success: #168a55;
  --shadow: 0 25px 70px rgba(87, 36, 70, 0.16);
}

body {
  min-height: 100vh;

  font-family:
    Tahoma,
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(232, 62, 140, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(201, 162, 39, 0.14),
      transparent 30%
    ),
    var(--background);

  color: var(--text);
}


.login-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}


.login-card {
  width: 100%;
  max-width: 440px;

  padding: 42px 36px 30px;

  background: var(--card);

  border: 1px solid rgba(255, 255, 255, 0.8);

  border-radius: 28px;

  box-shadow: var(--shadow);

  backdrop-filter: blur(15px);

  position: relative;

  overflow: hidden;
}


.login-card::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  height: 5px;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      var(--gold),
      var(--pink)
    );
}


/* Brand */

.brand {
  text-align: center;

  margin-bottom: 34px;
}


.brand-logo {
  width: 72px;
  height: 72px;

  margin: 0 auto 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 22px;

  color: var(--white);

  font-size: 32px;
  font-weight: bold;

  background:
    linear-gradient(
      145deg,
      var(--pink),
      var(--pink-dark)
    );

  box-shadow:
    0 12px 30px rgba(232, 62, 140, 0.3);

  border: 2px solid rgba(201, 162, 39, 0.55);
}


.brand h1 {
  font-size: 25px;

  margin-bottom: 8px;

  color: var(--text);
}


.brand p {
  color: var(--muted);

  font-size: 14px;
}


/* Form */

.form-group {
  margin-bottom: 20px;
}


.form-group label {
  display: block;

  margin-bottom: 9px;

  font-size: 14px;

  font-weight: bold;
}


.input-wrapper {
  position: relative;

  display: flex;
  align-items: center;
}


.input-icon {
  position: absolute;

  right: 15px;

  font-size: 18px;

  pointer-events: none;
}


.input-wrapper input {
  width: 100%;

  height: 54px;

  padding:
    0 48px
    0 48px;

  border: 1px solid var(--border);

  border-radius: 15px;

  outline: none;

  background: rgba(255, 255, 255, 0.8);

  color: var(--text);

  font-family: inherit;

  font-size: 15px;

  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}


.input-wrapper input:focus {
  border-color: var(--pink);

  background: var(--white);

  box-shadow:
    0 0 0 4px rgba(232, 62, 140, 0.10);
}


.input-wrapper input::placeholder {
  color: #aaa0a8;
}


.password-toggle {
  position: absolute;

  left: 10px;

  width: 36px;
  height: 36px;

  border: 0;

  background: transparent;

  cursor: pointer;

  border-radius: 10px;

  font-size: 17px;
}


.password-toggle:hover {
  background: rgba(232, 62, 140, 0.08);
}


/* Message */

.login-message {
  padding: 12px 14px;

  margin-bottom: 16px;

  border-radius: 12px;

  font-size: 13px;

  line-height: 1.8;

  text-align: center;
}


.login-message.error {
  color: var(--danger);

  background: rgba(217, 48, 37, 0.08);

  border: 1px solid rgba(217, 48, 37, 0.15);
}


.login-message.success {
  color: var(--success);

  background: rgba(22, 138, 85, 0.08);

  border: 1px solid rgba(22, 138, 85, 0.15);
}


/* Button */

.login-button {
  width: 100%;

  height: 55px;

  border: 0;

  border-radius: 15px;

  cursor: pointer;

  color: white;

  font-family: inherit;

  font-size: 16px;

  font-weight: bold;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      var(--pink-dark)
    );

  box-shadow:
    0 12px 25px rgba(232, 62, 140, 0.24);

  transition:
    transform 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
}


.login-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 30px rgba(232, 62, 140, 0.3);
}


.login-button:active {
  transform: translateY(0);
}


.login-button:disabled {
  opacity: 0.7;

  cursor: not-allowed;

  transform: none;
}


/* Loader */

.loader {
  display: inline-block;

  width: 20px;
  height: 20px;

  border: 3px solid rgba(255, 255, 255, 0.4);

  border-top-color: white;

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

  vertical-align: middle;
}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* Footer */

.login-footer {
  margin-top: 28px;

  padding-top: 20px;

  border-top: 1px solid var(--border);

  display: flex;

  justify-content: center;

  gap: 6px;

  flex-wrap: wrap;

  color: var(--muted);

  font-size: 12px;

  text-align: center;
}


.login-footer strong {
  color: var(--pink);
}


/* Mobile */

@media (max-width: 520px) {

  .login-page {
    padding: 15px;
  }

  .login-card {
    padding: 36px 22px 25px;

    border-radius: 23px;
  }

  .brand {
    margin-bottom: 28px;
  }

  .brand-logo {
    width: 64px;
    height: 64px;

    border-radius: 19px;
  }

  .brand h1 {
    font-size: 22px;
  }

  .input-wrapper input {
    height: 52px;
  }

  .login-button {
    height: 53px;
  }
}


/* Dark Mode */

@media (prefers-color-scheme: dark) {

  :root {
    --text: #f7eef5;
    --muted: #b8aab5;
    --border: #3b3038;
    --background: #171217;
    --card: rgba(32, 25, 32, 0.96);
  }

  body {
    background:
      radial-gradient(
        circle at 15% 20%,
        rgba(232, 62, 140, 0.16),
        transparent 30%
      ),
      radial-gradient(
        circle at 85% 80%,
        rgba(201, 162, 39, 0.10),
        transparent 30%
      ),
      var(--background);
  }

  .input-wrapper input {
    background: #241d24;

    color: var(--text);
  }

  .input-wrapper input:focus {
    background: #29212a;
  }
}