:root { color-scheme: light; font-family: system-ui, sans-serif; color: #192b42; background: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1rem max(1.25rem, calc((100% - 78rem) / 2)); background: #132f51; color: white; }
.brand { font-weight: 750; font-size: 1.5rem; text-decoration: none; color: white; }
main, #status { max-width: 78rem; margin: auto; padding: 1.25rem; }
#status:empty { display: none; }
#status { white-space: pre-wrap; background: #e5effc; border-bottom: 2px solid #2468ac; }
#status.error { background: #fff0ec; border-color: #b02c26; color: #89221c; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
section { background: white; border: 1px solid #d9e2ed; border-radius: .75rem; padding: 1.25rem; margin: 1.25rem 0; }
.auth { max-width: 30rem; margin: 3rem auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.grid > section { margin: 0; }
label { display: block; font-weight: 600; margin: .85rem 0; }
input, select, textarea, button { font: inherit; border-radius: .35rem; }
input, select, textarea { display: block; width: 100%; padding: .65rem; border: 1px solid #8799af; margin-top: .35rem; color: #192b42; background: white; }
textarea { min-height: 7rem; resize: vertical; }
input[type=checkbox] { display: inline-block; width: auto; margin: 0 .65rem 0 0; accent-color: #1859a5; }
button { padding: .65rem 1rem; background: #1859a5; color: white; border: 1px solid transparent; cursor: pointer; margin: .4rem .5rem .4rem 0; }
button.secondary { background: #edf3fb; color: #163f70; border-color: #b4c8e0; }
button.danger { color: #92261f; background: #fff1ef; border-color: #e7b6ae; }
button:disabled { opacity: .5; cursor: wait; }
button[aria-pressed=true] { outline: 3px solid #5e8abb; outline-offset: 2px; }
:focus-visible { outline: 3px solid #cf891d; outline-offset: 2px; }
small, .muted { color: #4e627a; } .muted { font-size: .95rem; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row > label { flex: 1; min-width: min(100%, 15rem); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.item { border-top: 1px solid #d9e2ed; padding: 1rem 0; overflow-wrap: anywhere; }
.item:first-child { border-top: none; }
details { border-top: 1px solid #d9e2ed; padding: .9rem 0; }
summary { cursor: pointer; font-weight: 600; padding: .35rem 0; overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; } .actions { margin-top: 1rem; }
dialog { max-width: min(32rem, calc(100% - 2rem)); border: 1px solid #a6b9ce; border-radius: .75rem; padding: 1.5rem; }
dialog::backdrop { background: #10223799; }