:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172138; background: #f5f6f8; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
main { width: min(100%, 640px); margin: 0 auto; padding: 32px 24px 48px; }
.logo { height: auto; max-width: 100%; display: block; margin-bottom: 24px; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 20px; }
h2 { font-size: 18px; margin: 0 0 12px; }
p, li { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
section { border-top: 1px solid #b9c1ce; padding: 20px 0; }
label { display: block; font-weight: 600; }
input:not([type=checkbox]) { width: 100%; font: inherit; min-height: 48px; border: 1px solid #7b879b; border-radius: 12px; padding: 12px; margin: 8px 0 16px; background: #fff; color: #172138; }
button { min-height: 48px; width: 100%; border: 0; border-radius: 24px; padding: 12px 20px; background: #3467aa; color: #fff; font: inherit; font-weight: 600; cursor: pointer; margin: 8px 0; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #887518; outline-offset: 3px; }
.danger { background: #a72d36; }
.secondary { background: transparent; color: #285c9e; border: 1px solid currentColor; }
a { color: #285c9e; }
.confirmation { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
#status { min-height: 26px; }
#status.error { color: #a02030; }
#receipt { border-top: 4px solid #dedb28; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root { color: #f4f4f5; background: #17191b; }
  section { border-color: #686c73; }
  input:not([type=checkbox]) { background: #25282c; color: #f4f4f5; }
  a, .secondary { color: #a9ceff; }
  #status.error { color: #ffb9bc; }
}