html,body{
  height:100%;
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f3f6fa;
  color:#121212;
  display:flex;
  flex-direction:column;
}

header{
  background:#0a2342;
  color:#fff;
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

nav ul{
  list-style:none;
  display:flex;
  gap:20px;
  margin:0;
  padding:0;
}

nav a{
  display:inline-block;
  padding:10px 12px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  border-radius:6px;
  transition:background-color .22s ease-in-out, transform .06s ease-in-out;
}

nav a:hover,
nav a:focus{
  background:#114b8c;
  transform:translateY(-1px);
}

.logout-btn{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  background:#114b8c;
  color:#fff;
  border:0;
  padding:10px 16px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:background-color .22s ease-in-out, box-shadow .22s ease-in-out;
}

.logout-btn:hover,
.logout-btn:focus{
  background:#083363;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

main{
  flex:1;
  padding:28px 20px;
}

footer{
  background:#0a2342;
  color:#fff;
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

@media (max-width:768px){
  header{height:auto; padding:10px 0}
  .logout-btn{position:static; transform:none; margin-top:8px}
  nav ul{flex-wrap:wrap; justify-content:center; gap:12px}
  footer{height:auto; padding:16px 10px}
}