:root { color-scheme: light; font-family: system-ui, sans-serif; color: #182c38; background: #f1f5f7; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 640px; margin: 64px auto; padding: 0 22px; }
.environment { display: inline-block; padding: 6px 12px; margin: 0; border-radius: 6px; background: #e0eaf0; font-size: 14px; }
h1 { margin: 16px 0 30px; font-size: 30px; }
section { padding: 28px; border: 1px solid #d2dfe5; border-radius: 14px; background: #fff; }
h2 { margin: 0 0 24px; font-size: 20px; }
dl { margin: 0 0 28px; }
dl div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid #e4ebef; }
dt { color: #536571; }
dd { margin: 0; font-weight: 600; text-align: right; }
button { font: inherit; min-height: 44px; padding: 9px 24px; border: 0; border-radius: 7px; background: #155e75; color: #fff; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible { outline: 3px solid #1d8ab2; outline-offset: 4px; }
#message { margin: 16px 0 0; line-height: 1.65; }
#message:empty { display: none; }
.error { color: #a61b23; }
@media (max-width: 420px) { main { margin-top: 30px; } section { padding: 20px; } dl div { gap: 12px; font-size: 14px; } }