* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }

.login-container { background: white; border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); overflow: hidden; width: 100%; max-width: 400px; margin: 20px; }
.login-header { background: #1a237e; color: white; padding: 30px; text-align: center; }
.login-header h1 { font-size: 24px; margin-bottom: 5px; }
.login-header p { opacity: 0.9; font-size: 14px; }
.college-logo { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px; }
.college-logo img { width: 100%; height: 100%; object-fit: cover; }

.login-form { padding: 40px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }
.form-control { width: 100%; padding: 15px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; transition: border-color 0.3s ease; }
.form-control:focus { outline: none; border-color: #667eea; }

.captcha-section { display: flex; align-items: center; gap: 15px; }
.captcha-question { background: #f8f9fa; padding: 10px 15px; border-radius: 8px; font-weight: 500; color: #1a237e; }
.captcha-input { flex: 1; }

.btn { width: 100%; padding: 15px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }

.error { background: #fee; color: #c33; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #c33; }

.back-link { text-align: center; margin-top: 25px; }
.back-link a { color: #667eea; text-decoration: none; font-weight: 500; }
.back-link a:hover { text-decoration: underline; }

.user-icon { font-size: 48px; margin-bottom: 15px; text-align: center; color: #1a237e; }

.info-note { background: #e3f2fd; color: #1565c0; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }

@media (max-width: 480px) {
    .login-form { padding: 25px; }
    .login-header { padding: 25px; }
}