body { font-family: Arial; text-align: center; padding: 100px 50px 50px; position: relative; background: linear-gradient(to bottom, #f0f0f0, #ffffff); }
#logo { position: absolute; top: 10px; left: 10px; width: 100px; transition: transform 0.3s; }
#logo:hover { transform: scale(1.1); }
h1 { color: #333; animation: fadeIn 1s; }
p { color: #666; font-size: 16px; animation: fadeIn 1.5s; }
button { padding: 15px 30px; font-size: 18px; background: linear-gradient(45deg, #4CAF50, #45a049); color: white; border: none; cursor: pointer; border-radius: 5px; transition: all 0.3s; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
button:hover { background: linear-gradient(45deg, #45a049, #4CAF50); transform: scale(1.05); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
#status { margin-top: 20px; font-size: 16px; animation: fadeIn 0.5s; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; margin-right: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.toast { position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 10px 20px; border-radius: 5px; display: none; z-index: 1000; animation: fadeIn 0.5s; }