@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap');

.hero {
    flex: 1 0 66.6666%;
    position: relative;
    transform: translateY(5%);
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 70px 0;
}

.main {
    flex: 1 0 33.3333%;
}

.main-login {
    flex: 1 0 33.3333%;
    margin-top: 4%;
}

.main form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-login form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main form p {
    position: relative;
    margin-bottom: 4px;
}

.main-login form p {
    position: relative;
    margin-bottom: 4px;
}

.eye-icon {
    cursor: pointer;
}

.disabled {
    background-color: grey;
    cursor: not-allowed;
}

form .password {
    position: relative;
}

form .password .icon-container {
    position: absolute;
    top: 35%;
    right: 10px;
    transform: translateY(-70%);
    display: flex;
    align-items: center;
}

form .password i {
    color: var(--light-text-color);
    cursor: pointer;
    z-index: 1; /* 确保图标在输入框上方 */
}

form .password a {
    font-size: 13px;
    color: var(--light-text-color);
    float: right;
    margin: 5px 20px 0 0;
}

/*.main-login span {*/
/*    display: block;*/
/*    margin-bottom: 20px;*/
/*    font-size: 15px;*/
/*    color: #333;*/
/*    background-color: var(--light-bg-color);*/
/*    padding: 10px 15px;*/
/*    border-radius: 10px;*/
/*    line-height: 1.6;*/
/*}*/

.span #error {
    display: block;
    margin-bottom: 20px;
    font-size: 15px;
    color: #333;
    background-color: var(--light-bg-color);
    padding: 10px 15px;
    border-radius: 10px;
    line-height: 1.6;
}


/* 页脚说明样式 */
.footer-note {
    position: absolute;
    text-align: center;
    font-size: 13px;
    color: #888888; /* 灰色 */
    bottom: auto;
    margin-bottom: -90%;
    width: 100%;
}

@media (max-width: 505px) {
    .site {
        padding-bottom: 100px;
    }
    .footer-note {

        margin-top: 140%;
    }
}


.remember-me span {
    display: inline;
    font-size: 13px;
    color: #333;
    padding: 6px;
    border-radius: 18px;
    line-height: 1.6;
    align-items:center;
    margin-bottom: 0;
    margin-top: 10px;
    background: none;
}

/* ╭──────── 外层 label ────────╮ */
.remember-me{
    --size   : 20px;          /* 方框大小 */
    --radius : 4px;           /* 圆角 */
    --border : 2px;
    --brand  : #4636ff;       /* 勾选后主色，可改成你的主题色 */
    --gray   : #c0c7d1;       /* 默认边框色 */
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    font-size:14px;
    cursor:pointer;
    user-select:none;
    border-radius: 18px;
    width: 100%;
}

/* ╭──────── 隐藏原生复选框，但保持可聚焦 ────────╮ */
.remember-checkbox{
    position:absolute;
    opacity:0;
    pointer-events:none;      /* 防止挡住点击 */
    width:0;height:0;margin:0;padding:0;
}

/* ╭──────── 自定义方框 ────────╮ */
.remember-box{
    width:var(--size);
    height:var(--size);
    border:var(--border) solid var(--gray);
    border-radius: 18px;
    box-sizing:border-box;
    flex-shrink:0;
    position:relative;
    transition:.2s;
    margin-left: 10px;
}

.remember-text {
    width: 100%;
    font-weight: 450;
    text-align: right;
    align-self: center;
    color: #444;
}

/* ① 勾选后：方框填充主题色、边框跟随主题 */
.remember-checkbox:checked + .remember-box{
    background:var(--brand);
    border-color:var(--brand);
}

/* ② 勾选后：绘制白色对勾 ✓ */
.remember-checkbox:checked + .remember-box::after{
    content:"";
    position:absolute;
    left:4px; top:1px;
    width:5px; height:9px;
    border:2px solid #fff;
    border-top:none; border-left:none;
    transform:rotate(45deg);
    text-align: center;
}

/* ③ 键盘聚焦时显示可访问性高亮环 */
.remember-checkbox:focus-visible + .remember-box{
    box-shadow:0 0 0 3px rgba(25,118,210,.35);
}

/* ④ 悬浮时轻微高亮边框 */
.remember-me:hover .remember-box{
    border-color:var(--brand);
}