/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .login-card {
        margin: 20px auto;
        padding: 20px 15px;
        border-radius: 12px;
    }
    
    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: center;
        position: sticky;
        top: 0;
        padding: 8px 15px;
        min-height: 48px;
        z-index: 1000;
    }
    
    .header-left h1 {
        font-size: 18px !important;
        margin: 0;
    }
    
    .title-logo {
        width: 120px;
    }
    
    /* 移动端菜单按钮 */
    .mobile-menu-btn {
        display: block;
        order: 3;
    }
    
    .header-nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #667eea, #764ba2);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 999;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        border-radius: 0 0 15px 15px;
    }
    
    .header-nav.mobile-show {
        display: block;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }
    
    .nav-link {
        font-size: 16px;
        padding: 15px 20px;
        border-radius: 0;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        display: block;
        transition: background-color 0.3s ease;
    }
    
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: none;
    }
    
    .nav-link::after {
        display: none;
    }
    
    .user-info-display {
        padding: 6px 10px;
        gap: 6px;
        flex-shrink: 0;
    }
    
    .user-avatar-img {
        width: 32px;
        height: 32px;
        margin-bottom: 2px;
    }
    
    .user-name {
        font-size: 11px;
        max-width: 60px;
    }
    
    .user-status {
        font-size: 10px;
    }
    
    .user-welcome {
        padding: 4px 6px;
        gap: 2px;
    }
    
    .user-dropdown-menu {
        min-width: 140px;
        right: -8px;
    }
    
    .dropdown-item {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    #logoutBtn {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .header-right {
        gap: 8px;
    }
    
    #loginBtn, #freeTrialBtn {
        font-size: 12px;
        padding: 8px 12px;
        gap: 4px;
    }
    
    .converter-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .admin-tabs {
        flex-direction: column;
    }
    
    .tab-btn {
        border-bottom: 1px solid #dee2e6;
        border-left: 3px solid transparent;
    }
    
    .tab-btn.active {
        border-left-color: #667eea;
        border-bottom-color: #dee2e6;
    }
    
    /* 移动端模态框优化 */
    .modal {
        padding: 0;
        animation: fadeIn 0.3s ease-out;
    }
    
    .modal:not(.pricing-modal) .modal-content {
        width: 100%;
        max-width: none;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        animation: slideUpFromCenter 0.3s ease-out;
    }
    
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-shrink: 0;
    }
    
    .modal-header h2 {
        font-size: 20px;
        margin: 0;
    }
    
    .modal-body {
        padding: 20px;
        flex: 1;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #f0f0f0;
        background: white;
        flex-shrink: 0;
    }
    
    /* 移动端卡片布局 */
    .features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .comparison-content,
    .demo-content {
        flex-direction: column;
    }
    
    .comparison-image,
    .demo-gif {
        max-width: 100%;
    }
    
    .welcome-content {
        padding: 20px 15px;
    }
    
    /* 用户中心卡片移动端优化 */
    .user-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
        max-height: 60vh;
        padding: 15px;
    }
    
    .user-card {
        padding: 15px;
        margin-bottom: 10px;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .card-info {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    /* 激活模态框两列布局移动端 */
    .user-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* 文件上传区域移动端优化 */
    .upload-area {
        padding: 30px 15px;
        min-height: 120px;
    }
    
    .upload-icon {
        font-size: 36px;
        margin-bottom: 10px;
    }
    
    .upload-text {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .file-input-label {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    /* 工作台移动端优化 */
    .converter-container {
        grid-template-columns: 1fr;
        height: auto;
        gap: 15px;
    }
    
    .input-panel, .output-panel {
        height: 300px;
    }
    
    /* 按钮移动端优化 */
    .btn {
        font-size: 14px;
        padding: 10px 16px;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    .btn-sm {
        font-size: 12px;
        padding: 8px 12px;
        min-height: 36px;
    }
    
    /* 表单元素移动端优化 */
    input, textarea, select {
        font-size: 16px;
        min-height: 44px;
        padding: 10px 12px;
    }
    
    /* 表格移动端优化 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 12px;
    }
    
    th, td {
        padding: 8px 6px;
    }
    
    /* 移动端定价样式 */
    .pricing-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pricing-card {
        padding: 20px;
    }
    
    .pricing-section h2 {
        font-size: 24px;
    }
    
    .price {
        font-size: 28px;
    }
    
    /* 操作演示区块移动端样式 */
    .demo-section {
        padding: 20px 15px;
        margin-top: 20px;
    }
    
    .demo-header h3 {
        font-size: 24px;
    }
    
    .operation-steps {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .operation-steps .step {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 12px 15px;
    }
    
    /* 移动端操作演示区域优化 */
    .operation-section {
        padding: 20px 15px;
        margin-top: 20px;
    }
    
    .operation-section h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .operation-steps {
        gap: 10px;
    }
    
    .operation-steps .step {
        padding: 15px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .step-number {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .operation-gif-container {
        margin-bottom: 15px;
    }
    
    .operation-gif {
        max-width: 100%;
        border-radius: 8px;
    }
    
    /* 移动端下载限制弹框优化 */
    .limit-info {
        padding: 15px;
    }
    
    .limit-icon {
        font-size: 36px;
        margin-bottom: 15px;
    }
    
    .limit-info h4 {
        font-size: 18px;
    }
    
    .limit-info p {
        font-size: 14px;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-footer .btn {
        max-width: none;
        width: 100%;
    }
    
    /* 移动端新用户提示链接样式 */
    .new-user-link-btn {
        padding: 12px 15px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .link-icon {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .link-content h5 {
        font-size: 14px;
    }
    
    .link-content p {
        font-size: 11px;
    }
    
    /* 移动端注册模态框优化 */
    .mode-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .form-group input {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .form-footer .btn {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .user-center-modal {
        max-width: 95% !important;
        width: 95% !important;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .info-grid-two-columns {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .info-grid .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .card-details {
        grid-template-columns: 1fr;
    }
    
    .card-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* 平板端定价样式 */
@media (max-width: 1200px) and (min-width: 769px) {
    .pricing-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 小屏幕桌面定价样式 */
@media (max-width: 1400px) and (min-width: 1201px) {
    .pricing-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}