body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 95vh; background-color: #f0f2f5; margin: 20px; color: #333; } .container { background-color: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; text-align: center; } h2 { color: #1a202c; margin-bottom: 25px; } label { display: block; text-align: left; margin-bottom: 8px; font-weight: 500; color: #4a5568; } input[type="password"] { width: calc(100% - 22px); padding: 10px; margin-bottom: 20px; border: 1px solid #cbd5e0; border-radius: 6px; box-sizing: border-box; font-size: 16px; } input[type="password"]:focus { border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); outline: none; } button { background-color: #3182ce; color: white; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; width: 100%; transition: background-color 0.2s ease-in-out; } button:hover { background-color: #2b6cb0; } button:disabled { background-color: #a0aec0; cursor: not-allowed; } .message { margin-top: 20px; padding: 10px; border-radius: 6px; font-weight: 500; } .message.success { background-color: #e6fffa; color: #2c7a7b; border: 1px solid #b2f5ea; } .message.error { background-color: #fed7d7; color: #c53030; border: 1px solid #fbb6ce; } .loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-left: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }