/* Shared tokens and parts for the sign-in and practice pages.
   Same world as the landing page: night navy, sky signal, hairline HUD frames. */
:root{
  --ink:#041A3D; --deep:#020B1F; --panel:#061733; --panel-2:#0A2147; --navy:#0A3F85; --blue:#0A4A9E;
  --sky:#2FA8FF; --sky-hi:#5CBEFF; --mist:#F2F8FF; --line:#D3E4F6;
  --on-dark:#C4D8EF; --on-dark-2:#9FBBDB; --on-dark-3:#7D9CC2;
  --edge:rgba(92,190,255,.16); --edge-hi:rgba(92,190,255,.42);
  --ok:#58e0a5; --warn:#FFB86B; --err:#FF8A8A;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 .5H.5V56' fill='none' stroke='%232FA8FF' stroke-opacity='.11'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--navy) var(--deep)}
body{margin:0;font-family:var(--sans);background:var(--deep);color:var(--on-dark);line-height:1.55;caret-color:var(--sky);-webkit-font-smoothing:antialiased}
::selection{background:var(--sky);color:var(--deep)}
a{color:var(--sky-hi);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:#fff;text-wrap:balance}
button{font:inherit}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* brand */
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.02em}
.brand img{width:32px;height:32px;border-radius:8px;object-fit:cover;border:1px solid var(--edge-hi)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px 0 26px;background:var(--sky);color:var(--deep);font:600 16px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;border-radius:8px;border:0;cursor:pointer;
  transition:background-color .2s ease,box-shadow .35s ease,transform .2s var(--ease);box-shadow:0 14px 34px -14px rgba(47,168,255,.75)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{background:var(--sky-hi)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover svg{transform:none}
.btn.ghost{background:transparent;color:var(--on-dark);border:1px solid var(--edge-hi);box-shadow:none;min-height:38px;padding:0 14px;font-size:14px;font-weight:500}
.btn.ghost:hover{background:rgba(92,190,255,.08);color:#fff}

/* spinner used in loading states */
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* HUD corner brackets */
.hud{position:relative}
.hud>.br{position:absolute;width:14px;height:14px;border:0 solid var(--sky);pointer-events:none;z-index:2}
.hud>.br.tl{top:-7px;left:-7px;border-top-width:1.5px;border-left-width:1.5px}
.hud>.br.tr{top:-7px;right:-7px;border-top-width:1.5px;border-right-width:1.5px}
.hud>.br.bl{bottom:-7px;left:-7px;border-bottom-width:1.5px;border-left-width:1.5px}
.hud>.br.brr{bottom:-7px;right:-7px;border-bottom-width:1.5px;border-right-width:1.5px}

/* form fields */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:500;color:#EAF3FF}
.field .hint{font-size:13px;color:var(--on-dark-2)}
.input{width:100%;min-height:52px;padding:0 16px;background:var(--deep);border:1px solid var(--edge-hi);border-radius:8px;color:#fff;font:400 16px/1.2 var(--sans);transition:border-color .2s ease,box-shadow .2s ease}
.input::placeholder{color:var(--on-dark-3)}
.input:hover{border-color:rgba(92,190,255,.6)}
.input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(47,168,255,.22)}
.input[aria-invalid="true"]{border-color:var(--err)}
.input.code{font-family:var(--mono);font-size:18px;letter-spacing:.18em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}