/* Global layout */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  color: #222;
  text-align: center; /* center page content */
  background: #f7f7f7;
}

/* Page container to constrain width and center content */
main, header, footer {
  max-width: 1100px;
  margin: 0 auto;
  text-align: left; /* keep content inside main left-aligned for readability */
}

/* Header / nav */
header {
  margin-bottom: 18px;
}
header h1 {
  margin: 0 0 8px 0;
  text-align: center; /* visually center the page title */
  font-size: 1.6em;
}
nav {
  margin-bottom: 12px;
  text-align: center;
}
nav a {
  margin: 0 10px;
  text-decoration: underline;    /* ALWAYS underline */
  font-weight: 600;
  color: #007bff;                /* blue link */
}

nav a:hover {
  color: #0056b3;                /* darker blue on hover */
}

/* Stats list (no bullets) */
.stats ul,
ul.stats {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.stats li {
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Table styling (center table block, keep your grid look) */
table {
  margin: 20px auto;
  border-collapse: collapse;
  width: 95%;
  max-width: 1100px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.grid { /* existing class preserved */
  border-collapse: collapse;
  width: 100%;
}
.grid th, .grid td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  font-size: 13px;
}
.grid th {
  background: #f6f6f6;
  text-align: left;
}

/* Form/filter styling */
.filter {
  margin: 12px auto;
  text-align: left;
  max-width: 1100px;
}
.filter label { margin-right: 8px; display: inline-block; margin-bottom: 6px; }

/* Pagination and small helpers */
.pagination { margin-top: 12px; text-align: center; }
.error { color: red; }
pre { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* Buttons & links */
button, input[type="button"], input[type="submit"] {
  padding: 6px 10px;
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}
a { color: #0366d6; }

/* Responsive tweaks */
@media (max-width: 800px) {
  header h1 { font-size: 1.2em; }
  .grid th, .grid td { padding: 6px 8px; font-size: 12px; }
  table { width: 98%; }
  .filter { padding: 0 8px; }
}

/* Small aesthetic: center the footer text */
footer { text-align: center; margin-top: 18px; color: #666; font-size: 13px; }