main { max-width: 640px; margin: 3rem auto; padding: 2rem; background: white; border-radius: 12px; }
h1 { margin-top: 0; font-size: 1.7rem; }
label { display: block; font-weight: 600; margin: 1.2rem 0 .4rem; }
select, input, button { box-sizing: border-box; width: 100%; padding: .8rem; font: inherit; border-radius: 6px; }
select, input { border: 1px solid #8793a3; background: white; }
button { border: 0; background: #2157ad; color: white; cursor: pointer; margin-top: 1rem; }
button:disabled { background: #667085; cursor: default; }
:focus-visible { outline: 3px solid #eab308; outline-offset: 3px; }
.error { color: #a11c25; }
#city-status { min-height: 1.5em; color: #000; }
#city-details { color: #000; }
table { width: 100%; color: #000; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: .7rem; border-bottom: 1px solid #dce2ea; overflow-wrap: anywhere; }
th { width: 30%; }

body, select, input, #city-status { color: #000; }
button { color: white; }
@media (max-width: 700px) { main { margin: 1rem; padding: 1.2rem; } }