body:has(.account-layout) { background: #111112; }
body:has(.account-layout)::before { content: ""; position: absolute; inset: 0 0 auto; height: max(720px, 100svh); background: linear-gradient(#0d0d109c, #17171be0 51%, #111112 94%), url("/assets/gallery-1.webp") center top / cover; filter: blur(2px); pointer-events: none; }
.account-layout { position: relative; display: grid; justify-items: center; min-height: 71vh; padding-block: clamp(42px, 6.6vw, 110px) 3.5rem; }
.account-box { width: min(100%, 25rem); }
.account-box h1 { font: 400 clamp(1.6rem, 3.7vw, 4rem)/1.05 var(--display); text-transform: uppercase; width: max-content; max-width: 91vw; margin: 0 0 .7em 50%; transform: translateX(-50%); text-align: center; overflow-wrap: anywhere; }
.account-lead, .account-box > p:not(.account-note) { text-align: center; }
.account-box p { line-height: 1.55; color: #ccc; }
.account-box p a, .account-forgot, .account-links a:not(.button-orange) { color: var(--orange); }
.account-box a:hover { text-decoration: underline; }
.account-form { display: grid; gap: .7rem; margin-top: 1.55rem; }
.account-form label { display: grid; gap: .45rem; font-weight: 650; }
.account-form label span { color: #aaa; font-weight: 400; }
.account-form input:not([type=hidden]):not([type=checkbox]) { display: block; width: 100%; border: 1px solid transparent; border-radius: .5rem; background: #121213; padding: 1.1rem; color: var(--ink); min-height: 3.5rem; }
.account-form input::placeholder { color: #d0d0d0; opacity: 1; }
.account-form input:focus { outline: 2px solid var(--orange); outline-offset: 0; }
.account-form .button-orange { justify-content: center; text-transform: uppercase; margin-top: 2.5rem; }
.account-options { display: flex; justify-content: space-between; gap: .6rem; align-items: center; margin-top: .6rem; }
.account-options label { display: flex; align-items: center; font-weight: 400; cursor: pointer; }
.account-options input { accent-color: var(--orange); width: 1.2rem; height: 1.2rem; margin: 0; }
.account-hint { margin: 0; font-size: .87rem; }
.account-note { padding: .9rem 1rem; border-left: 3px solid var(--orange); background: #272526; }
.account-note code { display: block; overflow-wrap: anywhere; margin: .8rem 0; }
.account-links, .account-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.4rem; }
.account-topup { margin-top: 1.5rem; padding: 1.2rem; border: 1px solid var(--line); background: #171719; }
.account-topup h2 { margin: 0; font-size: 1.3rem; }
.account-topup .account-links { margin-block: 1rem; }
.account-actions button, .account-note button { padding: .65rem .9rem; border: 1px solid var(--line); background: #262626; }
.account-actions button:hover, .account-note button:hover { border-color: var(--orange); }
@media (max-width: 730px) {
  .account-layout { min-height: auto; }
  .account-box h1 { font-size: clamp(1.3rem, 5vw, 2.75rem); }
}