:root {
  font: 100%/1.55 system-ui, sans-serif;
  color: #172b34;
  background: #0a141a;
}
* { box-sizing: border-box; }
body {
  min-height: 100dvh;
  margin: 0;
  padding: clamp(12px, 4vw, 32px);
  background:
    radial-gradient(ellipse at 50% 0%, #25434d, transparent 72%),
    repeating-linear-gradient(145deg, transparent 0 106px, #d8eee00c 106px 108px, transparent 108px 166px);
}
.account-brand, main { max-width: 36rem; margin-inline: auto; }
.account-brand {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: .8rem;
  padding: .65rem clamp(1rem, 4vw, 2rem);
  background: #f6f4ee;
  border-radius: 1.15rem;
}
.account-brand::after {
  content: '';
  position: absolute;
  right: -24px;
  height: 120%;
  width: clamp(44px, 19vw, 110px);
  transform: skewX(-22deg);
  background: linear-gradient(90deg, #bc103b 0 13%, transparent 13% 25%, #14766d 25% 40%, transparent 40%);
}
.account-brand img { display: block; width: min(79%, 17rem); height: auto; }
main {
  border: 1px solid #d7dfd9;
  border-top: 4px solid #bd103b;
  border-radius: 1.15rem;
  background: #fffefa;
  padding: clamp(1rem, 5vw, 2rem);
}
h1 { margin: 0 0 1rem; font-size: clamp(1.55rem, 5vw, 2rem); line-height: 1.15; }
h2 { font-size: 1.2rem; margin-block: 1.5rem .5rem; }
form, label { display: grid; gap: .4rem; }
form { margin-block: 1rem; }
label:has(input[type=checkbox]) { grid-template-columns: auto 1fr; align-items: start; }
input, select, button, .primary-link { font: inherit; }
input:not([type=checkbox]), select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #7d9690;
  border-radius: .65rem;
  padding: .62rem;
  color: #172b34;
  background: #fffefa;
}
button, .primary-link {
  width: fit-content;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: .65rem;
  padding: .55rem .9rem;
  color: white;
  background: #b6173d;
  font-weight: 700;
  cursor: pointer;
}
.primary-link { display: inline-flex; align-items: center; text-decoration: none; }
.account-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .4rem .6rem;
  margin-block: .65rem;
  padding: .65rem;
  border: 1px solid #d1dfdb;
  border-radius: .8rem;
  background: #f1f5f1;
}
.account-code label { font-weight: 650; }
.account-code input { font: .95rem ui-monospace, monospace; }
.account-code-button { color: #174e4a; background: #fffefa; border-color: #6a8984; }
.account-code-status { grid-column: 1 / -1; margin: 0; font-size: .9rem; }
button:disabled { background: #616866; color: #fff; cursor: default; }
a { color: #075d57; text-underline-offset: .18em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #087e73; outline-offset: 3px; }
[hidden] { display: none !important; }
.account-note { margin: 0; font-size: .9rem; color: #3d5552; }
[role=status]:empty { display: none; }