/* ================================================================
   移动端全局适配 CSS
   用途：为所有 static 页面提供移动端响应式支持
   ================================================================ */

/* 移动端适配 (手机) */
@media (max-width: 768px) {
    /* === 基础容器 === */
    .container, .main-container {
        padding: 12px !important;
        max-width: 100% !important;
margin-left: 12px !important;
        margin-right: 12px !important;
    }
    
    /* === 字体大小 === */
    body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    
    /* === 按钮 === */
    .btn, button, input[type="submit"], input[type="button"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important; /* iOS 最小点击区域 */
        width: 100% !important; /* 移动端按钮全宽 */
        max-width: 100% !important;
    }
    
    .action-btns, .button-group {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .action-btn {
        width: 100% !important;
        margin: 6px 0 !important;
    }
    
    /* === 表单 === */
    input, select, textarea {
        font-size: 16px !important; /* 防止 iOS 自动缩放 */
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .form-group, .input-group {
        margin-bottom: 16px !important;
    }
    
    /* === 卡片 === */
    .card, .result-card {
        margin-bottom: 16px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    /* === 网格布局 === */
    .grid, .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .feature-grid, .price-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* === 导航 === */
    nav, .nav {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }
    
    .nav-links {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* === 图片 === */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* === 表格 === */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* === 模态框 === */
    .modal-content {
        width: 95% !important;
        margin: 10px auto !important;
        padding: 20px !important;
    }
    
    /* === 隐藏/显示 === */
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    /* === Hero 区域 === */
    .hero-section {
        padding: 40px 20px !important;
        min-height: auto !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    /* === 价格卡片 === */
    .price-card {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* === 间距调整 === */
    .section {
        padding: 30px 16px !important;
    }
    
    /* === 固定底部按钮 === */
    .fixed-bottom-btn {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px !important;
        background: white !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
    }
}

/* 平板适配 (iPad) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 720px !important;
        padding: 20px !important;
    }
    
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 小屏手机 (iPhone SE) */
@media (max-width: 375px) {
    body {
        font-size: 13px !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    
    .card {
        padding: 12px !important;
    }
}

/* 横屏适配 */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 20px !important;
        min-height: auto !important;
    }
}

/* ===============================================
   移动端全局增强适配 V2
   =============================================== */

/* 汉堡菜单按钮 */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #F8FAFC;
    transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
    /* 显示汉堡菜单 */
    .menu-toggle {
        display: flex !important;
    }

    /* 导航栏重构 */
    .navbar .container {
        flex-wrap: wrap !important;
        position: relative;
    }

    .nav-links {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        padding: 16px 0 !important;
        gap: 0 !important;
        order: 3;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links > a {
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        width: 100% !important;
    }

    /* 登录/注册按钮 */
    #auth-buttons {
        display: flex !important;
        width: 100% !important;
        gap: 12px !important;
        padding-top: 16px !important;
        margin-top: 8px !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    #auth-buttons .btn {
        flex: 1 !important;
        text-align: center !important;
    }

    /* 用户菜单 */
    .user-menu, #user-menu {
        width: 100% !important;
        display: none !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-top: 16px !important;
        margin-top: 8px !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    .user-menu.active, #user-menu.active {
        display: flex !important;
    }

    .user-menu .btn, #user-menu .btn,
    .user-menu button, #user-menu button {
        flex: 1 1 calc(50% - 4px) !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 8px !important;
    }

    .user-menu .user-email, #user-menu .user-email {
        width: 100% !important;
        text-align: center !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* Hero 区域 */
    .hero {
        padding: 80px 16px 40px !important;
        min-height: auto !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-title, .hero h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
    }

    /* 功能卡片网格 */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .feature-card {
        padding: 24px !important;
    }

    /* 用户评价网格 */
    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 信任保障 */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .trust-item {
        padding: 16px !important;
        text-align: center !important;
    }

    /* 页脚 */
    .footer-content {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .footer-column {
        text-align: center !important;
    }

    /* CTA 区域 */
    .cta-card {
        padding: 32px 20px !important;
    }

    .cta-title {
        font-size: 1.5rem !important;
    }
}

/* 超小屏幕 (iPhone SE 等) */
@media (max-width: 375px) {
    .trust-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-title, .hero h1 {
        font-size: 1.75rem !important;
    }

    .user-menu .btn, #user-menu .btn {
        flex: 1 1 100% !important;
    }
}

/* ===============================================
   登录/注册页面适配
   =============================================== */
@media (max-width: 480px) {
    /* 认证卡片 */
    .auth-card {
        padding: 24px 16px !important;
        margin: 16px !important;
        border-radius: 16px !important;
    }

    .auth-card h2 {
        font-size: 1.5rem !important;
    }

    /* Tab 切换 */
    .login-tabs {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .login-tabs button {
        width: 100% !important;
        padding: 14px !important;
    }

    /* 验证码输入区域 */
    .form-group > div[style*="display:flex"][style*="gap:8px"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* 发送验证码按钮 */
    #send-code-btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* 输入框 */
    .auth-card input {
        font-size: 16px !important;
        padding: 14px !important;
    }

    /* 提交按钮 */
    .auth-card .btn-block {
        min-height: 50px !important;
        font-size: 16px !important;
    }
}

/* ===============================================
   档案列表页适配
   =============================================== */
@media (max-width: 480px) {
    /* 分享模态框 */
    #share-modal .modal-content {
        padding: 20px 16px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* 分享选项改为单列 */
    #share-modal .modal-content > div[style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* 档案卡片操作按钮 */
    .profile-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .profile-actions .btn,
    .profile-actions button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 八字柱子 */
    .pillar {
        min-width: 55px !important;
        padding: 10px 12px !important;
    }

    .pillar-value {
        font-size: 1.1rem !important;
    }
}

/* ===============================================
   导航页面适配
   =============================================== */
@media (max-width: 480px) {
    /* MBTI 四维度改为 2x2 */
    .mbti-card > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 分享面板选项 */
    .share-options {
        grid-template-columns: 1fr !important;
    }

    .share-option {
        padding: 16px !important;
    }

    /* 分享/PK 按钮组 */
    .share-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .btn-share, .btn-pk {
        max-width: none !important;
        width: 100% !important;
    }

    /* 卡片网格 */
    .card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===============================================
   通用触摸优化
   =============================================== */
@media (max-width: 768px) {
    /* 确保所有按钮触摸友好 */
    button:not(.menu-toggle),
    .btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
    }

    /* 输入框字体大小防止 iOS 自动缩放 */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 模态框优化 */
    .modal-content {
        width: 92vw !important;
        max-width: none !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        margin: auto !important;
    }

    /* 禁止文本选择（按钮等交互元素） */
    button, .btn, a {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* ===============================================
   平板横屏优化
   =============================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}