body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f4f4f4;
  color: #222;
}
header {
  text-align: center;
  background-color: #007bff;
  color: white;
  padding: 20px;
  border-radius: 6px;
}
main {
  max-width: 900px;
  margin: 20px auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
footer {
  text-align: center;
  margin-top: 20px;
  color: #666;
}
h1, h2 {
  margin: 0 0 12px 0;
}
p { line-height: 1.5; }
.address { font-style: italic; color: #444; }

/* API controls */
.api-controls { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
#call-backend-btn { align-self: start; padding: 8px 12px; background:#007bff; color:#fff; border:none; border-radius:4px; cursor:pointer; }
#call-backend-btn[disabled] { opacity: 0.7; cursor: default; }
#api-output { width: 100%; font-family: monospace; font-size: 13px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }