/* 
 * Login页面移动端响应式适配CSS文件
 * 专门处理登录页面在手机和平板设备上的样式调整
 * 不影响原有桌面端样式
 */

/* CSS变量定义 - 便于维护 */
:root {
    /* 断点变量 */
    --mobile-max: 480px;
    --tablet-min: 481px;
    --tablet-max: 768px;
    --desktop-min: 769px;
    
    /* 登录容器尺寸 */
    --login-width-mobile: 95%;
    --login-width-tablet: 85%;
    --login-padding-mobile: 25px;
    --login-padding-tablet: 35px;
    
    /* 表单元素尺寸 */
    --input-height-mobile: 50px;
    --input-height-tablet: 45px;
    --input-font-mobile: 16px;
    --input-font-tablet: 16px;
    --button-height-mobile: 52px;
    --button-height-tablet: 48px;
    
    /* 字体大小 */
    --title-font-mobile: 24px;
    --title-font-tablet: 26px;
    --label-font-mobile: 15px;
    --label-font-tablet: 14px;
}

/* =====================================
   手机端样式 (0px - 480px)
   ===================================== */
@media (max-width: 480px) {
    
    /* 整体布局调整 */
    body {
        font-size: 16px !important; /* 防止iOS自动缩放 */
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* 登录容器适配 */
    .login-container {
        width: var(--login-width-mobile) !important;
        max-width: none !important;
        padding: var(--login-padding-mobile) !important;
        margin: 20px auto !important;
        
        /* 位置调整 - 适应小屏幕 */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* 确保不超出屏幕 */
        max-height: 90vh !important;
        overflow-y: auto !important;
        
        /* 优化背景和边框 */
        background: rgba(30, 30, 45, 0.98) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* 登录头部调整 */
    .login-header {
        margin-bottom: 25px !important;
        text-align: center !important;
    }
    
    .login-header h1 {
        font-size: var(--title-font-mobile) !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }
    
    .login-header p {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }
    
    /* 表单组间距调整 */
    .form-group {
        margin-bottom: 18px !important;
    }
    
    /* 标签样式调整 */
    .form-group label {
        font-size: var(--label-font-mobile) !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    /* 输入框移动端优化 */
    .form-group input {
        height: var(--input-height-mobile) !important;
        padding: 15px 18px !important;
        font-size: var(--input-font-mobile) !important;
        border-radius: 10px !important;
        border: 2px solid #555 !important;
        
        /* 移动端输入体验优化 */
        -webkit-appearance: none !important;
        -webkit-border-radius: 10px !important;
        box-sizing: border-box !important;
        
        /* 触摸反馈 */
        touch-action: manipulation !important;
    }
    
    /* 输入框焦点状态优化 */
    .form-group input:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
        transform: scale(1.02) !important;
        transition: all 0.2s ease !important;
    }
    
    /* 登录按钮移动端优化 */
    .login-btn {
        height: var(--button-height-mobile) !important;
        padding: 16px 20px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        margin-top: 15px !important;
        
        /* 触摸优化 */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        
        /* 确保按钮在移动端容易点击 */
        min-height: 52px !important;
        cursor: pointer !important;
    }
    
    /* 按钮悬停和激活状态 */
    .login-btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* 消息提示优化 */
    .error-message,
    .success-message {
        font-size: 14px !important;
        margin-top: 12px !important;
        padding: 8px !important;
        border-radius: 6px !important;
        text-align: center !important;
    }
    
    .error-message {
        background: rgba(231, 76, 60, 0.1) !important;
        border: 1px solid rgba(231, 76, 60, 0.3) !important;
    }
    
    .success-message {
        background: rgba(39, 174, 96, 0.1) !important;
        border: 1px solid rgba(39, 174, 96, 0.3) !important;
    }
    
    /* 加载状态优化 */
    .loading {
        margin-top: 15px !important;
        font-size: 15px !important;
    }
    
    .spinner {
        width: 18px !important;
        height: 18px !important;
        margin-right: 8px !important;
    }
    
    /* 🆕 移动端粒子背景与PC端保持一致 */
}

/* =====================================
   平板端样式 (481px - 768px) 
   ===================================== */
@media (min-width: 481px) and (max-width: 768px) {
    
    /* 登录容器平板适配 */
    .login-container {
        width: var(--login-width-tablet) !important;
        max-width: 450px !important;
        padding: var(--login-padding-tablet) !important;
        
        /* 位置微调 */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* 背景和阴影优化 */
        background: rgba(30, 30, 45, 0.96) !important;
        border-radius: 15px !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35) !important;
    }
    
    /* 标题大小调整 */
    .login-header h1 {
        font-size: var(--title-font-tablet) !important;
    }
    
    .login-header p {
        font-size: 14px !important;
    }
    
    /* 表单元素平板优化 */
    .form-group {
        margin-bottom: 20px !important;
    }
    
    .form-group label {
        font-size: var(--label-font-tablet) !important;
        margin-bottom: 8px !important;
    }
    
    /* 输入框平板适配 */
    .form-group input {
        height: var(--input-height-tablet) !important;
        padding: 13px 16px !important;
        font-size: var(--input-font-tablet) !important;
        border-radius: 8px !important;
    }
    
    /* 按钮平板适配 */
    .login-btn {
        height: var(--button-height-tablet) !important;
        padding: 14px 18px !important;
        font-size: 17px !important;
        border-radius: 8px !important;
    }
    
    /* 🆕 平板端粒子背景与PC端保持一致 */
}

/* =====================================
   桌面端确保样式 (769px+)
   ===================================== */
@media (min-width: 769px) {
    /* 确保桌面端保持原有样式 */
    .login-container {
        width: 100% !important;
        max-width: 400px !important;
        padding: 40px !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* 🆕 桌面端粒子背景保持原有样式 */
}

/* =====================================
   通用移动端优化
   ===================================== */
@media (max-width: 768px) {
    
    /* 防止iOS自动缩放 */
    input, textarea, select, button {
        font-size: 16px !important;
    }
    
    /* 优化触摸体验 */
    input, button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        touch-action: manipulation !important;
    }
    
    /* 确保页面不会左右滚动 */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* 优化滚动行为 */
    .login-container {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

/* =====================================
   横屏模式优化 (移动设备横屏)
   ===================================== */
@media (max-width: 768px) and (orientation: landscape) {
    
    .login-container {
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 20px 25px !important;
    }
    
    .login-header {
        margin-bottom: 20px !important;
    }
    
    .login-header h1 {
        font-size: 22px !important;
        margin-bottom: 5px !important;
    }
    
    .form-group {
        margin-bottom: 15px !important;
    }
    
    .form-group input {
        height: 45px !important;
        padding: 12px 15px !important;
    }
    
    .login-btn {
        height: 48px !important;
        margin-top: 10px !important;
    }
}

/* =====================================
   小屏手机特殊优化 (≤360px)
   ===================================== */
@media (max-width: 360px) {
    
    .login-container {
        width: 98% !important;
        padding: 20px !important;
        margin: 10px auto !important;
    }
    
    .login-header h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    .login-header p {
        font-size: 12px !important;
    }
    
    .form-group input {
        height: 48px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
    
    .login-btn {
        height: 50px !important;
        font-size: 17px !important;
    }
}

/* =====================================
   高对比度模式支持
   ===================================== */
@media (prefers-contrast: high) {
    .login-container {
        border: 2px solid currentColor !important;
    }
    
    .form-group input,
    .login-btn {
        border: 2px solid currentColor !important;
    }
}

/* =====================================
   减少动画模式支持
   ===================================== */
@media (prefers-reduced-motion: reduce) {
    .form-group input,
    .login-btn,
    .spinner {
        transition: none !important;
        animation: none !important;
    }
    
    .form-group input:focus {
        transform: none !important;
    }
    
    .login-btn:active {
        transform: none !important;
    }
}

/* =====================================
   暗色模式支持 (如果需要)
   ===================================== */
@media (prefers-color-scheme: dark) {
    /* 当前登录页面已经是暗色主题，保持不变 */
}