#registerOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:1002}
#registerOverlay.show{display:flex}
#registerOverlay .modal-box{background:#fff;color:#000;padding:1rem;border-radius:4px;width:90%;max-width:420px;text-align:center;position:relative;overflow:hidden}
body.dark #registerOverlay .modal-box{background:#1e1e2f;color:#fff}
#registerOverlay input[type=text],
#registerOverlay input[type=email],
#registerOverlay input[type=password]{
  width:100%;
  margin:0.5rem 0;
  padding:0.75rem 1rem;
  border:1px solid #bbb;
  border-radius:6px;
  font-size:1rem;
  transition:border-color .3s,box-shadow .3s;
}
#registerOverlay input[type=text]:focus,
#registerOverlay input[type=email]:focus,
#registerOverlay input[type=password]:focus{
  border-color:#D6B55D;
  box-shadow:0 0 0 3px rgba(214,181,93,0.2);
  outline:none;
}
#registerOverlay label a{color:#D6B55D;text-decoration:none}
#registerOverlay label a:hover{text-decoration:underline}
#registerOverlay .get-started-btn{margin-top:0.5rem;width:100%}
#registerOverlay .close-register{position:absolute;top:8px;right:12px;font-size:1.5rem;cursor:pointer}
#registerOverlay .error{color:#e74c3c;font-size:0.8rem}

#registerOverlay .form-slider{display:flex;width:200%;transition:transform 0.3s ease}
#registerOverlay .form-panel{width:50%;box-sizing:border-box;padding:0 1rem}
#registerOverlay.show-login .form-slider{transform:translateX(-50%)}
#registerOverlay .switch-text{margin-top:0.5rem;font-size:0.85rem}
#registerOverlay .switch-text a{color:#D6B55D;text-decoration:none}
#registerOverlay .switch-text a:hover{text-decoration:underline}
@media(max-width:480px){
  #registerOverlay .modal-box{width:95%;padding:1rem}
  #registerOverlay .switch-text{font-size:1rem}
}