body{ background-image: url('/image/japan-fantasy-landscape-1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat} .login-container{ backdrop-filter: blur(8px); background-color: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.1)} .input-field{ background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255)} .input-field:focus{ background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3)} .form-toggle{ color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: all 0.3s ease} .form-toggle:hover{ color: white; text-decoration: underline} .hidden-form{ display: none} .loading-spinner{ display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite} @keyframes spin{ to{ transform: rotate(360deg)}}