:root {
    --btn: #726AE3 ;
}

.containerlo {
    width: 100%;
    max-width: 400px;
    margin: -50px auto;
    background-color: var(--white);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.tab {
    display: flex;
    margin-bottom: 20px;
}
.tab button {
    color:black;
    flex: 1;
    padding: 10px;
    border: none;
    background-color: inherit;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
.tab button.active {
    background-color: var(--btn);
    color: var(--white);
}
input[type="text"], [type="url"], input[type="password"], input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid var(--gray);
    box-sizing: border-box;
}
button {
    background-color: var(--btn);
    color: var(--white);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    opacity: 0.8;
}
.form-container {
    display: none;
    padding: 20px;
}
.form-container.active {
    display: block;
}