:root {
    --wl-main-blue: #0F3460;
    --wl-blue-deep: #0b284b;
    --wl-blue-light: #174379;
    --wl-orange: #e67e22;
    --wl-text-dark: #1a2436;
    --wl-text-normal: #445064;
    --wl-border-line: #d1dbe8;
    --wl-white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", system-ui, sans-serif;
}

html, body {
    height: 100%;
    color:#1a2436;
    /* 全屏背景图 */
    background: url("/style/img/bg.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
    /* 全局全屏暗色蒙层 */
    body::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 40, 75, 0.55);
        z-index: 1;
        pointer-events: none;
    }

#form1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2; /*全部内容在蒙层上方*/
}

/* 头部背景透明，去掉阴影 */
.site-header {
    /*width: 100%;
    background-color: transparent;
    box-shadow: none;
    flex-shrink: 0;*/
      width:100%; 
    background-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
    /*padding:16px 20px;*/
    text-align:center;
    color:#ffffff;
    font-size:14px;
    flex-shrink: 0; 
}

.header-inner {
    max-width: 1600px;
    margin: 0 auto;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
}

    /*.site-logo i {
        font-size: 42px;
        color: var(--wl-orange);
    }*/

.main-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    margin: 0 10px;
    transition: 0.24s;
}

    .main-nav a:hover {
        color: #ffffff;
    }

.login-main {
    /*flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px 80px;*/
     flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* 修改这里：由flex-end改为center，整体居中 */
   padding: 60px 80px; 
    overflow: hidden;
}

.login-panel {
    position: relative;
    z-index: 3;
    width: 460px;
    background: var(--wl-white);
    border-radius: 16px;
    box-shadow: 0 12px 45px rgba(0,0,0,0.28);
    padding: 40px 44px;
}

.login-title {
    margin-bottom: 28px;
    text-align: left;
}

    .login-title h2 {
        font-size: 26px;
        color: var(--wl-main-blue);
    }

    .login-title p {
        margin-top: 6px;
        font-size: 14px;
        color: var(--wl-text-normal);
    }

.form-item {
    margin-bottom: 18px;
}

    .form-item label {
        display: block;
        font-size: 14px;
        color: var(--wl-text-normal);
        margin-bottom: 7px;
    }

.input-wrap {
    position: relative;
}

    .input-wrap i {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #8894a6;
        font-size: 18px;
    }

    .input-wrap input {
        width: 100%;
        height: 46px;
        border: 1px solid var(--wl-border-line);
        border-radius: 8px;
        padding-left: 50px;
        padding-right: 16px;
        font-size: 15px;
        transition: 0.25s;
    }

        .input-wrap input:focus {
            outline: none;
            border-color: var(--wl-main-blue);
            box-shadow: 0 0 0 3px rgba(15,52,96,0.13);
        }

.code-row {
    display: flex;
    gap: 12px;
}

    .code-row .input-wrap {
        flex: 1;
    }

.code-img-box {
    width: 126px;
    height: 46px;
    background: #e9eff7;
    border: 1px solid var(--wl-border-line);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--wl-main-blue);
    user-select: none;
    font-size: 13px;
}

a.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: var(--wl-main-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s;
    margin-top: 6px;
    text-decoration: none;
}

    a.login-btn:hover {
        background: var(--wl-blue-light);
        color: #ffffff;
    }

.login-other {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 13px;
}

    .login-other a {
        color: var(--wl-main-blue);
        text-decoration: none;
    }

        .login-other a:hover {
            text-decoration: underline;
        }

.divider-line {
    margin: 24px 0 12px;
    height: 1px;
    background: var(--wl-border-line);
}

.register-tip {
    font-size: 14px;
    color: var(--wl-text-normal);
}

    .register-tip a {
        color: var(--wl-orange);
        font-weight: 600;
        text-decoration: none;
    }

        .register-tip a:hover {
            text-decoration: underline;
        }

/* footer背景透明 */
.site-footer {
    width:100%; 
    background-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
    padding:16px 20px;
    text-align:center;
    color:#ffffff;
    font-size:14px;
    flex-shrink: 0; 
} 
@media(max-width:1200px) {
    .login-main {
        justify-content: center;
        padding: 20px;
    }
}

@media(max-width:540px) {
    .login-panel {
        width: 100%;
        max-width: 460px;
        padding: 28px 22px;
    }

    .header-inner {
        padding: 0 16px;
    }

    /*.site-logo span {
        font-size: 17px;
    }*/

    .main-nav a {
        /*margin: 0 5px;*/
        font-size: 14px; 
    }

    .code-row {
        flex-direction: column;
    }

    .code-img-box {
        width: 100%;
    }
}