*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#050b0a;color-scheme:dark}
:root{
  --neon:#39ff6a;
  --neon-soft:#7CFF4A;
  --app-width:520px;
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:#050b0a;
  color:#f3f7f4;
  font-family:"Segoe UI",system-ui,sans-serif;
}
.app-shell{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  width:min(100%,var(--app-width));
  margin:auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 80px #000a;
}
.auth-bg{
  position:absolute;
  inset:0;
  background:
    #050b0a url("/assets/images/auth-footer-bg.png") center bottom / cover no-repeat;
  z-index:0;
}
.auth-veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,10,8,.88) 0%,rgba(3,10,8,.72) 28%,rgba(3,10,8,.42) 58%,rgba(3,10,8,.18) 78%,rgba(3,10,8,.35) 100%);
}
.auth-header,
.auth-card{
  position:relative;
  z-index:2;
}
.auth-header{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:calc(18px + env(safe-area-inset-top)) 18px 6px;
  text-align:center;
}
.brand-logo{
  display:block;
  width:auto;
  height:58px;
  max-width:210px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px #00ed7255);
}
.auth-tagline{
  margin:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#dce8e1;
}
.auth-tagline strong{
  color:var(--neon);
  font-weight:800;
}
.auth-card{
  flex:1;
  width:100%;
  padding:14px 18px calc(22px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:28px;
}
.auth-tabs button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(8,18,14,.55);
  color:#a8bdb2;
  font:800 13px inherit;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.2s ease;
}
.auth-tabs button svg{
  width:16px;
  height:16px;
  fill:currentColor;
}
.auth-tabs button.is-active{
  border:1px solid #0351056e;
  background:linear-gradient(180deg,#55ff8252,#00e86b47);
  color:#f5faf7;
  font:800 14px "Segoe UI",sans-serif;
  box-shadow:0 0 22px #39ff6a44,0 8px 18px #0007;
}
.auth-tabs button:focus-visible,
.submit-button:focus-visible,
.toggle-password:focus-visible,
.terms a:focus-visible,
.terms-close:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:2px;
}
.auth-card input:focus,
.auth-card input:focus-visible{
  outline:none;
}
.auth-card h2{
  margin:0 0 6px;
  font:800 28px/1.15 "Segoe UI",sans-serif;
  letter-spacing:-.02em;
  color:#fff;
}
.auth-card h2 em{
  font-style:normal;
  color:var(--neon);
  text-shadow:0 0 18px #39ff6a55;
}
.subtitle{
  margin:0 0 22px;
  color:#a7b8af;
  font-size:13px;
  line-height:1.45;
}
.auth-card form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field>span:first-child{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c5d5cc;
}
.field-shell{
  position:relative;
  display:flex;
  align-items:center;
  min-height:52px;
  border:1px solid rgba(124,255,74,.42);
  border-radius:14px;
  background:rgba(6,16,12,.62);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field-shell:focus-within{
  border-color:rgba(57,255,106,.75);
  box-shadow:0 0 0 1px rgba(57,255,106,.2),inset 0 1px rgba(255,255,255,.04);
}
.field-shell>svg{
  flex:none;
  width:18px;
  height:18px;
  margin-left:14px;
  fill:#7d9588;
}
.field-shell input{
  flex:1;
  width:100%;
  min-width:0;
  height:52px;
  border:0;
  background:transparent;
  color:#f3f7f4;
  padding:0 14px;
  font:400 14px/1.2 inherit;
  outline:0;
}
.field-shell input::placeholder{color:#6a8075}
.toggle-password{
  flex:none;
  width:42px;
  height:42px;
  margin-right:4px;
  border:0;
  border-radius:10px;
  background:transparent center/18px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237d9588'%3E%3Cpath d='M12 5.25C7 5.25 2.85 8.4 1.5 12c1.35 3.6 5.5 6.75 10.5 6.75S21.15 15.6 22.5 12C21.15 8.4 17 5.25 12 5.25Zm0 11A4.25 4.25 0 1 1 16.25 12 4.25 4.25 0 0 1 12 16.25Zm0-6.75A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5Z'/%3E%3C/svg%3E");
  cursor:pointer;
}
.toggle-password.is-on{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2339ff6a'%3E%3Cpath d='M3.3 3.3a1 1 0 0 0-1.4 1.4l2.1 2.1C2.5 8.2 1.5 10 1.5 12c1.35 3.6 5.5 6.75 10.5 6.75a11 11 0 0 0 4.7-1l2.5 2.5a1 1 0 1 0 1.4-1.4Zm8.1 11.2a2.5 2.5 0 0 1-2.7-2.7l2.7 2.7Zm7.3-1.2c.5-.7.9-1.5 1.3-2.3-1.35-3.6-5.5-6.75-10.5-6.75a11 11 0 0 0-3.3.5l1.7 1.7a4.25 4.25 0 0 1 5.5 5.5l2.3 2.3a10 10 0 0 0 3.3-1Z'/%3E%3C/svg%3E");
}
.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field-grid .wide{grid-column:1/-1}
.submit-button{
  width:100%;
  min-height:54px;
  margin-top:4px;
  border:1px solid #0351056e;
  border-radius:14px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(180deg,#55ff8252,#105028);
  color:#f5faf7;
  font:800 14px "Segoe UI",sans-serif;
  cursor:pointer;
  box-shadow:0 0 28px #39ff6a55,0 12px 28px #0008;
}
.submit-button svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.submit-spinner{
  display:none;
  width:20px;
  height:20px;
  border:2px solid rgba(245,250,247,.25);
  border-top-color:#f5faf7;
  border-radius:50%;
  animation:submit-spin .7s linear infinite;
}
.submit-button.is-loading .submit-label{visibility:hidden}
.submit-button.is-loading .submit-spinner{
  display:block;
  position:absolute;
}
.submit-button{position:relative}
.submit-button:hover:not(:disabled){filter:brightness(1.05)}
.submit-button:disabled{opacity:.8;cursor:wait}
@keyframes submit-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .submit-spinner{animation:none;border-top-color:#f5faf7;opacity:.85}
}
.terms{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#9eb0a6;
  font-size:12px;
  line-height:1.45;
}
.terms input{margin-top:3px;accent-color:var(--neon)}
.terms a{color:var(--neon-soft);text-underline-offset:3px}
.form-message{
  min-height:18px;
  margin:0;
  color:#ff9b8d;
  text-align:center;
  font-size:12px;
  line-height:1.4;
}
.security-note{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#a7b8af;
  font-size:11px;
  line-height:1.35;
  text-align:left;
}
.security-note svg{
  flex:none;
  width:20px;
  height:20px;
  fill:var(--neon);
  filter:drop-shadow(0 0 8px #39ff6a66);
}
.invite-banner{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid rgba(57,255,106,.35);
  border-radius:12px;
  background:rgba(8,40,24,.55);
  color:#cfe8d5;
  font-size:12px;
  line-height:1.4;
}
.invite-banner strong{color:var(--neon)}
.invite-banner[hidden]{display:none}
.eyebrow{
  margin:0 0 10px;
  color:var(--neon);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.terms-modal{
  display:none;
  position:fixed;
  z-index:20;
  inset:0;
  place-items:center;
  padding:20px;
}
.terms-modal:target{display:grid}
.terms-backdrop{
  position:absolute;
  inset:0;
  background:#000b;
  backdrop-filter:blur(8px);
}
.terms-modal article{
  position:relative;
  width:min(100%,var(--app-width));
  padding:28px 22px;
  border:1px solid #28de7660;
  border-radius:18px;
  background:linear-gradient(145deg,#0a2b1c,#04120c);
  box-shadow:0 25px 80px #000;
}
.terms-modal article h2{
  margin:0 0 12px;
  font:800 22px "Segoe UI",sans-serif;
}
.terms-modal article>p:not(.eyebrow){
  color:#aabbb3;
  font-size:13px;
  line-height:1.65;
}
.terms-close{
  position:absolute;
  right:14px;
  top:8px;
  color:#fff;
  text-decoration:none;
  font-size:28px;
  line-height:1;
}
.auth-card [hidden]{display:none}
@media(max-width:430px){
  .auth-card h2{font-size:24px}
  .field-grid{grid-template-columns:1fr}
  .field-grid .wide{grid-column:auto}
  .brand-logo{height:50px;max-width:180px}
}