body { font-family: Arial, sans-serif; margin: 0; }
table { width: 100%; border-collapse: collapse; margin-top: 1em; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #f5f5f5; text-align: left; }
.pagination { margin-top: 1em; }
.pagination a { margin: 0 5px; text-decoration: none; }
.pagination span { font-weight: bold; }
.stats-section { display: flex; gap: 30px; flex-wrap: wrap; flex-direction: column; width: 300px; }
.stats-section div { width: 100%; }
.stats-section h2 { width: 100%; }
.stats-section table { width: 100%; margin-top: 0; }
.container {
	display: flex;
	gap: 20px;
	padding: 20px;
	flex-wrap: wrap;
}
.container h1 { width: 100%; }
.container main { width: calc(100% - 330px) }
header { display: flex; justify-content: space-between; padding: 20px; position: relative; align-items: center; }
.nav-toggle { display: none; }

.nav-container {
  display: flex;
  gap: 1rem;
}
td a { max-width: 100%; }
.notice {
	text-align: center;
	padding: 10px;
	background: #1a769b;
	color: #fff;
}
header > a {
	color: #1a769b;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 10px;
    text-decoration: none;
}
.check-domain-error {
	color: red;
	margin: 0;
	width: 100%;
}
input {
	padding: 10px;
}
button {
	background: #1a769b;
	color: #fff;
	padding: 10px;
	cursor: pointer;
}
form input, form textarea {
	margin-top: 20px;
}
form input:first-of-type {
	margin-top: 0;
}
form .error {color: red; width: 100%; display: inline-block; margin-top: 5px; font-size: 12px; }
form .success {color: green; margin-bottom: 1em;}
form label {display: block; margin-top: 1em;}
form input, form textarea {width: 100%; padding: 8px; box-sizing: border-box;}
form textarea { min-height: 200px; }
form button {margin-top: 1em; padding: 10px 20px;}

@media screen and (max-width: 900px) {
	.container main, .stats-section {
		width: 100%;
	}
	.nav-container {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #111;
    padding: 1rem;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
  }
	.nav-container a {
		color: #fff;
	}

	  .nav-container.show {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
		margin: 20px;
		background: #1a769b;
		color: #fff;
	  }

	  /* Button visible on mobile already OK */
	.nav-toggle {
	  position: absolute;
	  top: 20px;
	  right: 20px;
	  z-index: 1000;
	  width: 35px;
	  height: 35px;
	  background: none;
	  border: none;
	  cursor: pointer;
	  display: block;
	}

	/* Base line */
	.hamburger {
	  position: relative;           /* make it a positioning context */
	  display: block;
	  width: 25px;
	  height: 3px;
	  background: #1a769b;          /* bar color */
	  margin: 6px auto;
	  transition: 0.3s ease;
	}

	/* Top & bottom lines */
	.hamburger::before,
	.hamburger::after {
	  content: "";
	  position: absolute;           /* stack relative to .hamburger */
	  left: 0;
	  width: 100%;
	  height: 3px;
	  background: #1a769b;
	  transition: 0.3s ease;
	}

	/* Vertical offsets for top/bottom bars */
	.hamburger::before { top: -8px; }
	.hamburger::after  { top:  8px; }

	/* Turn hamburger into X when active */
	.nav-toggle.active .hamburger {
	  background: transparent;      /* hide middle bar */
	}

	.nav-toggle.active .hamburger::before {
	  top: 0;
	  transform: rotate(45deg);
	}

	.nav-toggle.active .hamburger::after {
	  top: 0;
	  transform: rotate(-45deg);
	}
}