body, html {
  margin:0; padding:0;
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  color: #333;
}
.login-box {
  width: 320px; margin: 100px auto;
  background: #fff; padding: 30px;
  border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}
.login-box .logo { width: 80px; margin-bottom: 15px; }
.login-box input, .login-box button {
  width: 90%; padding: 10px; margin: 8px 0;
  border-radius: 5px; border: 1px solid #ccc;
}
.login-box button {
  background: #ff0000; color: #fff; border: none;
  cursor: pointer;
}
.login-box button:hover { background: #cc0000; }
.error { color: red; }
.header {
  background: #fff ; color: #000; padding: 20px; position: relative;
  text-align: center;
}
.header img { height: 50px; vertical-align: middle; background:#fff; }
.header h1 { display: inline; margin-left: 10px; color: #ff0000; }
.logout {
  position: absolute; top: 20px; right: 20px;
  background: #ff0000; color: #fff; padding: 8px 12px;
  border-radius: 4px; text-decoration: none;
}
.nav {
  background: #111; overflow: auto; white-space: nowrap;
}
.nav a {
  display: inline-block; color: #fff; padding: 14px 20px;
  text-decoration: none;
}
.nav a:hover { background: #ff0000; }
.container { padding: 20px; }
.card {
  background: #fff; padding: 20px; margin-bottom: 20px;
  border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
table {
  width:100%; border-collapse:collapse; margin-top:20px;
}
th, td {
  padding:10px; border:1px solid #ddd; text-align:left;
}
th { background:#000; color:#fff; }
form input, form select, form textarea, form button {
  width:100%; padding:10px; margin:8px 0; border-radius:4px; border:1px solid #ccc;
}
form button { background:#ff0000; color:#fff; border:none; cursor:pointer; }
form button:hover { background:#cc0000; }