:root { font: 16px/1.55 system-ui, sans-serif; color: #17283a; background: #f2f6fa; }
body { margin: 0; }
main { box-sizing: border-box; max-width: 60rem; margin: clamp(1rem, 6vw, 4rem) auto; padding: clamp(1rem, 4vw, 2.5rem); background: white; border: 1px solid #d8e2ed; border-radius: 1rem; }
h1 { font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.2; margin: 0 0 1.4rem; }
label { display: block; font-weight: 650; margin-bottom: .45rem; }
.search-bar { display: flex; flex-wrap: wrap; gap: .55rem; }
input, button { font: inherit; border-radius: .5rem; min-height: 2.8rem; box-sizing: border-box; }
input { min-width: min(100%, 14rem); flex: 1; padding: .5rem .75rem; border: 1px solid #7e91a5; }
button { padding: .5rem 1.25rem; background: #13588e; border: 1px solid #13588e; color: white; font-weight: 650; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #1976be; outline-offset: 3px; }
#status:empty { display: none; }
#result { margin-top: 1rem; }
.table-scroll { overflow-x: auto; border: 1px solid #d8e2ed; border-radius: .5rem; }
table { width: 100%; border-collapse: collapse; text-align: left; }
td, th { padding: .6rem .75rem; overflow-wrap: anywhere; }
th { background: #edf4fa; }
td { border-top: 1px solid #d8e2ed; }
.instructions { margin-top: 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.instructions:empty { display: none; }
a { color: #125688; }
@media (max-width: 62rem) { main { margin-inline: .75rem; } }