:root{color-scheme:light;font:100% system-ui,sans-serif;color:#18352d;background:#f4f5ef}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
header{background:#153e35;color:white}
.bar,main{max-width:68rem;margin:auto;padding:1.25rem clamp(1rem,4vw,2rem)}
.bar,.result-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.bar h1,h2,p{margin:0}
h1{font-size:clamp(1.25rem,4vw,1.7rem)}
h2{font-size:1.3rem}
.card{background:#fff;border:1px solid #dbe4d9;border-radius:1rem;padding:clamp(1rem,3vw,1.5rem);margin-block:1rem}
.login{max-width:27rem;margin:clamp(1rem,8vw,5rem) auto}
form{margin-block-start:1.5rem}
label{display:block;font-weight:650;margin-block-end:.35rem}
input,select,button{min-height:2.85rem;border-radius:.55rem;font:inherit}
input,select{width:100%;background:#fff;color:inherit;border:1px solid #9cafa4;padding:.5rem .7rem}
form input{margin-block-end:1rem}
button{background:#17604f;color:white;border:1px solid transparent;padding:.5rem 1rem;cursor:pointer;font-weight:650}
form button{width:100%}
.secondary{background:#edf4ef;color:#184b3e;border-color:#c7d9ce}
button:disabled{opacity:.65;cursor:wait}
:focus-visible{outline:3px solid #378476;outline-offset:3px}
.filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem;align-items:end}
#status{background:#fff5e0;border:1px solid #ddc79d;padding:.8rem 1rem;border-radius:.65rem;overflow-wrap:anywhere}
#count,#empty,.contact{color:#4c6258}
#empty{padding-block:1rem}
ul{padding:0;margin:0;list-style:none}
li{border-block-start:1px solid #e4ebe6;padding:.8rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;overflow-wrap:anywhere}
li:first-child{margin-block-start:.8rem}
.contact{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
@media(max-width:40rem){.filters{grid-template-columns:minmax(0,1fr)}.filters button{justify-self:start}}