* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #171517; color: #e5e5e5; min-height: 100vh; }

.auth-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
}

.auth-card {
    background: #1e1c1e; border: 1px solid #2d2b2d; border-radius: 16px;
    padding: 2.5rem; width: 100%; max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-logo {
    display: inline-flex; align-items: center; gap: 0.75rem;
    text-decoration: none; color: #fff; font-size: 1.5rem; font-weight: 700;
    margin-bottom: 1.5rem;
}
.auth-logo i { color: #6366f1; font-size: 2rem; }
.auth-logo img { height: 40px; width: auto; }
.auth-header h1 { font-size: 1.75rem; color: #fff; margin-bottom: 0.5rem; }
.auth-header p { color: #6b7280; }

.alert {
    padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; }

.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label {
    font-size: 0.875rem; color: #9ca3af; font-weight: 500;
    display: flex; align-items: center; gap: 0.5rem;
}
.form-group label i { color: #6366f1; width: 16px; }
.form-group input {
    background: #0f0e0f; border: 1px solid #2d2b2d; border-radius: 8px;
    padding: 0.875rem 1rem; color: #fff; font-size: 1rem; transition: all 0.3s;
}
.form-group input::placeholder { color: #4b5563; }
.form-group input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }

.form-footer { display: flex; justify-content: flex-end; margin-top: -0.5rem; }
.forgot-link { color: #6366f1; text-decoration: none; font-size: 0.875rem; transition: color 0.3s; }
.forgot-link:hover { color: #818cf8; }

.btn {
    padding: 0.875rem 1.5rem; border: none; border-radius: 8px; cursor: pointer;
    font-size: 1rem; font-weight: 600; transition: all 0.3s;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); }
.btn-discord { background: #5865F2; color: #fff; text-decoration: none; margin-bottom: 1rem; }
.btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(88, 101, 242, 0.3); }
.btn-block { width: 100%; }

.auth-divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.5rem 0; color: #4b5563; font-size: 0.875rem;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: #2d2b2d;
}

.auth-link { text-align: center; color: #6b7280; }
.auth-link a { color: #6366f1; text-decoration: none; font-weight: 500; }
.auth-link a:hover { color: #818cf8; }

.auth-legal {
    display: flex; justify-content: center; gap: 1.5rem;
    margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #2d2b2d;
}
.auth-legal a { color: #4b5563; text-decoration: none; font-size: 0.75rem; }
.auth-legal a:hover { color: #9ca3af; }

.auth-copyright {
    text-align: center; margin-top: 1rem;
    color: #374151; font-size: 0.75rem;
}