/* Shared dark "viscous particle" surface for login / invite / 403 / 404.
   Pairs with public/js/parallax-bg.js (canvas#px-bg). */
:root{
  --px-teal:#8fefd6; --px-orange:#e29344; --px-ink:#eef7f3;
  --px-ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body.px-body{
  margin:0; min-height:100vh; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 18%, #0a2722 0%, #061511 55%, #03100d 100%);
  color:var(--px-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:grid; place-items:center; -webkit-font-smoothing:antialiased;
}
#px-bg{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none;
  opacity:0; animation:px-fade 1.4s var(--px-ease) .1s forwards;
}
@keyframes px-fade{ to{opacity:1} }

.px-card{ position:relative; z-index:2; width:340px; max-width:90vw; text-align:center;
          animation:px-rise .7s var(--px-ease) .1s both; }
@keyframes px-rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.px-mark{ display:flex; justify-content:center; margin-bottom:30px; }
.px-mark svg{ width:42px; height:42px; color:var(--px-teal); opacity:.92; }
.px-wordmark{ margin:14px 0 40px; font-size:11px; letter-spacing:.42em; text-transform:uppercase;
              color:rgba(238,247,243,.42); font-weight:500; padding-left:.42em; }

/* underline inputs */
.px-field{ position:relative; margin:0 0 22px; text-align:left; }
.px-field input{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(143,239,214,.22);
  padding:11px 2px; color:var(--px-ink); font-size:15px; letter-spacing:.04em;
  outline:none; transition:border-color .25s var(--px-ease); caret-color:var(--px-orange);
}
.px-field input::placeholder{ letter-spacing:.06em; transition:color .25s var(--px-ease); }
.px-field.u input::placeholder{ color:rgba(143,239,214,.40); }
.px-field.p input::placeholder{ color:rgba(226,147,68,.42); }
.px-field input:focus{ border-bottom-color:var(--px-orange); }
.px-field input:-webkit-autofill{ -webkit-text-fill-color:var(--px-ink); transition:background-color 9999s; }
.px-field-label{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
                 color:rgba(143,239,214,.5); margin-bottom:6px; }

.px-btn{
  width:100%; margin-top:10px; padding:11px; background:transparent;
  border:1px solid rgba(226,147,68,.5); border-radius:6px; color:var(--px-orange);
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; cursor:pointer;
  transition:background-color .2s var(--px-ease), color .2s var(--px-ease), border-color .2s var(--px-ease);
}
.px-btn:hover{ background:var(--px-orange); color:#0a1f1b; border-color:var(--px-orange); }
.px-btn:active{ transform:translateY(1px); }
.px-btn:focus-visible{ outline:2px solid rgba(226,147,68,.45); outline-offset:2px; }

.px-error{ margin:14px 0 4px; font-size:12.5px; color:#f0a886; }
.px-note{ margin-top:24px; font-size:12px; color:rgba(238,247,243,.42); line-height:1.6; }
.px-lead{ margin:0 0 18px; font-size:13.5px; color:rgba(238,247,243,.62); line-height:1.6; }

/* ── error (403 / 404) variant ── */
.px-code{ font-size:62px; font-weight:800; letter-spacing:-.02em; color:var(--px-teal); opacity:.92; line-height:1; }
.px-headline{ font-size:19px; font-weight:600; margin:10px 0 6px; color:var(--px-ink); }
.px-sub{ font-size:13.5px; color:rgba(238,247,243,.6); line-height:1.6; margin:0 0 4px; }
.px-detail code{ font-size:12px; color:rgba(143,239,214,.7); background:rgba(143,239,214,.07);
                 padding:2px 7px; border-radius:4px; }
.px-actions{ margin-top:22px; }
.px-actions a{ display:inline-block; padding:9px 20px; border:1px solid rgba(226,147,68,.5);
               border-radius:6px; color:var(--px-orange); text-decoration:none; font-size:12px;
               font-weight:600; letter-spacing:.18em; text-transform:uppercase;
               transition:background-color .2s var(--px-ease), color .2s var(--px-ease); }
.px-actions a:hover{ background:var(--px-orange); color:#0a1f1b; }
.px-foot{ margin-top:28px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,247,243,.3); }

@media (prefers-reduced-motion: reduce){
  #px-bg{ animation:px-fade 1ms linear forwards; }
  .px-card{ animation:none; }
}