:root {
    --primary-color: #2563EB;
    --secondary-color: #6C5CE7;
    --text-color: #333;
    --foot-color: #333;
    --border-color: #E0E0E0;
    --bg-color: #FAFAFA;
    --card-bg: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #2563EB;
        --secondary-color: #8A4EFF;
        --text-color: #E6E6E6;
        --foot-color: #9a9898;
        --border-color: #444;
        --bg-color: rgba(0, 0, 0, 1);
        --card-bg: rgba(255, 255, 255, .1);
    }

    .illustration {
        background: rgba(255, 255, 255, .03);
    }
}

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui;
    transition: background-color 0.3s, color 0.3s;
}

body {
    font-family: 'Segoe UI', sans-serif;
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

a:link {
    text-decoration: none; /* 未访问的链接 */
}

a:visited {
    text-decoration: none dotted; /* 已访问的链接 */
}

.container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    padding: 2rem;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 8rem;
}

/* 电脑模式样式 */
.login-card {
    display: flex;
    background: var(--card-bg);
    max-width: 720px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, .02), 0 12px 36px rgba(0, 0, 0, .06);
    flex-direction: row;
    align-items: center;
    margin: 0 auto;
}

.branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.illustration {
    margin: 0 0 3rem 3rem;
    background: rgba(0, 0, 0, 0);
    border: 0 solid #ddd;
}

.brand-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: "微软雅黑", ui-serif;
}

.icon-dolphin {
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg x="1747645956945" class="icon login-logo" viewBox="0 0 1365 1024" xmlns="http://www.w3.org/2000/svg" width="42" height="42"><path d="M1256.379733 390.485333a68.266667 68.266667 0 0 1 67.9936 74.069334l-41.5744 486.468266a68.266667 68.266667 0 0 1-67.9936 62.395734h-118.5792a68.266667 68.266667 0 0 1-67.9936-74.069334l41.5744-486.4a68.266667 68.266667 0 0 1 67.9936-62.464h118.5792zM649.762133 75.3664a136.533333 136.533333 0 0 1 132.027734 101.512533l199.202133 750.728534a68.266667 68.266667 0 0 1-65.9456 85.742933h-119.944533a68.266667 68.266667 0 0 1-66.218667-51.6096L572.074667 337.578667 353.0752 777.557333H518.144a68.266667 68.266667 0 0 1 60.074667 100.625067l-53.384534 99.259733a68.266667 68.266667 0 0 1-60.074666 35.908267H74.9568a68.266667 68.266667 0 0 1-61.576533-97.757867L379.221333 152.849067a136.533333 136.533333 0 0 1 123.0848-77.482667h147.456z m564.155734-17.681067a133.12 133.12 0 1 1 0 266.24 133.12 133.12 0 0 1 0-266.24z" fill="#1296db"></path></svg>');
    background-size: contain;
}

.input-group {
    position: relative;
    margin-bottom: 2rem;
}

.input-field {
    width: 100%;
    padding: 10px 14px 10px 42px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s !important;
    color: var(--text-color) !important;
    background-color: transparent !important;
}

.input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 54%;
    transform: translateY(-50%);
    color: #898787;
}

.toggle-visibility {
    position: absolute;
    right: 15px;
    top: 54%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #898787;
}

.policy-text {
    text-align: center;
    color: #666;
    margin: 1.5rem 0;
    font-size: 12px;
}

.policy-text a {
    color: var(--text-color);
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.primary-btn {
    width: 100%;
    padding: 12px 14px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
}

.primary-btn:hover {
    transform: translateY(-2px);
}

.links {
    display: flex        ;
    justify-content: center;
    margin-top: 2rem;
    font-size: 12px;
}

.links a {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 20px;
}

.login-logo {
    padding-top: 12px;
}

.login-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    padding-bottom: 20px;
    font-size: 14px;
    color: var(--text-color);
}

.policy-text a {
    color: var(--foot-color);
}

.login-footer a {
    color: var(--foot-color);
}

.wechat-description {
    font-size: 14px;
    color: var(--text-color);
    padding: 1.5rem 1rem 0 1.1rem;
}

.wechat-description .wechat-logo {
    color: #07c160;
    float: left;
}
.wechat-qrcode{
    border: 1px solid var(--border-color);
}
.other-login {
    display: none;
}
/* 手机模式样式 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 4rem;
        margin-bottom: 1rem;
    }

    .illustration {
        display: none;
    }

    .login-card {
        width: 100%;
        padding: 1.5rem;
    }

    .branding {
        flex-direction: column;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .icon-dolphin {
        margin-top: 0.5rem;
    }

    .links {
        gap: 2.5rem;
    }

    .links a {
        width: 50%;
        text-align: center;
        color: var(--text-color);
    }
    .other-login {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 4.5rem;
    }
    .other-login .other-tip {
        font-size: 1rem;
        color: var(--border-color);
        margin: 1rem 0 0.5rem 0;
    }
    .other-login .wx-login {
        width: 3.2rem;
        height: 3.2rem;
        background: url(data:image/png;base64,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) no-repeat;
        background-size: 3.2rem 3.2rem;
    }
}