body { font-family: system-ui, sans-serif; margin: 24px; color: #202734; background: #f6f7f9; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 24px; }
a { color: #174e9c; }
input, button { font: inherit; padding: 8px 12px; border: 1px solid #9099a8; border-radius: 6px; background: white; }
input { min-width: 0; max-width: 100%; box-sizing: border-box; }
button { cursor: pointer; }
input:focus-visible, button:focus-visible, a:focus-visible, .table-scroll:focus-visible { outline: 3px solid #174e9c; outline-offset: 3px; }
.search { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search input { flex: 0 1 360px; }
.table-scroll { overflow: auto; max-height: 70vh; margin: 16px 0; border: 1px solid #cbd2dc; background: white; }
table { border-collapse: collapse; font-size: 14px; width: 100%; }
th, td { padding: 12px; border: 1px solid #e0e4ea; vertical-align: top; text-align: left; }
th { position: sticky; top: 0; background: #eaf0f7; }
pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 110px; max-width: 400px; margin: 0; }
.pager { display: flex; gap: 24px; margin: 24px 0; }
.login { max-width: 420px; margin: 48px auto; }
.login form { display: grid; gap: 12px; }
.login button { margin-top: 12px; }
.error { color: #a01b1b; }