* { box-sizing: border-box; }
:root { font: 16px/1.55 system-ui, sans-serif; color: #152938; background: #edf2f5; }
body { margin: 0; }
header { color: #fff; background: #142b39; }
.bar, main { max-width: 1200px; margin: auto; padding: 1rem 1.25rem; }
.bar, nav, .filter { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.brand { font-size: 1.15rem; font-weight: 750; }
.brand small { margin-left: .5rem; color: #a8d9ce; font-size: .65rem; letter-spacing: .1em; }
nav span { color: #c6d9df; }
header a { color: inherit; }
main { padding-bottom: 3rem; }
section { background: white; border: 1px solid #d5e0e6; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
h2 { font-size: 1.15rem; margin-top: 0; }
label { display: block; margin-bottom: .65rem; }
input, select { display: block; width: 100%; min-width: 0; padding: .45rem; border: 1px solid #768d9b; border-radius: 5px; font: inherit; }
button, .button { display: inline-block; color: white; background: #135f55; border: 0; border-radius: 5px; font: inherit; padding: .4rem .75rem; cursor: pointer; text-decoration: none; }
a { color: #115e55; }
.filter { justify-content: start; align-items: end; margin-bottom: .85rem; }
.filter label { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: 1rem; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .65rem; vertical-align: top; border-bottom: 1px solid #e2ebef; }
th { background: #f2f6f8; }
.badge { display: inline-block; padding: .08rem .4rem; border-radius: 5px; background: #eef2f4; }
.online { background: #d6f3e4; color: #0d4e30; }
.offline { background: #f9e2df; color: #792525; }
details { margin-top: .5rem; }
details form { margin-top: .6rem; }
summary { cursor: pointer; }
.secret { display: block; overflow-wrap: anywhere; padding: .75rem; background: #edf2f5; user-select: all; }