* { box-sizing: border-box; }
body { margin: 0; background: #101726; color: #eaf0fa; font: 16px system-ui, sans-serif; }
main { max-width: 750px; margin: auto; padding: 24px; }
header p { color: #72e5d5; letter-spacing: .14em; }
header h1 { margin-top: 0; }
.card { background: #1a2436; border: 1px solid #334258; border-radius: 14px; padding: 20px; margin-block: 16px; }
label { display: block; margin-block: 12px; }
input, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px; background: #101726; color: inherit; border: 1px solid #566882; border-radius: 6px; font: inherit; }
textarea { min-height: 90px; }
button, a { display: inline-block; padding: 8px 12px; border-radius: 6px; color: #101726; background: #72e5d5; font: inherit; border: 0; cursor: pointer; text-decoration: none; }
:focus-visible { outline: 2px solid white; outline-offset: 3px; }
article { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid #334258; }
.error { color: #ffaaaa; }
.danger { background: #ffaaaa; }