/* 移动端适配样式 */

/* 基础移动端优化 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 移动端容器适配 - 使用通用属性选择器匹配任何 data-v-* 属性 */
@media screen and (max-width: 768px) {
  .container[data-v],
  .container[data-v-19f845c4] {
    flex-direction: column !important;
    max-width: 100% !important;
    min-height: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .left-panel[data-v],
  .left-panel[data-v-19f845c4],
  .right-panel[data-v],
  .right-panel[data-v-19f845c4] {
    flex: 1 !important;
    padding: 20px 15px !important;
    border-right: none !important;
  }

  .left-panel[data-v],
  .left-panel[data-v-19f845c4] {
    border-bottom: 1px solid #eee !important;
  }

  .right-panel[data-v],
  .right-panel[data-v-19f845c4] {
    border-bottom: none !important;
  }

  /* 标题优化 */
  h2[data-v],
  h2[data-v-19f845c4] {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
  }

  /* 表单元素优化 */
  input[data-v],
  input[data-v-19f845c4],
  textarea[data-v],
  textarea[data-v-19f845c4] {
    padding: 14px !important;
    font-size: 16px !important; /* 防止 iOS 自动缩放 */
    border-radius: 10px !important;
  }

  /* 按钮组优化 */
  .button-group[data-v],
  .button-group[data-v-19f845c4] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .button-group button[data-v],
  .button-group button[data-v-19f845c4] {
    width: 100% !important;
    min-width: auto !important;
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* 上传区域优化 */
  .upload-area[data-v],
  .upload-area[data-v-19f845c4] {
    padding: 30px 15px !important;
    margin-bottom: 20px !important;
  }

  .upload-icon[data-v],
  .upload-icon[data-v-19f845c4] {
    font-size: 40px !important;
  }

  /* Canvas 和图片显示优化 */
  canvas[data-v],
  canvas[data-v-19f845c4] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cropper-container-body[data-v],
  .cropper-container-body[data-v-19f845c4] {
    width: 100% !important;
    max-height: 400px !important;
  }

  /* 裁剪控制按钮优化 */
  .crop-controls[data-v],
  .crop-controls[data-v-19f845c4] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .crop-btn[data-v],
  .crop-btn[data-v-19f845c4] {
    width: 100% !important;
    min-width: auto !important;
    padding: 14px !important;
  }

  /* 高级控制按钮优化 */
  .advanced-controls[data-v],
  .advanced-controls[data-v-19f845c4] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .advanced-controls .crop-btn[data-v],
  .advanced-controls .crop-btn[data-v-19f845c4] {
    width: 100% !important;
    min-width: auto !important;
  }

  /* Logo 优化 */
  .logo h1[data-v],
  .logo h1[data-v-19f845c4] {
    font-size: 24px !important;
  }

  /* 用户信息卡片优化 */
  .user-info[data-v],
  .user-info[data-v-19f845c4] {
    padding: 15px !important;
    margin-top: 20px !important;
  }

  .user-info-item[data-v],
  .user-info-item[data-v-19f845c4] {
    flex-direction: column !important;
    gap: 5px !important;
  }

  .user-info-value[data-v],
  .user-info-value[data-v-19f845c4] {
    text-align: left !important;
    word-break: break-word !important;
  }

  /* 图片信息卡片优化 */
  .image-info-card[data-v],
  .image-info-card[data-v-19f845c4] {
    padding: 15px !important;
    margin: 15px 0 !important;
  }

  .image-info-grid[data-v],
  .image-info-grid[data-v-19f845c4] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 状态消息优化 */
  .status[data-v],
  .status[data-v-19f845c4] {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* 模态框优化 */
  .modal-content[data-v],
  .modal-content[data-v-19f845c4] {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px !important;
  }

  .modal-header[data-v],
  .modal-header[data-v-19f845c4],
  .modal-body[data-v],
  .modal-body[data-v-19f845c4],
  .modal-footer[data-v],
  .modal-footer[data-v-19f845c4] {
    padding: 15px !important;
  }

  .modal-footer[data-v],
  .modal-footer[data-v-19f845c4] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .confirm-btn[data-v],
  .confirm-btn[data-v-19f845c4],
  .cancel-btn[data-v],
  .cancel-btn[data-v-19f845c4] {
    width: 100% !important;
  }

  /* 免责声明按钮优化 */
  .disclaimer-container[data-v],
  .disclaimer-container[data-v-19f845c4] {
    top: 5px !important;
    right: 5px !important;
  }

  .disclaimer-btn[data-v],
  .disclaimer-btn[data-v-19f845c4] {
    padding: 12px 16px !important;
    font-size: 18px !important;
  }

  /* 登录帮助文本优化 */
  .login-help[data-v],
  .login-help[data-v-19f845c4] {
    padding: 12px !important;
    margin-top: 15px !important;
  }

  .help-text[data-v],
  .help-text[data-v-19f845c4] {
    font-size: 13px !important;
  }

  /* 尺寸信息优化 */
  .dimensions-info[data-v],
  .dimensions-info[data-v-19f845c4] {
    font-size: 13px !important;
    padding: 8px !important;
    margin-top: 10px !important;
  }

  /* 压缩信息优化 */
  .compress-info[data-v],
  .compress-info[data-v-19f845c4] {
    font-size: 13px !important;
    margin: 8px 0 !important;
  }
}

/* 小屏幕手机优化 (小于 480px) */
@media screen and (max-width: 480px) {
  .left-panel[data-v],
  .left-panel[data-v-19f845c4],
  .right-panel[data-v],
  .right-panel[data-v-19f845c4] {
    padding: 15px 10px !important;
  }

  h2[data-v],
  h2[data-v-19f845c4] {
    font-size: 18px !important;
    margin-bottom: 15px !important;
  }

  .logo h1[data-v],
  .logo h1[data-v-19f845c4] {
    font-size: 20px !important;
  }

  .upload-area[data-v],
  .upload-area[data-v-19f845c4] {
    padding: 20px 10px !important;
  }

  .upload-icon[data-v],
  .upload-icon[data-v-19f845c4] {
    font-size: 35px !important;
  }

  input[data-v],
  input[data-v-19f845c4],
  textarea[data-v],
  textarea[data-v-19f845c4] {
    padding: 12px !important;
    font-size: 16px !important;
  }

  button[data-v],
  button[data-v-19f845c4] {
    padding: 12px !important;
    font-size: 15px !important;
  }

  .cropper-container-body[data-v],
  .cropper-container-body[data-v-19f845c4] {
    max-height: 300px !important;
  }
}

/* 横屏模式优化 */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .container[data-v],
  .container[data-v-19f845c4] {
    flex-direction: row !important;
  }

  .left-panel[data-v],
  .left-panel[data-v-19f845c4] {
    border-right: 1px solid #eee !important;
    border-bottom: none !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
  }

  .right-panel[data-v],
  .right-panel[data-v-19f845c4] {
    max-height: 100vh !important;
    overflow-y: auto !important;
  }

  .cropper-container-body[data-v],
  .cropper-container-body[data-v-19f845c4] {
    max-height: 60vh !important;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  button[data-v],
  button[data-v-19f845c4] {
    min-height: 44px !important; /* iOS 推荐的最小触摸目标 */
  }

  .crop-btn[data-v],
  .crop-btn[data-v-19f845c4],
  .crop-controls button[data-v],
  .crop-controls button[data-v-19f845c4] {
    min-height: 44px !important;
  }

  input[data-v],
  input[data-v-19f845c4],
  textarea[data-v],
  textarea[data-v-19f845c4] {
    min-height: 44px !important;
  }
}

/* 防止 iOS 输入框自动缩放 */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* 滚动优化 */
@media screen and (max-width: 768px) {
  .left-panel[data-v],
  .left-panel[data-v-19f845c4],
  .right-panel[data-v],
  .right-panel[data-v-19f845c4] {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
}

/* Fix for dark mode input text visibility */
@media screen and (max-width: 768px) and (prefers-color-scheme: dark) {
    input[data-v],
    input[data-v-19f845c4],
    textarea[data-v],
    textarea[data-v-19f845c4] {
      color-scheme: light;
    }
}