/* 登录注册页面样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container {
    display: flex;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    max-width: 900px;
    width: 100%;
}

.auth-box {
    flex: 1;
    padding: 50px;
}

.auth-header {
    text-align: center;
    margin-bottom: 40px;
}

.auth-header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.auth-header .logo-icon {
    width: 48px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Ccircle cx='32' cy='32' r='30' fill='%231a1a1a' stroke='%23333' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='26' fill='none' stroke='%23444' stroke-width='1' stroke-dasharray='4 2'/%3E%3Ccircle cx='32' cy='32' r='22' fill='none' stroke='%23555' stroke-width='1' stroke-dasharray='3 3'/%3E%3Ccircle cx='32' cy='32' r='14' fill='%23667eea' stroke='%235a67d8' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='8' fill='%23764ba2'/%3E%3Ccircle cx='32' cy='32' r='4' fill='%231a1a1a'/%3E%3Cpath d='M32 4 L32 18 M32 46 L32 60 M4 32 L18 32 M46 32 L60 32 M12.7 12.7 L22.6 22.6 M41.4 41.4 L51.3 51.3 M12.7 51.3 L22.6 41.4 M41.4 22.6 L51.3 12.7' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='22' r='2' fill='%23ccc'/%3E%3Ccircle cx='32' cy='42' r='2' fill='%23ccc'/%3E%3Ccircle cx='22' cy='32' r='2' fill='%23ccc'/%3E%3Ccircle cx='42' cy='32' r='2' fill='%23ccc'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    animation: tire-roll 3s linear infinite;
}

.auth-header .logo span {
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-container h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.form-subtitle {
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.form-group label .required {
    color: #e74c3c;
    margin-left: 2px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.remember-me, .agreement {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.remember-me input, .agreement input {
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.forgot-password {
    color: #667eea;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.agreement a {
    color: #667eea;
    text-decoration: none;
}

.agreement a:hover {
    text-decoration: underline;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.form-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #666;
}

.form-footer a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.form-footer a:hover {
    text-decoration: underline;
}

.error-message {
    background: #fee;
    color: #c33;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
}

.success-message {
    background: #efe;
    color: #3c3;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
}

.hidden {
    display: none;
}

.auth-info {
    width: 300px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-info h3 {
    font-size: 24px;
    margin-bottom: 30px;
}

.auth-info ul {
    list-style: none;
}

.auth-info li {
    padding: 12px 0;
    font-size: 16px;
    opacity: 0.95;
}

/* 动画 */
@keyframes tire-roll {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 响应式 */
@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
    }
    
    .auth-info {
        width: 100%;
        padding: 30px;
    }
    
    .auth-box {
        padding: 30px;
    }
}