* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(#7d08d6, #cf96f5 65%);}
.login-container {background: white;padding: 35px 40px;border-radius: 20px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);width: 400px;}
.login-header {text-align: center;margin-bottom: 20px;}
.login-header h1 {color: #8A2BE2;font-size: 28px;margin-bottom: 10px;}
.login-header p {color: #666;}
.input-group {margin-bottom: 20px;position: relative;}
.input-group input {width: 100%;padding: 12px 40px 12px 15px;border: 2px solid #eee;border-radius: 8px;font-size: 16px;transition: border-color 0.3s;}
.input-group input:focus {outline: none;border-color: #8A2BE2;}
.input-group i {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: #888;}
.remember-me {display: flex;align-items: center;margin-bottom: 20px;}
.remember-me input {margin-right: 10px;accent-color: #8A2BE2;}
.login-btn {width: 100%;padding: 14px;background: #8A2BE2;color: white;border: none;border-radius: 8px;font-size: 16px;cursor: pointer;transition: background 0.3s;}
.login-btn:hover {background: #7B1FA2;}
@media (max-width: 480px) {.login-container {width: 90%;padding: 30px;}}
.down-div{margin-top: 15px;text-align: center;}
.down-div span{color: blue;cursor: pointer;margin-right: 20px;}