<style>
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: Arial, sans-serif; color:#333; line-height:1.5; }
a { color:#0077cc; text-decoration:none; }
header.site-header {
  display: flex; align-items: center; justify-content: space-between;
  background:#f2f2f2; padding:1em;
  position: sticky; top:0; z-index:100;
}
.logo { font-size:1.2rem; font-weight:bold; }
.nav-toggle { font-size:1.5rem; background:none; border:none; display:block; }
.main-nav { display:none; }
.main-nav ul { list-style:none; display:flex; flex-direction:column; gap:.5em; }
.user-box { font-size:.9rem; }

.hero {
  background:#e8f7ff; padding:.2em .2em; text-align:center;
}
.stats { padding:2em 1em; }
.table-container { overflow-x:auto; }
table {
  width:100%; border-collapse: collapse;
}
th, td {
  border:1px solid #ccc; padding:.5em; text-align:left;
}
.links-grid {
  display:grid; grid-template-columns:1fr; gap:1em;
  padding:1em;
}
.links-grid a {
  display:block; padding:1em; background:#fafafa; border:1px solid #ddd;
  border-radius:6px; text-align:center;
}
.site-footer {
  padding:1.5em; background:#f2f2f2; text-align:center; font-size:.9rem;
}

/* Medium screens */
@media(min-width: 600px) {
  .main-nav { display:flex; }
  .main-nav ul { flex-direction:row; gap:1em; }
  .nav-toggle { display:none; }
  .links-grid { grid-template-columns: repeat(2,1fr); }
}

/* Large screens */
@media(min-width: 900px) {
  .links-grid { grid-template-columns: repeat(3,1fr); }
}
}