:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; background: #10141d; color: #e8edf5; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1200px; padding: 1.5rem; }
header, .section-heading, .actions { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
h1, h2, h3, p { margin: .5rem 0 1rem; }
a { color: #93c5fd; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
button, select, input { font: inherit; color: inherit; background: #24324a; border: 1px solid #73829a; border-radius: .4rem; padding: .55rem .8rem; max-width: 100%; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
article, li { background: #1a2231; padding: 1rem; border: 1px solid #46546c; border-radius: .6rem; overflow-wrap: anywhere; }
dl { margin: .5rem 0; }
dl > div { display: flex; justify-content: space-between; gap: .8rem; }
dd { margin: 0; text-align: right; }
label { display: block; margin: .5rem 0; }
select, input { width: 100%; margin-bottom: .8rem; }
.notice, .warning { border-left: 4px solid #e6b86b; padding: .75rem; background: #28251f; }
#message, #confirm-error { color: #f5d399; min-height: 1.5em; }
ol { padding-left: 1.5rem; }
li { margin: .6rem 0; }
dialog { color: inherit; background: #1a2231; border: 1px solid #93c5fd; border-radius: .6rem; max-width: min(95vw, 640px); padding: 1.5rem; }
dialog::backdrop { background: #000b; }
[hidden] { display: none !important; }
@media (max-width: 500px) { body { padding: 1rem; } header { align-items: flex-start; } }