/* SHAOXIAOJ login page styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
}
.login-card {
    display: flex; flex-wrap: wrap;
    width: 900px; max-width: 100%;
    background: #ffffff; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.login-card .column { flex: 1 1 50%; padding: 48px 42px; min-width: 300px; }
.login-card .column:first-child { background: #ffffff; }
.login-card .column:last-child {
    background: #f4f7fb; display: flex; flex-direction: column; justify-content: center;
}
.login-card h1 { font-size: 30px; color: #1b2a3a; margin-bottom: 6px; }
.login-card h2 { font-size: 22px; color: #1b2a3a; margin-bottom: 12px; }
.login-card p { color: #5a6b7b; font-size: 15px; line-height: 1.7; }
.form-item { margin: 18px 0; }
.form-element {
    width: 100%; padding: 12px 14px; font-size: 15px;
    border: 1px solid #d5dde5; border-radius: 8px; background: #fafbfc;
    transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.form-element:focus { border-color: #2c7be5; box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.15); background: #ffffff; }
.login-card button[type="submit"] {
    width: 100%; padding: 12px; font-size: 16px; font-weight: 600;
    color: #ffffff; background: linear-gradient(135deg, #2c7be5, #1f5fd0);
    border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.2s;
}
.login-card button[type="submit"]:hover { opacity: 0.9; }
.flex { display: flex; justify-content: center; margin-top: 6px; }
.login-card a { color: #2c7be5; text-decoration: none; }
.login-card a:hover { text-decoration: underline; }
.social-buttons { display: flex; justify-content: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.social-buttons a {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 15px; text-decoration: none;
    background: #34495e; transition: transform 0.2s, opacity 0.2s;
}
.social-buttons a:hover { transform: translateY(-3px); opacity: 0.85; text-decoration: none; }
.social-buttons .wechat { background: #07c160; }
.social-buttons .twitter { background: #1da1f2; }
.social-buttons .github { background: #24292e; }
@media (max-width: 720px) {
    .login-card .column { flex: 1 1 100%; padding: 32px 24px; }
}