:root { color-scheme: light; font-family: system-ui, sans-serif; color: #152c44; background: #edf4f5; }
body { margin: 0; padding: 2rem 1rem; }
main { max-width: 720px; margin: auto; }
header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: #153354; color: #41d5c2; font-size: 2.4rem; font-weight: bold; }
h1, h2, p { margin: .4rem 0 1rem; }
section { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 3px 20px #17375117; }
label { display: block; font-weight: 600; margin-bottom: 1rem; }
input { display: block; box-sizing: border-box; width: 100%; margin-top: .3rem; padding: .8rem; border: 1px solid #aebec9; border-radius: 8px; font: inherit; }
button { background: #153354; color: white; padding: .75rem 1rem; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.secondary { background: #dce8ed; color: #153354; }
.actions, .heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
ul { padding-left: 1.4rem; overflow-wrap: anywhere; }
li { margin: .8rem 0; }
#message:not(:empty) { padding: .8rem; background: #d5f3ed; border-radius: 8px; }