.dj-auth-body{
  min-height:100vh;
  min-height:100dvh;
  background:#000;
}

.dj-auth-app{
  width:min(100%,var(--dj-maxw));
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  color:var(--dj-text);
  background:var(--dj-bg);
}

.dj-auth-topbar{
  height:calc(56px + var(--dj-safe-t));
  padding:var(--dj-safe-t) 16px 0;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
}

.dj-auth-back{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--dj-text);
}

.dj-auth-back .dj-icon{font-size:24px}
.dj-auth-back:active{opacity:.65}

.dj-auth-topbar-title{
  grid-column:2;
  text-align:center;
  font-size:15px;
  font-weight:650;
}

.dj-auth-content{
  width:100%;
  padding:clamp(34px,9vh,88px) 28px calc(34px + var(--dj-safe-b));
}

.dj-auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  font-weight:700;
}

.dj-auth-brand-main{
  font-family:var(--dj-font-num);
  font-size:24px;
  line-height:1;
  color:var(--dj-accent);
}

.dj-auth-brand-separator{
  width:22px;
  height:2px;
  background:var(--dj-cyan);
}

.dj-auth-brand-name{font-size:15px}

.dj-auth-heading{margin-top:38px}

.dj-auth-kicker{
  margin:0 0 8px;
  font-family:var(--dj-font-num);
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  color:var(--dj-cyan);
}

.dj-auth-heading h1{
  margin:0;
  font-size:30px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:0;
}

.dj-auth-form{
  display:grid;
  gap:22px;
  margin-top:42px;
}

.dj-auth-field{
  display:grid;
  gap:9px;
}

.dj-auth-label{
  font-size:13px;
  color:var(--dj-text-sub);
}

.dj-auth-field input{
  width:100%;
  height:50px;
  padding:0 15px;
  border:1px solid var(--dj-line);
  border-radius:var(--dj-radius-sm);
  outline:0;
  color:var(--dj-text);
  caret-color:var(--dj-accent);
  background:var(--dj-card);
  transition:border-color .18s var(--dj-ease),background .18s var(--dj-ease);
}

.dj-auth-field input::placeholder{color:var(--dj-text-weak)}
.dj-auth-field input:focus{border-color:var(--dj-accent);background:var(--dj-card-2)}

.dj-auth-password-wrap{position:relative;display:block}
.dj-auth-password-wrap input{padding-right:52px}

.dj-auth-password-toggle{
  position:absolute;
  top:5px;
  right:4px;
  width:42px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--dj-text-sub);
}

.dj-auth-password-toggle .dj-icon{font-size:21px}
.dj-auth-password-toggle[aria-pressed="true"]{color:var(--dj-cyan)}

.dj-auth-invite{margin-top:-4px}
.dj-auth-invite summary{
  width:max-content;
  color:var(--dj-text-sub);
  font-size:13px;
  cursor:pointer;
}
.dj-auth-invite summary::marker{color:var(--dj-cyan)}
.dj-auth-invite-field{margin-top:18px}

.dj-auth-error{
  display:none;
  min-height:20px;
  margin:-6px 0 -2px;
  color:#FF718F;
  font-size:13px;
  line-height:1.5;
}

.dj-auth-error.is-visible{display:block}

.dj-auth-submit{
  width:100%;
  height:50px;
  border-radius:var(--dj-radius-sm);
  color:#fff;
  background:var(--dj-accent);
  font-size:15px;
  font-weight:700;
  transition:transform .14s var(--dj-ease),opacity .14s var(--dj-ease);
}

.dj-auth-submit:active{transform:scale(.985)}
.dj-auth-submit:disabled{cursor:wait;opacity:.58}

@media (min-width:600px){
  .dj-auth-content{padding-right:54px;padding-left:54px}
}

@media (prefers-reduced-motion:reduce){
  .dj-auth-field input,.dj-auth-submit{transition:none}
}

.dj-auth-modal{
  position:fixed;
  inset:0;
  z-index:72;
  display:grid;
  place-items:center;
  padding:16px;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s .2s;
}

.dj-auth-modal.is-open{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.dj-auth-modal-mask{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  opacity:0;
  transition:opacity .2s var(--dj-ease);
}

.dj-auth-modal.is-open .dj-auth-modal-mask{opacity:1}

.dj-auth-modal-panel{
  position:relative;
  width:min(100%,404px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:22px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:#17171C;
  box-shadow:0 24px 70px rgba(0,0,0,.62);
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .2s var(--dj-ease),transform .2s var(--dj-ease);
}

.dj-auth-modal.is-open .dj-auth-modal-panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.dj-auth-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.dj-auth-modal-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--dj-cyan);
  font-family:var(--dj-font-num);
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
}

.dj-auth-modal-head h2{
  margin:0;
  font-size:22px;
  line-height:1.25;
  letter-spacing:0;
}

.dj-auth-modal-close{
  flex:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--dj-text-sub);
}

.dj-auth-modal-close:active{background:rgba(255,255,255,.08)}
.dj-auth-modal-close .dj-icon{font-size:21px}
.dj-auth-modal-form{gap:16px;margin-top:26px}
.dj-auth-modal-form .dj-auth-error{margin:0}

.dj-auth-modal button:focus-visible,
.dj-auth-modal input:focus-visible,
.dj-auth-modal summary:focus-visible{outline:2px solid var(--dj-cyan);outline-offset:2px}

@media (max-height:620px){
  .dj-auth-modal{align-items:start;overflow-y:auto}
  .dj-auth-modal-panel{margin:auto 0;padding:18px}
  .dj-auth-modal-form{gap:12px;margin-top:18px}
}

@media (prefers-reduced-motion:reduce){
  .dj-auth-modal,.dj-auth-modal-mask,.dj-auth-modal-panel{transition-duration:.001ms}
}