.authCard{
    width:430px;
    padding:38px;
    background:#fffdf8;
    border:4px solid #6b58b8;
    border-radius:18px;
    box-shadow:
        8px 8px 0 #6b58b8,
        0 8px 30px rgba(0,0,0,.18);
    transform:rotate(-1deg);
}

h1{

margin-top:0;
font-size:46px;

}

.subtitle{
opacity:.8;
margin-bottom:30px;

}

.tabs{
display:flex;
gap:10px;
margin-bottom:20px;

}

.tab{
flex:1;
padding:12px;
background:#30244d;
border:none;
color:white;
border-radius:12px;
cursor:pointer;

}

.active{
background:#8a5cff;

}

input{
    width:100%;
    padding:14px;
    margin-bottom:14px;
    background:white;
    border:3px solid #6b58b8;
    border-radius:12px;
    outline:none;
    box-sizing:border-box;
    font-size:16px;
}

#authButton{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background:#ffd56a;
    color:#4b347c;
    font-weight:bold;
    font-size:18px;
    cursor:pointer;
    transition:.15s;
}

#authButton:hover{
    transform:rotate(-1deg) scale(1.02);

}

#switchText{
margin-top:20px;
text-align:center;

}

#switchMode{
color:#65d8ff;
cursor:pointer;

}

#status{
margin-top:20px;
text-align:center;
color:#ffd65a;

}

#authLoadingScreen {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #fffdf6;
    background-image: url("../bg/paper.png");
    background-repeat: repeat;
    color: #30254f;
    opacity: 1;
    transition:
        opacity 0.2s ease;
}

html[data-ruckuz-theme="dark"]
#authLoadingScreen {
    background-color: #151222;
    background-image: url("../bg/darknote.png");
    color: #f5f0ff;
}

#authLoadingScreen.leaving {
    opacity: 0;
    pointer-events: none;
}

#authLoadingCard {
    width: 260px;
    padding: 20px;
    box-sizing: border-box;
    border: 4px solid #6b58b8;
    background: #fffdf6;
    box-shadow:
        7px 7px 0 #6b58b8;
    transform:
        rotate(-0.4deg);
}

html[data-ruckuz-theme="dark"]
#authLoadingCard {
    background: #242038;
    border-color: #8b6cff;
    box-shadow:
        7px 7px 0 #8b6cff;
}

#authLoadingTitle {
    margin-bottom: 15px;
    color: #6b58b8;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

html[data-ruckuz-theme="dark"]
#authLoadingTitle {
    color: #b79cff;
}

#authLoadingRow {
    display: flex;
    align-items: center;
    gap: 12px;
}

#authLoadingSpinner {
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    box-sizing: border-box;
    border:
        3px solid #c7b8ed;
    border-top-color:
        #6b58b8;
    border-radius: 2px;
    animation:
        authLoadingSpin
        0.75s
        linear
        infinite;
}

html[data-ruckuz-theme="dark"]
#authLoadingSpinner {
    border-color: #514875;
    border-top-color:
        #b79cff;
}

#authLoadingText {
    font-size: 15px;
    color: #625b70;
}

html[data-ruckuz-theme="dark"]
#authLoadingText {
    color: #d1c8e8;
}

@keyframes authLoadingSpin {

    to {
        transform:
            rotate(360deg);
    }

}

html.authBooting #app {
    visibility: hidden;
}

@media (max-width: 768px) {
    #authLoadingCard {
        width:
            min(
                270px,
                calc(100vw - 40px)
            );
        padding: 18px;
        transform: none;
    }
}