@charset "UTF-8";

:root {
  color-scheme: dark;
  --canvas: #0c1115;
  --ink: #f6f7f2;
  --accent: #d2fa45;
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; position: relative; isolation: isolate; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; z-index: 0; pointer-events: none; inset: 0; background: url("/_auth/assets/racing-hero.jpg") 42% center / cover no-repeat; }
body::after { content: ""; position: fixed; z-index: 1; pointer-events: none; inset: 0; background: linear-gradient(90deg, #080d1438, #080d1408 37%, #090f16a8 71%, #090f16eb), linear-gradient(180deg, #060c13bd 0%, #080e134a 34%, #090f1505 64%, #090e16e8 100%); }
button, input { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.page-shell { position: relative; z-index: 2; width: min(1320px, calc(100% - 112px)); min-height: 100svh; margin-inline: auto; display: flex; flex-direction: column; }
.login-layout { display: flex; justify-content: flex-end; align-items: center; flex: 1; padding: 56px 0; }
.login-card { position: relative; width: 404px; max-width: 100%; padding: 32px 33px; border: 1px solid #b2cad324; border-top-color: #c2d1d63d; border-radius: 14px; background: #10191fe8; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 22px 75px #02060955, inset 0 1px 0 #ffffff04; }
.login-card:not(.logout-card) { width: 316px; }
.login-card::before { content: ""; position: absolute; width: 45px; height: 3px; left: 33px; top: -2px; background: var(--accent); }
.field { margin-bottom: 18px; }
.field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #9ab0bc33; border-radius: 6px; background: #080f1485; color: var(--ink); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.field input:hover { border-color: #9ab0bc70; }
.field input:focus { border-color: var(--accent); background: #0b1319; box-shadow: 0 0 0 3px #d2fa4514; }
.field input[aria-invalid="true"] { border-color: #e29581; }
.field input[aria-invalid="true"]:focus { border-color: #e29581; box-shadow: 0 0 0 3px #e295811a; }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 50px #18252c inset; -webkit-text-fill-color: #f6f7f2; caret-color: #f6f7f2; }
.submit-button { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: center; padding: 13px 16px; margin-top: 25px; border: 1px solid #d2fa45; border-radius: 6px; color: #17200b; background: var(--accent); box-shadow: 0 3px 14px #cafa450b; font-size: 12px; font-weight: 700; transition: background-color .15s, transform .15s, box-shadow .15s; }
.submit-button:hover { background: #e0ff72; box-shadow: 0 5px 20px #d2fa451f; }
.submit-button:active { transform: translateY(1px); }
.submit-button:disabled { cursor: wait; background: #bddc59; opacity: .8; }
.logout-card .submit-button { margin-top: 0; }
.sr-only { width: 1px; height: 1px; position: absolute; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .page-shell { width: calc(100% - 72px); }
  .login-card { width: 374px; padding-inline: 28px; }
  .login-card::before { left: 28px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .page-shell { width: calc(100% - 52px); }
  .login-card { width: 340px; }
}
@media (max-width: 760px) {
  body::before { position: absolute; height: 535px; bottom: auto; background-size: auto 535px; background-position: 27% top; }
  body::after { position: absolute; height: 550px; bottom: auto; background: linear-gradient(180deg, #070d17b8 0%, #070d1742 35%, #0c111515 60%, #0c1115 97%); }
  .page-shell { width: min(460px, calc(100% - 40px)); }
  .login-layout { align-items: flex-start; justify-content: center; padding: 400px 0 32px; }
  .login-card { width: 100%; padding: 27px; border-radius: 12px; background: #10191ff5; }
  .login-card::before { left: 27px; width: 37px; }
  .field input { height: 52px; font-size: 16px; }
  .submit-button { min-height: 52px; font-size: 13px; }
}
@media (max-width: 350px) {
  .page-shell { width: calc(100% - 28px); }
  .login-card { padding-inline: 21px; }
  .login-card::before { left: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}