body {
    font-family: '微软雅黑', sans-serif;
    margin: 0;
    min-height: 100vh;
    background-attachment: fixed;
}
.container {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    backdrop-filter: blur(8px);
    width: 900px;
    max-width: 100%;
    min-height: 500px;
    margin: 5% auto;
    position: relative;
    overflow: hidden;
    display: flex;
}
.form-container {
    position: absolute;
    top: 0; height: 100%; width: 50%;
    transition: all 0.6s ease-in-out;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    border-radius: 20px 0 0 20px;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
}
.sign-in-container { left: 0; }
.sign-up-container { left: 0; opacity: 0; z-index: 1; }
.container.right-panel-active .sign-in-container { transform: translateX(100%); opacity: 0; }
.container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; }
.overlay-container {
    position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
    overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100;
}
.overlay {
    background: linear-gradient(120deg, #ff5858, #f09819);
    color: #fff; position: relative; left: -100%; height: 100%; width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    display: flex; align-items: center; justify-content: center;
}
.container.right-panel-active .overlay-container { transform: translateX(-100%); }
.container.right-panel-active .overlay { transform: translateX(50%); }
.overlay-panel {
    position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%;
    transition: transform 0.6s ease-in-out;
}
.overlay-left { transform: translateX(-20%); left: 0; }
.overlay-right { right: 0; transform: translateX(0); }
.container.right-panel-active .overlay-left { transform: translateX(0); }
.container.right-panel-active .overlay-right { transform: translateX(20%); }
form { background: none; display: flex; flex-direction: column; align-items: center; }
input { background: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 260px; border-radius: 8px; font-size: 16px; }
button { border-radius: 20px; border: none; padding: 12px 45px; background: #ff5858; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; transition: background 0.3s; }
button.ghost { background: transparent; border: 2px solid #fff; color: #fff; }
button:hover { background: #f09819; }
a { color: #333; font-size: 14px; text-decoration: none; margin: 10px 0; }
h2 { font-weight: bold; margin: 0 0 20px 0; }

/* 响应式优化 */
@media (max-width: 900px) {
    .container {
        width: 100vw;
        min-height: 100vh;
        border-radius: 0;
        flex-direction: column;
        box-shadow: none;
        background: rgba(255,255,255,0.15);
        padding: 0;
    }
    .form-container, .overlay-container {
        position: static;
        width: 100%;
        height: auto;
        border-radius: 0;
        box-shadow: none;
    }
    .form-container {
        min-height: 350px;
        padding: 32px 8px 24px 8px;
        background: rgba(255,255,255,0.85);
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        border-radius: 18px;
        margin: 32px auto 0 auto;
        max-width: 98vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .overlay-container {
        display: none;
    }
    .sign-in-container, .sign-up-container {
        opacity: 1 !important;
        z-index: 2 !important;
        transform: none !important;
        left: 0;
    }
    form {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    input {
        width: 100%;
        max-width: 340px;
        font-size: 18px;
        border-radius: 14px;
        padding: 14px 16px;
        margin: 12px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        border: 1px solid #eee;
        background: #f8f8f8;
        transition: border 0.2s;
    }
    input:focus {
        border: 1.5px solid #ff5858;
        outline: none;
        background: #fff;
    }
    button {
        width: 100%;
        padding: 15px 0;
        font-size: 18px;
        border-radius: 20px;
        margin-top: 18px;
        margin-bottom: 8px;
        box-shadow: 0 2px 8px rgba(255,88,88,0.08);
        letter-spacing: 1px;
    }
    button.ghost {
        border-radius: 20px;
        margin-top: 10px;
    }
    h2 {
        font-size: 26px;
        font-weight: bold;
        margin: 0 0 18px 0;
        color: #ff5858;
        letter-spacing: 1px;
    }
    a {
        color: #888;
        font-size: 15px;
        margin: 10px 0 0 0;
    }
}
@media (max-width: 500px) {
    .container {
        min-height: 100vh;
        margin: 0;
        padding: 0;
        background: rgba(255,255,255,0.12);
    }
    .form-container {
        min-height: 260px;
        padding: 18px 2vw 16px 2vw;
        border-radius: 12px;
        margin: 18px auto 0 auto;
        max-width: 99vw;
    }
    h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    input {
        font-size: 15px;
        padding: 10px 10px;
        border-radius: 10px;
    }
    button {
        font-size: 15px;
        padding: 12px 0;
        border-radius: 16px;
    }
}