:root {
 font-family: system-ui,-apple-system,sans-serif;
 color:#182435;
 background:#f5f8f8;
}
* {box-sizing:border-box}
body {margin:0}
.shell {
 max-width:1100px;
 margin:auto;
 padding:24px;
}
header {
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 0;
 border-bottom:1px solid #dde4e5;
}
header strong {
 font-size:26px;
 letter-spacing:-1px;
}
header strong span {color:#009f9c}
header small {color:#64748b}
main {padding:26px 0}
h1 {font-size:26px}
.card {
 background:white;
 border:1px solid #e1e8eb;
 border-radius:16px;
 padding:20px;
 margin:16px 0;
 box-shadow:0 4px 20px #0d243609;
}
input,select,textarea,button {font:inherit}
input,select,textarea {
 width:100%;
 padding:12px;
 margin:7px 0 12px;
 border:1px solid #cdd7dc;
 border-radius:9px;
}
button {
 padding:11px 17px;
 border:0;
 border-radius:10px;
 background:#182435;
 color:white;
 cursor:pointer;
 margin:4px;
}
button:hover {background:#009f9c}
nav {
 display:flex;
 flex-wrap:wrap;
 gap:6px;
}
nav button {
 background:#e8efef;
 color:#182435;
}
nav button.active {
 background:#009f9c;
 color:white;
}
.item {
 padding:12px;
 border-bottom:1px solid #ecf0f2;
 display:flex;
 justify-content:space-between;
 gap:12px;
}
.muted {
 color:#687a88;
 font-size:13px;
}
#feedback {
 color:#a33535;
 font-weight:600;
}
#auth {
 max-width:520px;
 margin:30px auto;
}
@media(max-width:640px) {
 .shell {padding:14px}
 header {
  align-items:start;
  gap:10px;
  flex-direction:column;
 }
 .item {display:block}
 h1 {font-size:22px}
}