.login{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;background:var(--admin-container-bg-color,var(--bg-color))}
.login-title{font-size:2rem;margin-bottom:15px;color:var(--login-title-color);font-family:Noto Sans SC,sans-serif;cursor:pointer;transition:all .3s ease}
@media (max-width:768px){.login-title{font-size:1.5rem}}
.login-title:focus,.login-title:hover{transform:translateY(-2px);text-shadow:0 0 10px var(--login-title-glow-color,rgba(52,152,219,.5))}
.login-container{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:40vw;border-radius:12px;box-shadow:var(--login-container-box-shadow);background-color:var(--login-container-bg-color);backdrop-filter:blur(8px);transition:all .3s ease}
@media (max-width:768px){.login-container{width:80vw}}
.login-container:hover{box-shadow:var(--login-container-hover-box-shadow);transform:translateY(-5px)}
.input-container{display:flex;align-items:center;width:35vw;margin-bottom:25px;position:relative;gap:15px}
@media (max-width:768px){.input-container{width:75vw;gap:10px}}
.input-wrapper{position:relative;flex:1;display:flex;flex-direction:column;transition:all .3s cubic-bezier(.4,0,.2,1)}
.input-name{font-size:0.9rem;font-weight:600;color:var(--login-title-color);text-align:right;width:80px;min-width:60px;transition:all .3s ease;letter-spacing:.5px;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;height:50px}
.input-name:before{content:"";position:absolute;right:0;bottom:0px;width:0;height:2px;background:linear-gradient(90deg,var(--login-input-underline-color,#5b9bd3),var(--login-input-underline-secondary-color,#7ba9d8));transition:width .3s ease}
.input-container:has(.input-wrapper.focused) .input-name:before,
.input-container:hover .input-name:before{width:var(--underline-width,50px)}
.input-container:has(.input-wrapper.focused) .input-name,
.input-container:hover .input-name{color:var(--login-input-label-focus-color,#5b9bd3);transform:translateX(-3px)}
.input-underline{position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--login-input-underline-color,#5b9bd3),var(--login-input-underline-secondary-color,#7ba9d8));transition:width .3s cubic-bezier(.4,0,.2,1);z-index:2}
.input-wrapper.focused .input-underline{width:90%}
@media (max-width:768px){.input-name{font-size:.9rem;width:60px;min-width:50px;height:45px}.input-wrapper.focused .input-underline{width:95%}}
.submit{margin-bottom:10px;width:40%;height:15%;border-radius:12px;background-color:var(--login-submit-btn-bg-color);transition:all .3s ease;border:none}
.submit:focus,.submit:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.password-input{width:90%;height:50px;position:relative;margin-bottom:4px}
.password-input .el-input__wrapper{border-radius:12px;background-color:var(--password-input-bg-color);border:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:12px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.password-input .el-input__wrapper:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s}
.password-input .el-input__wrapper:hover:before{left:100%}
.password-input .el-input__wrapper:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15);border-color:var(--login-input-underline-color,#5b9bd3)}
.password-input .el-input__wrapper:focus-within{border-color:var(--login-input-underline-color,#5b9bd3);box-shadow:0 0 0 3px rgba(91,155,211,.1);transform:translateY(-1px)}
.password-input .el-input__inner{color:var(--text-color,var(--login-input-text-color,#333));font-size:1rem;font-weight:500;background:transparent;border:none;box-shadow:none}
.dark .password-input .el-input__inner,[data-theme=dark] .password-input .el-input__inner{color:var(--text-color,#fff)!important}
.password-input .el-input__inner::-moz-placeholder{color:var(--placeholder-color,var(--text-color-secondary,hsla(0,0%,59%,.8)));font-weight:400;-moz-transition:opacity .3s ease;transition:opacity .3s ease}
.password-input .el-input__inner::placeholder{color:var(--placeholder-color,var(--text-color-secondary,hsla(0,0%,59%,.8)));font-weight:400;transition:opacity .3s ease}
.password-input .el-input__wrapper:focus-within .el-input__inner::-moz-placeholder{opacity:.7}
.password-input .el-input__wrapper:focus-within .el-input__inner::placeholder{opacity:.7}
.password-input .el-input__suffix{color:var(--icon-color,#666)}
.password-input .el-input__suffix-inner{transition:color .3s ease}
.password-input .el-input__wrapper:hover .el-input__suffix-inner{color:var(--login-input-label-focus-color,#5b9bd3)}
@media (max-width:768px){.password-input{width:95%;height:45px}.password-input .el-input__wrapper{padding:10px 14px}}
.toggle-dark{position:fixed;top:30px;right:30px;border:none;transition:all .3s ease;background-color:var(--toolbar-button-bg-color);box-shadow:var(--toolbar-button-shadow);backdrop-filter:blur(10px);border-radius:12px}
.toggle-dark:hover{transform:scale(1.05);box-shadow:var(--toolbar-button-shadow-hover)}

.loading-mask{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:transparent;z-index:9999;justify-content:center;align-items:center;pointer-events:auto}
.loading-content{background-color:rgba(255,255,255,0.95);color:#3498db;padding:25px 40px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.15);text-align:center;display:flex;flex-direction:column;align-items:center;backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,0.05)}
.dark .loading-content,[data-theme=dark] .loading-content{background-color:rgba(30,30,30,0.9);color:rgb(91,155,211);box-shadow:0 8px 32px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1)}
.loader{width:40px;height:40px;border:4px solid rgba(91,155,211,0.2);border-top:4px solid currentColor;border-radius:50%;animation:spin 0.8s linear infinite}
.loading-text{margin-top:15px;font-size:1rem;font-weight:500;color:currentColor}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}