/* Apex VCards sign in / sign up — builds on apex.css */
body.auth{min-height:100svh;display:flex;flex-direction:column}
.auth-main{position:relative;z-index:1;flex:1;overflow-x:clip;display:flex;align-items:center;padding:120px 0 60px}
.auth-grid{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(28px,6vw,80px);align-items:center;width:100%}

/* left: the card in a pool of laser light */
.auth-side{position:relative;display:grid;gap:34px;justify-items:center;min-width:0}
.auth-light{position:absolute;left:50%;top:38%;width:min(120%,760px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:0;
  background:
    conic-gradient(from 0deg,transparent 0 6%,rgba(54,214,255,.10) 7%,transparent 9% 22%,rgba(120,160,255,.08) 23%,transparent 25% 41%,rgba(54,214,255,.09) 42%,transparent 44% 58%,rgba(155,108,255,.08) 59%,transparent 61% 77%,rgba(54,214,255,.08) 78%,transparent 80%),
    radial-gradient(closest-side,rgba(110,200,255,.35),rgba(47,123,255,.12) 45%,transparent 70%);
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);
  animation:spin 60s linear infinite}
@keyframes spin{to{rotate:360deg}}
.auth-card{position:relative;z-index:1;width:min(100%,460px);animation:hover 8s ease-in-out infinite}
.auth-card img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) drop-shadow(0 0 36px rgba(80,140,255,.35))}
.auth-points{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15.5px;color:var(--ink-2)}
.auth-points li{display:flex;gap:12px;align-items:center}
.auth-points span{flex:none;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

/* right: glass form */
.auth-panel{padding:clamp(24px,4vw,44px);display:grid;gap:22px;min-width:0}
.auth-panel h1{font-size:clamp(26px,3vw,36px)}
.auth-panel .sub{color:var(--ink-2);margin-top:-8px}
.plan-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(100deg,rgba(47,123,255,.18),rgba(155,108,255,.14));box-shadow:inset 0 0 0 1px rgba(54,214,255,.35)}
.plan-chip b{font-family:var(--f-display);font-weight:400;letter-spacing:.03em}
.plan-chip small{color:var(--ink-2)}
.plan-chip a{font-size:13px;color:var(--cyan);text-decoration:none;white-space:nowrap}
.auth-form{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.field{display:grid;gap:7px;min-width:0}
.field label{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:baseline;gap:4px}
.field label .opt{margin-left:auto}
.field label .opt{font-weight:400;color:var(--ink-3);font-size:12.5px}
.field label .req{color:var(--cyan)}
.input{position:relative}
.input input{width:100%;font:500 15.5px var(--f-body);color:var(--ink);background:rgba(8,16,40,.6);border:0;border-radius:12px;padding:14px 16px;outline:none;
  box-shadow:inset 0 0 0 1px rgba(120,190,255,.22);transition:box-shadow .2s,background .2s}
.input input::placeholder{color:var(--ink-3)}
.input input:hover{box-shadow:inset 0 0 0 1px rgba(120,190,255,.38)}
.input input:focus{background:rgba(10,22,56,.75);box-shadow:inset 0 0 0 1px rgba(54,214,255,.85),0 0 0 4px rgba(54,214,255,.14),0 0 24px -6px rgba(54,214,255,.6)}
.input input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px rgba(255,107,138,.8)}
.input .peek{position:absolute;right:8px;top:50%;translate:0 -50%;font:600 12.5px var(--f-body);color:var(--cyan);background:none;border:0;padding:6px 8px;cursor:pointer;border-radius:8px}
.input .peek:hover{background:rgba(54,214,255,.1)}
.has-peek input{padding-right:64px}
.err{color:#ff8fa8;font-size:13px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.check input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:#36d6ff}
.check a{color:var(--cyan)}
.auth-form .btn{width:100%;padding:15px 22px;font-size:16px;margin-top:4px}
.or{display:flex;align-items:center;gap:14px;color:var(--ink-3);font-size:12.5px;font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(120,190,255,.18)}
.btn.google{width:100%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.btn.google:hover{background:rgba(255,255,255,.12)}
.swap{text-align:center;color:var(--ink-2);font-size:14.5px}
.swap a{color:var(--cyan);font-weight:600;text-decoration:none}
.links{display:flex;justify-content:flex-end;font-size:13.5px;margin-top:-6px}
.links a{color:var(--cyan);text-decoration:none}
.note{padding:12px 16px;border-radius:12px;font-size:14px}
.note.ok{background:rgba(31,180,120,.14);box-shadow:inset 0 0 0 1px rgba(60,220,150,.4);color:#bff5dc}
.note.bad{background:rgba(255,80,120,.12);box-shadow:inset 0 0 0 1px rgba(255,107,138,.45);color:#ffd0db}
.auth-panel .g-recaptcha{transform-origin:left top}

@media (max-width:980px){
  .auth-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .auth-side{order:2}
  .auth-card{width:min(80%,360px)}
  .auth-main{padding-top:100px}
}
@media (max-width:420px){.auth-panel .g-recaptcha{transform:scale(.88)}}

/* the home page light field, burst behind the card */
.auth-field{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.auth-veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(270deg,rgba(3,5,13,.75) 0%,rgba(3,5,13,.2) 50%,transparent 75%)}
@media (max-width:980px){.auth-veil{background:rgba(3,5,13,.55)}}
.auth-points li{text-shadow:0 1px 12px rgba(3,5,13,.9)}