body {margin:0; font-family:'Segoe UI',sans-serif; background:#f8f9fa; color:#333;}
.hero {background:linear-gradient(135deg,#007bff,#00a2ff); height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; color:white;}
.hero .overlay {padding:40px;}
.hero .content h1 {font-size:2.5em; margin-bottom:10px;}
.hero .content span {color:#fff700;}
.btn, .btn-outline {padding:10px 20px; margin:5px; border-radius:5px; text-decoration:none; font-weight:bold;}
.btn {background:white; color:#007bff;}
.btn-outline {border:2px solid white; color:white;}
.btn:hover {background:#e0e0e0;}
.btn-outline:hover {background:white; color:#007bff;}
footer {background:#007bff; color:white; text-align:center; padding:10px; position:fixed; bottom:0; width:100%;}
.login-container {display:flex; align-items:center; justify-content:center; height:100vh; background:linear-gradient(135deg,#007bff,#00a2ff);}
.card {background:white; padding:30px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.1); width:300px;}
.card h2 {text-align:center; margin-bottom:20px;}
.card input {width:100%; padding:10px; margin:8px 0; border:1px solid #ccc; border-radius:5px;}
.card button {width:100%; padding:10px; background:#007bff; color:white; border:none; border-radius:5px; cursor:pointer;}
.card button:hover {background:#0056b3;}
.topbar {background:#007bff; color:white; padding:10px 20px; display:flex; justify-content:space-between; align-items:center;}
.dashboard {padding:40px; text-align:center;}