/* One identity design shared by the public dialog and server-rendered pages. */
.auth-page {margin:0;min-height:100dvh;background:#030d18;color:#eff6fc;font:1rem/1.6 Inter,"Segoe UI",sans-serif;color-scheme:dark}
.auth-page *,.account-surface * {box-sizing:border-box}
.auth-shell {width:min(100% - 32px,1080px);margin:auto;padding:26px 0 56px}
.auth-nav {display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.auth-brand {display:inline-flex;align-items:center;gap:9px;color:#eff6fc;font-weight:750;text-decoration:none}
.auth-brand img {width:27px;height:27px}
.auth-navlinks {display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:.875rem}
.auth-nav a:focus-visible,.account-surface :focus-visible {outline:2px solid #06d9ef;outline-offset:3px}
.auth-navlinks a,.auth-page a {color:#5ee8f8;text-underline-offset:3px}
.auth-page .auth-brand {color:#eff6fc}
.auth-page .inline {display:inline;margin:0}
.account-surface {position:relative;box-sizing:border-box;color:#eff6fc;background:#081a29;border:1px solid #214251;border-radius:26px;padding:32px;width:min(450px,100%);margin:0 auto;box-shadow:0 30px 120px #0005;overflow-wrap:anywhere;font-family:Inter,"Segoe UI",sans-serif}
dialog.account-surface {position:fixed;inset:0;width:min(450px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:hidden}
dialog.account-surface[open] {display:flex;flex-direction:column}
dialog.account-surface [data-account-content] {min-height:0;min-width:0;margin:8px;padding:24px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#52748c transparent}
dialog.account-surface .account-close {z-index:2;background:#081a29}
.account-surface .front-symbol {display:inline-grid;place-items:center;width:38px;height:38px;color:#0ddbf4;background:#052232;border-radius:50%;margin-bottom:18px}
.account-surface .front-symbol svg {width:19px;height:19px}
.account-surface h1,.account-surface h2 {font-size:1.65rem;line-height:1.2;font-weight:650;letter-spacing:-.035em;margin:0 20px 12px 0}
.account-surface p {font-size:1rem;line-height:1.65;color:#a1b7c8;margin:0 0 20px}
.account-surface form {display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.account-surface .account-field {display:grid;gap:6px;min-width:0}
.account-password-control {display:flex;align-items:stretch;gap:8px;min-width:0}
.account-password-control input {flex:1;min-width:0}
.account-surface .account-password-toggle {flex:none;align-self:stretch;min-width:48px;padding:8px;color:#5ee8f8;background:#081a29;border:1px solid #284759;border-radius:12px;font:500 .875rem/1.5 Inter,"Segoe UI",sans-serif;cursor:pointer}
/* Let the form shrink below Turnstile's 300px flexible minimum so its existing observer selects compact mode. */
.account-surface [data-human-check] {width:100%;min-width:0;max-width:100%;line-height:0;container:human-check / inline-size}
.account-surface [data-human-check] > div {width:100%;max-width:100%}
.account-surface [data-human-check] > div > div {margin-inline:auto;max-width:100%}
@container human-check (max-width:299px) {.account-surface [data-human-check] > div {width:150px;margin-inline:auto}}
.account-surface label {font-size:.875rem;font-weight:500;line-height:1.5;color:#d8e5ef;margin:0}
.account-surface input:not([type=checkbox]):not([type=hidden]) {box-sizing:border-box;width:100%;min-width:0;border:1px solid #284759;border-radius:12px;padding:11px 13px;background:#030f1c;color:#eef7ff;outline-offset:2px;font:1rem/1.5 Inter,"Segoe UI",sans-serif}
.account-surface input::placeholder {color:#849daf}
.account-surface input[type=checkbox] {accent-color:#0cdcef;width:17px;height:17px;flex:none;margin:3px 0 0}
.account-surface .account-check {display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.account-surface a {color:#5ee8f8;text-decoration:underline;text-underline-offset:3px}
.account-surface .button,.account-surface button[type=submit] {display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;padding:11px 20px;border-radius:999px;font:650 .875rem/1.5 Inter,"Segoe UI",sans-serif;background:#06d9ef;color:#00222c;border:1px solid #06d9ef;text-decoration:none;cursor:pointer}
.account-surface .button:hover,.account-surface button[type=submit]:hover {background:#50e9f8}
.account-surface button:disabled {opacity:.55;cursor:not-allowed}
.account-surface .account-login {text-align:center;margin:20px 0 0;font-size:.875rem}
.account-surface form + p {margin-top:20px}
.account-surface .account-status,.account-surface .error,.account-surface .notice {border:1px solid #294b5e;border-radius:12px;padding:10px 12px;color:#d3e7f4;margin:0 0 16px;font-size:.875rem}
.account-surface .account-status:empty {display:none}
.account-surface .account-status.is-error,.account-surface .error {border-color:#774449;color:#ffb7b7}
.account-surface .account-hint,.account-surface p.account-hint,.account-surface .muted {font-size:.875rem;color:#8da6b9}
.account-surface form .account-hint {margin:0}
.account-surface [hidden] {display:none!important}
.account-surface .actions {margin-top:8px}
.auth-page .wide {width:min(820px,100%)}
.auth-page article h2 {margin-top:28px;font-size:1.3rem}
@media(max-width:480px) {.auth-shell {padding-top:18px}.auth-nav {gap:14px}.auth-navlinks {gap:14px}.account-surface {padding:27px 22px}dialog.account-surface [data-account-content] {padding:19px 14px}.auth-nav {margin-bottom:24px}}

.account-surface button[type=submit] > svg {width:16px;height:16px;flex:none}
