body { background:var(--sys-bg-app); color:var(--sys-text); font-size:0.8rem; font-weight:400; }
textarea {color:var(--sys-text);}
input {color:var(--sys-text);}
textarea:placeholder-shown {color:var(--sys-text-muted);}
input:placeholder-shown {color:var(--sys-text-muted);}
#particle { position:relative; display:block; width:100vw;height:100vh; overflow:hidden; }
#particle canvas { position:absolute; z-index:1; }
.main { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; overflow:hidden; transition:.4s; }

.login { position:absolute; z-index:1; width:420px; max-width:calc(100vw - 24px); height:auto; top:50%; left:50%; transform: translate(-50%, -50%); overflow:visible; }
.loginForm { position:relative; width:100%; height:100%; }
.loginForm .line { position:absolute; display:block; background:var(--sys-accent-secondary); transition:.3s; opacity:.3; }
.loginForm .line:nth-child(1) { top:0; left:0; width:0; height:1px; }
.loginForm .line:nth-child(2) { top:0; right:0; width:1px; height:0; }
.loginForm .line:nth-child(3) { bottom:0; left:0; width:0; height:1px; }
.loginForm .line:nth-child(4) { bottom:0; top:0; width:1px; height:0; }
.loginStab { width:100%; height:auto; padding:3vh; background:rgba(80,80,80,0.2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(10px); border:1px solid var(--sys-border-soft); text-align:center; opacity:0; }
.loginLogo { position:relative; margin:0 auto 2vh auto; width:fit-content; }
.loginLogo span { position:absolute; z-index:2; bottom:25px; left:94px; font-size:70%; color:var(--sys-accent-secondary); }
.loginShow { animation: loginComes 1s linear; animation-fill-mode: forwards; }
@keyframes loginComes { 0% { opacity:0; } 100% { opacity:1; } }
.loginGone { animation: loginGones .6s linear; animation-fill-mode: forwards; }
@keyframes loginGones { 0% { opacity:1; } 100% { opacity:0; } }
.loginStab input { width:80%; height:34px; margin:0 auto 1.5vh auto; background-color:transparent; text-align:center; border:1px solid var(--sys-border-soft); padding:0 .5vw; outline:none; transition:.4s; }
.loginStab input:focus { border:1px solid var(--sys-border); }
.loginStab input[type=button] { border:0; background:var(--sys-accent-secondary); color:#fff; }
.loginStab input[type=button]:hover { background:var(--sys-accent-secondary-hover); }
.loginStab input:-webkit-autofill,
.loginStab input:-webkit-autofill:hover,
.loginStab input:-webkit-autofill:focus,
.loginStab input:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--sys-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.loginNote {
    width:80%;
    margin:0 auto 1.5vh auto;
    color:var(--sys-text-muted);
    font-size:76%;
    line-height:1.55;
}

.loginStt {
    min-height:22px;
    width:80%;
    margin:0 auto 1.2vh auto;
    font-size:94%;
    line-height:1.45;
}

.loginForgotBox { display:none; }
.loginForgotBoxOpen { display:block; }

.loginBottom {
    width:80%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.loginLinkBtn {
    color:var(--sys-accent-secondary);
    cursor:pointer;
    font-size:89%;
    transition:.2s;
    white-space:nowrap;
}

.loginLinkBtn:hover { color:var(--sys-accent-secondary-hover); }

.loginLangs { display:flex; align-items:center; justify-content:flex-end; }

.loginLangSelect {
    min-width:68px;
    height:26px;
    border:1px solid var(--sys-border-soft);
    background:rgba(18,18,18,.7);
    color:var(--sys-accent-secondary-hover);
    font-size:82%;
    font-weight:700;
    letter-spacing:.05em;
    padding:0 8px;
    text-align:center;
    transition:.2s;
}

.loginLangSelect:focus {
    border-color:var(--sys-accent-secondary);
    box-shadow:inset 0 0 0 1px rgba(158,132,115,.18);
}

:root[data-theme="light"] body {
    background:var(--sys-bg-shell);
    color:var(--sys-text);
}

:root[data-theme="light"] .loginStab {
    background:rgba(255,255,255,.72);
    border-color:var(--sys-border-soft);
    box-shadow:0 18px 48px var(--sys-shadow);
}

:root[data-theme="light"] .loginForm .line {
    background:var(--sys-accent-secondary-hover);
    opacity:.55;
}

:root[data-theme="light"] .loginLogo span,
:root[data-theme="light"] .loginLinkBtn {
    color:var(--sys-accent-secondary);
}

:root[data-theme="light"] .loginLinkBtn:hover {
    color:var(--sys-accent-secondary-hover);
}

:root[data-theme="light"] .loginStab input {
    background:rgba(255,255,255,.72);
    border-color:var(--sys-border);
    color:var(--sys-text);
}

:root[data-theme="light"] .loginStab input:focus {
    border-color:var(--sys-accent-secondary);
    box-shadow:inset 0 0 0 1px rgba(158,132,115,.16);
}

:root[data-theme="light"] .loginStab input::placeholder {
    color:var(--sys-text-muted);
}

:root[data-theme="light"] .loginStab input[type=button] {
    background:var(--sys-accent-secondary);
    color:#fff;
}

:root[data-theme="light"] .loginStab input[type=button]:hover {
    background:var(--sys-accent-secondary-hover);
}

:root[data-theme="light"] .loginStab input:-webkit-autofill,
:root[data-theme="light"] .loginStab input:-webkit-autofill:hover,
:root[data-theme="light"] .loginStab input:-webkit-autofill:focus,
:root[data-theme="light"] .loginStab input:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px rgba(255,255,255,.92) inset !important;
    -webkit-text-fill-color: var(--sys-text) !important;
}

:root[data-theme="light"] .loginNote,
:root[data-theme="light"] .loginStt {
    color:var(--sys-text-muted);
}

:root[data-theme="light"] .loginLangSelect {
    background:rgba(255,255,255,.88);
    border-color:var(--sys-border);
    color:var(--sys-accent-secondary);
}

:root[data-theme="light"] .loginLangSelect:focus {
    border-color:var(--sys-accent-secondary);
    box-shadow:inset 0 0 0 1px rgba(158,132,115,.16);
}

.loginResetMode .loginLogo,
.loginForgotMode .loginLogo {
    margin-bottom:1.4vh;
}

.loginResetMode .loginNote,
.loginForgotMode .loginNote {
    margin-bottom:1.6vh;
}

@media (max-width: 520px) {
    .login {
        width:calc(100vw - 16px);
    }

    .loginStab {
        padding:16px 14px;
    }

    .loginStab input,
    .loginNote,
    .loginStt,
    .loginBottom {
        width:100%;
    }

    .loginBottom {
        flex-wrap:wrap;
        row-gap:8px;
    }
}