/**
 * JPMS Mobile Responsive Styles
 * 移动端响应式样式统一文件
 * 
 * @author AI Assistant
 * @created 2026-02-21
 * @description 提供全面的移动端适配支持，包括布局、触控、字体、图片响应式等优�? */

/* ============================================
   基础移动端适配设置
   ============================================ */

/* Viewport 优化 - 确保正确的视口设�?*/
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* 基础移动端样�?*/
@media (max-width: 768px) {
    /* 防止水平滚动 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /* 触摸优化 */
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* 禁用文本选择（除输入框外�?*/
    body {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input, textarea, select {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* 平滑滚动 */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   触控体验优化 - 44x44 最小点击区�?   ============================================ */

@media (max-width: 768px) {
    /* 按钮最小点击区�?*/
    button, 
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* 导航链接最小点击区�?*/
    .nav-link,
    .mobile-nav-link,
    .sidebar-item,
    .menu-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 表单元素最小点击区�?*/
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 22px;
        min-height: 22px;
        margin: 11px;
    }

    /* 下拉选择�?*/
    select {
        min-height: 44px;
    }

    /* 增加链接点击区域 */
    a {
        padding: 8px 0;
    }

    /* 图标按钮 */
    .icon-btn,
    .action-btn,
    .close-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Tab 按钮 */
    .tab,
    .tab-item {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* 分页按钮 */
    .page-btn,
    .pagination-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   字体优化 - 移动端阅读清晰度
   ============================================ */

@media (max-width: 768px) {
    /* 基础字体大小调整 */
    html {
        font-size: 14px;
    }

    body {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 标题字体层级 */
    h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.35;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    h4 {
        font-size: 1.125rem;
        line-height: 1.45;
    }

    h5, h6 {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* 正文优化 */
    p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 1rem;
    }

    /* 小字文本 */
    .text-small,
    .text-xs,
    small {
        font-size: 12px;
        line-height: 1.5;
    }

    /* 标签和辅助文�?*/
    .label,
    .badge,
    .tag {
        font-size: 11px;
    }

    /* 价格数字优化 */
    .price,
    .amount,
    .balance {
        font-size: 16px;
        font-weight: 600;
    }

    /* 大数字显�?*/
    .stat-value,
    .big-number {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    .stat-value,
    .big-number {
        font-size: 20px;
    }
}

/* ============================================
   图片响应式优�?   ============================================ */

@media (max-width: 768px) {
    /* 图片自适应 */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* 响应式图片容�?*/
    .img-responsive,
    .responsive-img {
        width: 100%;
        height: auto;
    }

    /* 圆形头像优化 */
    .avatar,
    .user-avatar,
    .profile-img {
        width: 40px;
        height: 40px;
    }

    /* 大头�?*/
    .avatar-lg,
    .profile-img-lg {
        width: 60px;
        height: 60px;
    }

    /* 图标大小 */
    .icon,
    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .icon-lg {
        width: 28px;
        height: 28px;
    }

    /* 加密货币图标 */
    .coin-icon,
    .crypto-icon,
    .crypto-icon-img {
        width: 32px;
        height: 32px;
    }

    /* Logo 优化 */
    .logo-icon {
        width: 32px;
        height: 32px;
    }

    .logo-text {
        font-size: 18px;
    }
}

/* ============================================
   布局适配 - 防止错位和溢�?   ============================================ */

@media (max-width: 768px) {
    /* 容器宽度 */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 防止内容溢出 */
    .container-fluid,
    .content-wrapper,
    .main-content {
        width: 100%;
        overflow-x: hidden;
    }

    /* Flex 布局优化 */
    .flex-row {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    /* Grid 布局优化 */
    .grid {
        grid-template-columns: 1fr;
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* 卡片布局 */
    .card {
        margin-bottom: 16px;
    }

    .card-body {
        padding: 16px;
    }

    /* 表格响应�?*/
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }

    /* 隐藏复杂表格�?*/
    .table-hide-mobile th:nth-child(n+6),
    .table-hide-mobile td:nth-child(n+6) {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card-body {
        padding: 12px;
    }

    /* 更严格的表格隐藏 */
    .table-hide-mobile th:nth-child(n+5),
    .table-hide-mobile td:nth-child(n+5) {
        display: none;
    }
}

/* ============================================
   间距优化
   ============================================ */

@media (max-width: 768px) {
    /* 减少大间�?*/
    .section {
        padding: 40px 0;
    }

    .section-lg {
        padding: 60px 0;
    }

    /* 内边距调�?*/
    .p-5, .p-6, .p-8 {
        padding: 1.5rem;
    }

    .px-5, .px-6, .px-8 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .py-5, .py-6, .py-8 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* 外边距调�?*/
    .m-5, .m-6, .m-8 {
        margin: 1.5rem;
    }

    .my-5, .my-6, .my-8 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* 间隙调整 */
    .gap-4, .gap-5, .gap-6 {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 32px 0;
    }

    .p-4, .p-5, .p-6 {
        padding: 1rem;
    }
}

/* ============================================
   表单优化
   ============================================ */

@media (max-width: 768px) {
    /* 表单容器 */
    .form-container {
        padding: 0;
    }

    /* 输入框优�?*/
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px; /* 防止 iOS 缩放 */
        padding: 12px 16px;
        min-height: 48px;
    }

    /* 表单组间�?*/
    .form-group {
        margin-bottom: 16px;
    }

    /* 表单标签 */
    .form-label,
    label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    /* 验证码输�?*/
    .captcha-input {
        letter-spacing: 4px;
        font-size: 18px;
        text-align: center;
    }

    /* 搜索�?*/
    .search-input,
    .search-box input {
        font-size: 16px;
        padding-left: 40px;
    }
}

/* ============================================
   导航优化
   ============================================ */

@media (max-width: 768px) {
    /* 固定头部 */
    .main-header,
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }

    /* 头部高度 */
    .main-header {
        height: 56px;
    }

    /* 为固定头部添加内容间�?*/
    body {
        padding-top: 56px;
    }

    /* 移动端菜�?*/
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--bg-card, #161616);
        z-index: 1050;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    .mobile-menu.active {
        right: 0;
    }

    /* 菜单遮罩 */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 汉堡菜单按钮 */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
    }

    /* 底部导航 */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--bg-card, #161616);
        border-top: 1px solid var(--border-primary, #2a2a2a);
        z-index: 1030;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /* 底部导航�?*/
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        min-height: 44px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 11px;
        gap: 4px;
    }

    .mobile-nav-item.active {
        color: var(--accent-primary, #FFD700);
    }

    .mobile-nav-item svg {
        width: 20px;
        height: 20px;
    }

    /* 为底部导航添加内容间�?*/
    body.has-bottom-nav {
        padding-bottom: 60px;
    }
}

/* ============================================
   侧边栏优�?   ============================================ */

@media (max-width: 768px) {
    /* 可折叠侧边栏 */
    .sidebar,
    .wallet-sidebar {
        position: fixed;
        top: 56px;
        left: -100%;
        width: 280px;
        height: calc(100vh - 56px);
        background: var(--bg-secondary, #111111);
        z-index: 1020;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    .sidebar.active,
    .wallet-sidebar.active {
        left: 0;
    }

    /* 侧边栏遮�?*/
    .sidebar-overlay {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1015;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 主内容区全宽 */
    .main-content,
    .wallet-main {
        margin-left: 0;
        width: 100%;
    }

    /* 侧边栏切换按�?*/
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
    }
}

/* ============================================
   交易页面特定优化
   ============================================ */

@media (max-width: 768px) {
    /* 交易对选择�?*/
    .pair-selector {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 时间周期选择 */
    .timeframe-selector {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .timeframe-btn {
        flex-shrink: 0;
        min-width: 44px;
    }

    /* 交易表单 */
    .trading-form {
        padding: 16px;
    }

    /* 订单�?*/
    .orderbook {
        font-size: 12px;
    }

    .orderbook-row {
        padding: 4px 0;
    }

    /* 深度�?*/
    .depth-chart {
        height: 200px;
    }

    /* K线图 */
    .kline-chart {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .kline-chart {
        height: 250px;
    }

    .depth-chart {
        height: 150px;
    }
}

/* ============================================
   钱包页面特定优化
   ============================================ */

@media (max-width: 768px) {
    /* 资产卡片 */
    .asset-card {
        padding: 16px;
    }

    .asset-balance {
        font-size: 24px;
    }

    /* 资产列表 */
    .asset-list-item {
        padding: 12px 0;
    }

    /* 快速交�?*/
    .quick-trade {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        background: var(--bg-card);
        padding: 16px;
        border-top: 1px solid var(--border-primary);
        z-index: 1020;
    }
}

/* ============================================
   市场页面特定优化
   ============================================ */

@media (max-width: 768px) {
    /* 市场概览卡片 */
    .market-overview-grid {
        grid-template-columns: 1fr;
    }

    /* 市场表格 */
    .market-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 搜索和筛�?*/
    .market-toolbar {
        flex-direction: column;
        gap: 12px;
    }

    .market-toolbar .search-box {
        width: 100%;
    }

    /* Tab 导航 */
    .market-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .market-tab {
        flex-shrink: 0;
    }
}

/* ============================================
   横竖屏适配
   ============================================ */

/* 横屏模式 */
@media (max-width: 896px) and (orientation: landscape) {
    /* 减少头部高度 */
    .main-header {
        height: 48px;
    }

    body {
        padding-top: 48px;
    }

    /* 调整侧边�?*/
    .sidebar,
    .wallet-sidebar {
        top: 48px;
        height: calc(100vh - 48px);
    }

    /* 两列布局 */
    .landscape-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* 隐藏底部导航 */
    .mobile-bottom-nav {
        display: none;
    }

    body.has-bottom-nav {
        padding-bottom: 0;
    }
}

/* 竖屏模式 */
@media (max-width: 768px) and (orientation: portrait) {
    /* 单列布局 */
    .portrait-full {
        width: 100%;
    }

    /* 显示底部导航 */
    .mobile-bottom-nav {
        display: flex;
    }

    body.has-bottom-nav {
        padding-bottom: 60px;
    }
}

/* ============================================
   动画优化 - 减少移动端动�?   ============================================ */

@media (max-width: 768px) {
    /* 减少动画 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.2s !important;
    }

    /* 保留必要的过�?*/
    .btn,
    .nav-link,
    .card {
        transition: all 0.2s ease !important;
    }

    /* 禁用复杂动画 */
    .animate-pulse,
    .animate-bounce,
    .animate-spin {
        animation: none !important;
    }
}

/* 尊重用户的减少动画偏�?*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   深色模式优化
   ============================================ */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* 确保深色模式下的对比�?*/
    body {
        background-color: #0a0a0a;
        color: #ffffff;
    }

    /* 输入框样�?*/
    input,
    textarea,
    select {
        background-color: #1a1a1a;
        color: #ffffff;
        border-color: #2a2a2a;
    }
}

/* ============================================
   安全区域适配 - iPhone X+ 等刘海屏
   ============================================ */

@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        /* 顶部安全区域 */
        .main-header,
        .navbar {
            padding-top: env(safe-area-inset-top);
        }

        body {
            padding-top: calc(56px + env(safe-area-inset-top));
        }

        /* 底部安全区域 */
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(60px + env(safe-area-inset-bottom));
        }

        body.has-bottom-nav {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }

        /* 左右安全区域 */
        .container {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
}

/* ============================================
   打印样式
   ============================================ */

@media print {
    .main-header,
    .mobile-bottom-nav,
    .sidebar,
    .mobile-menu,
    .mobile-menu-toggle,
    .sidebar-toggle {
        display: none !important;
    }

    body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .container {
        max-width: 100%;
    }
}

/* ============================================
   工具�?   ============================================ */

/* 移动端显�?隐藏 */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .show-mobile-inline {
        display: inline !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* 文本截断 */
@media (max-width: 768px) {
    .text-truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-wrap-mobile {
        white-space: normal;
        word-wrap: break-word;
    }
}

/* 滚动优化 */
@media (max-width: 768px) {
    .scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scroll-x::-webkit-scrollbar {
        display: none;
    }

    .scroll-y {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 触摸反馈 */
@media (max-width: 768px) {
    .touch-feedback:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    .btn:active,
    .card:active {
        transform: scale(0.98);
    }
}

/* 首页响应式优化 */
@media (max-width: 768px) {
    /* 英雄区域 */
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    /* 统计数据 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    /* 核心功能卡片 */
    .core-features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* 市场趋势表格 */
    .market-trend-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .market-trend-table table {
        min-width: 600px;
    }
    
    /* FAQ 部分 */
    .faq-section {
        padding: 40px 0;
    }
    
    /* 信任平台部分 */
    .trusted-platform-section {
        padding: 40px 0;
    }
    
    .trusted-content {
        flex-direction: column;
        text-align: center;
    }
    
    .trusted-visual {
        margin-top: 32px;
    }
    
    /* 轨道系统 */
    .orbit-system {
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* 触摸优化 */
    .btn, .nav-link, .mobile-nav-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 表单元素 */
    input:not([type="range"]), select, textarea {
        font-size: 16px;
        min-height: 44px;
    }
    
    /* 减少动画 */
    .orbit-system, .hero-globe-image {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    /* 统计数据 - 单列 */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* 英雄区域 */
    .hero-section {
        padding: 40px 0;
    }
    
    .hero-content h1 {
        font-size: 24px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    /* 按钮大小 */
    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}