* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
    background-color: #dcf2f0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.login-wrapper {
    width: 100%;
    max-width: 450px;
}
.login-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 45px 35px;
    position: relative;
    width: 100%;
}
.settings-icon {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 28px;
    height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}
.welcome-title {
    text-align: center;
    font-size: 30px;
    color: #666666;
    margin-bottom: 45px;
    font-weight: 500;
}
.input-group {
    position: relative;
    margin-bottom: 22px;
}
.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}
.user-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4s-4,1.79-4,4S9.79,12,12,12zM12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2 S10.9,6,12,6zM12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14zM2,18v-2c0-0.76,0.62-2.34,4-3.12V20H2V18zM20,20h-6v-1.12 c3.38,0.78,4,2.36,4,3.12V20z'/%3E%3C/svg%3E");
}
.lock-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v2H6C5.45,8,5,8.45,5,9v10c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1V9 C19,8.45,18.55,8,18,8zM12,3c1.66,0,3,1.34,3,3v2h-6V6C9,4.34,10.34,3,12,3zM18,19H6V9h12V19zM8,10v2h8v-2H8z'/%3E%3C/svg%3E");
}
.password-toggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12,7c2.76,0,5,2.24,5,5s-2.24,5-5,5s-5-2.24-5-5S9.24,7,12,7zM12,9c1.66,0,3,1.34,3,3s-1.34,3-3,3s-3-1.34-3-3 S10.9,9,12,9zM2,12c0,5.52,4.48,10,10,10c0.17,0,0.33,0,0.5-0.01L20.71,19.71c0.39,0.39,1.02,0.39,1.41,0c0.39-0.39,0.39-1.02,0-1.41 L3.71,2.71c-0.39-0.39-1.02-0.39-1.41,0s-0.39,1.02,0,1.41L11.49,12C11.33,12,11.17,12,11,12C5.48,12,2,16.48,2,12zM18.36,16.36 c-0.39,0.39-1.02,0.39-1.41,0l-1.59-1.59l-0.8,0.8c-0.39,0.39-1.02,0.39-1.41,0s-0.39-1.02,0-1.41l0.8-0.8l-0.98-0.98 c-0.39-0.39-0.39-1.02,0-1.41s1.02-0.39,1.41,0l1.59,1.59l0.8-0.8c0.39-0.39,1.02-0.39,1.41,0s0.39,1.02,0,1.41l-0.8,0.8l1.59,1.59 C18.75,15.34,18.75,16,18.36,16.36z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.login-input {
    width: 100%;
    height: 48px;
    padding: 0 45px 0 45px;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    font-size: 16px;
    color: #333;
    outline: none;
    background-color: #fafafa;
}
.login-input::placeholder {
    color: #999;
    font-size: 15px;
}
.login-input:focus {
    border-color: #b0b0b0;
    background-color: #fff;
}
.login-btn {
    width: 100%;
    height: 50px;
    background-color: #009688;
    border: none;
    border-radius: 25px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    transition: opacity 0.2s;
}
.login-btn:hover {
    opacity: 0.9;
}