body {
  font:16px system-ui;
  background:#f3f5f9;
  color:#172033;
  margin:0}
main {
  max-width:1020px;
  margin:40px auto;
  padding:24px}
section {
  background:white;
  padding:28px;
  border-radius:16px;
  margin:20px 0;
  box-shadow:0 5px 25px #1720330a}
h1 {
  font-size:28px}
h2 {
  font-size:20px}
label {
  display:block;
  font-size:14px;
  margin:12px 0}
input,select,textarea {
  display:block;
  box-sizing:border-box;
  width:100%;
  padding:11px;
  border:1px solid #c5cdda;
  border-radius:7px;
  margin-top:5px;
  font:inherit}
textarea {
  height:100px}
button {
  padding:11px 18px;
  border:0;
  border-radius:7px;
  background:#2563eb;
  color:white;
  cursor:pointer;
  margin:6px 8px 6px 0}
button.secondary {
  background:#e9eef8;
  color:#24375c}
button:disabled {
  opacity:.5;
  cursor:wait}
.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#101b30;
  color:#e0e9ff;
  padding:18px;
  border-radius:9px;
  max-height:420px;
  overflow:auto}
.muted {
  color:#62718b;
  font-size:14px}
[hidden] {
  display:none!important}
@media(max-width:650px) {
  .grid {
  display:block}
main {
  margin:0;
  padding:12px}
}

nav {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:16px 0}
a {
  color:#2563eb}
nav a[aria-current="page"] {
  font-weight:bold}
header {
  margin-bottom:24px}


.traffic-table { border-collapse:collapse; font-size:13px; width:100%; }
.traffic-table td { padding:10px; border-bottom:1px solid #ddd; white-space:nowrap; }

.scroll { overflow:auto; }
nav a { margin-right:12px; margin-bottom:8px; }