@font-face {
  font-family:Cairo;
  src:url('/static/cairo-variable.ttf') format('truetype');
  font-weight:200 900;
  font-display:swap
}
:root {
  color-scheme:dark;
  --bg:#11131b;
  --surface:#191d29;
  --inset:#141720;
  --line:#343a4b;
  --text:#f2f3f8;
  --muted:#adb6c8;
  --accent:#7352d6;
  --accent-ink:#c4b4ff;
  --warning:#f0c477;
  --success:#6ddcb5;
  --danger:#ffa1ac;
  font-family:Cairo,'Segoe UI',Tahoma,sans-serif;
  font-size:15px;
  color:var(--text);
  background:var(--bg)
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:var(--accent-ink);
  text-underline-offset:5px
}
button,input {
  font:inherit
}
button,.button {
  min-height:48px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  padding:10px 20px;
  font-weight:650;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
button:hover,.button:hover {
  background:#7a56d7
}
button:disabled {
  opacity:.48;
  cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--accent-ink);
  outline-offset:4px
}
input {
  background:var(--inset);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  min-height:50px;
  padding:10px 14px;
  min-width:0;
  width:100%;
  caret-color:var(--accent-ink)
}
label {
  display:block;
  margin:0 0 10px;
  font-weight:600
}
h1 {
  font-size:clamp(24px,4vw,30px);
  line-height:1.5;
  margin:0 0 10px
}
h2 {
  font-size:18px;
  margin:0 0 20px
}
p {
  line-height:1.85;
  margin:0 0 16px
}
.masthead {
  max-width:1040px;
  margin:auto;
  padding:26px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  color:var(--muted)
}
.brand {
  font-size:20px;
  font-weight:750;
  text-decoration:none;
  color:var(--text)
}
main {
  max-width:760px;
  margin:44px auto;
  padding:0 28px 40px
}
.intro {
  margin-bottom:26px
}
.intro p {
  color:var(--muted)
}
.notice {
  background:#362d20;
  color:var(--warning);
  border:1px solid #56442a;
  border-radius:10px;
  padding:14px 18px
}
.workspace {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  margin-top:22px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.section-heading h2 {
  margin-bottom:18px
}
.text-button {
  background:transparent;
  color:var(--accent-ink);
  min-height:44px;
  padding:4px 0;
  font-size:13px
}
.text-button:hover {
  background:transparent;
  text-decoration:underline
}
.input-row {
  display:flex;
  gap:12px
}
.input-row button {
  flex-shrink:0
}
.hint {
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
  margin:12px 0 0
}
.divider {
  border-top:1px solid var(--line);
  margin:26px 0
}
.wide {
  width:100%;
  margin-top:22px
}
.account-ready {
  margin:0;
  color:var(--success)
}
.account-ready strong {
  display:inline-block;
  margin-inline-start:8px;
  color:var(--text)
}
.error {
  padding:14px 18px;
  border:1px solid #613440;
  background:#3b242e;
  color:var(--danger);
  border-radius:10px
}
.state-message {
  color:var(--accent-ink);
  font-weight:600
}
.receipt dl {
  margin:22px 0
}
.receipt dl>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline
}
.receipt dt {
  color:var(--muted);
  flex-shrink:0
}
.receipt dd {
  margin:0;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums
}
.reference {
  font-size:12px
}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.secondary {
  background:transparent;
  color:var(--accent-ink);
  border:1px solid var(--line)
}
.secondary:hover {
  background:#252b3a
}
footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:30px;
  font-size:13px
}
::selection {
  background:#342946;
  color:#f2f3f8
}
[hidden] {
  display:none!important
}
@media(max-width:540px) {
  .masthead {
    padding:20px 22px
  }
  main {
    margin-top:28px;
    padding:0 18px 28px
  }
  .workspace {
    padding:22px 18px
  }
  .input-row {
    flex-direction:column
  }
  .actions {
    flex-direction:column
  }
  .actions>* {
    width:100%
  }
  .receipt dl>div {
    flex-direction:column;
    gap:6px;
    padding:12px 0
  }
  footer {
    flex-direction:column;
    gap:14px
  }
  .reference {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}
.account-ready strong,#found-user {
  overflow-wrap:anywhere;
  max-width:100%
}