.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

.lynx-login-page {
  background:
    radial-gradient(circle at 10% 10%, rgba(174, 222, 255, 0.82), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(218, 204, 255, 0.72), transparent 30%),
    linear-gradient(135deg, #eef7ff, #f8f1ff);
  position: relative;
  overflow: hidden;
}

.lynx-login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .22;
  pointer-events: none;
}

.lynx-login-shell {
  position: relative;
  z-index: 1;
}

.lynx-login-card {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 28px;
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 30px 90px rgba(61, 93, 145, .18);
  backdrop-filter: blur(28px) saturate(150%);
}

.lynx-login-logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: white;
  background: linear-gradient(135deg, #0b5bd3, #7a84ff);
  box-shadow: 0 16px 34px rgba(60, 98, 231, .28);
}

.lynx-login-logo .material-symbols-outlined {
  font-size: 28px;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.lynx-input-wrap {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(126, 149, 190, .30);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.lynx-input-wrap:focus-within {
  border-color: rgba(11, 91, 211, .72);
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 0 4px rgba(11, 91, 211, .12), inset 0 1px 0 rgba(255,255,255,.84);
}

.lynx-input-wrap > .material-symbols-outlined {
  color: #667085;
  font-size: 22px;
}

.lynx-input-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: #182033;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  box-shadow: none;
}

.lynx-input-wrap input::placeholder {
  color: #8a93a6;
  font-weight: 500;
}

.lynx-input-wrap button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #667085;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.lynx-input-wrap button:hover {
  color: #0b5bd3;
  background: rgba(11, 91, 211, .10);
}

.lynx-input-wrap button:active {
  transform: scale(.96);
}

.lynx-login-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b5bd3, #6b72ff);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 18px 36px rgba(60, 98, 231, .28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.lynx-login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(60, 98, 231, .34);
}

.lynx-login-button:active {
  transform: scale(.98);
}

.lynx-login-error {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(186, 26, 26, .22);
  border-radius: 16px;
  background: rgba(255, 218, 214, .66);
  color: #93000a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 480px) {
  .lynx-login-card {
    padding: 22px;
    border-radius: 24px;
  }
}