/**
 * 响应式布局CSS
 * 根据设备类型自动适配
 */

/* ===== 移动端基础样式 ===== */
.device-mobile {
  /* 移动端字体调整 */
  font-size: 15px;
}

.device-mobile .auth-container {
  max-width: 100%;
  margin: 20px auto;
  padding: 24px 20px;
  border-radius: 16px;
}

.device-mobile .form-input {
  font-size: 16px; /* 防止iOS自动缩放 */
  padding: 14px 16px;
}

.device-mobile .btn-submit {
  padding: 16px;
  font-size: 16px;
}

/* 移动端：隐藏或调整某些元素 */
.device-mobile .desktop-only {
  display: none !important;
}

.device-mobile .mobile-hide {
  display: none !important;
}

/* ===== 平板端样式 ===== */
.device-tablet {
  font-size: 15px;
}

.device-tablet .auth-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 32px;
}

/* ===== 桌面端样式 ===== */
.device-desktop {
  font-size: 16px;
}

.device-desktop .auth-container {
  max-width: 480px;
  margin: 60px auto;
  padding: 40px;
}

.device-desktop .mobile-only {
  display: none !important;
}

/* ===== 触摸设备优化 ===== */
.device-touch button,
.device-touch .btn-submit,
.device-touch .btn-send-otp {
  min-height: 44px; /* iOS推荐的最小触摸目标 */
  min-width: 44px;
}

.device-touch .form-input {
  min-height: 44px;
}

/* ===== 屏幕方向适配 ===== */
.orientation-portrait .landscape-only {
  display: none !important;
}

.orientation-landscape .portrait-only {
  display: none !important;
}

/* ===== 小屏幕优化（宽度 < 480px） ===== */
@media (max-width: 480px) {
  .auth-container {
    margin: 10px;
    padding: 20px 16px;
  }
  
  .auth-tabs {
    gap: 8px;
  }
  
  .auth-tab {
    padding: 10px;
    font-size: 14px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .input-group .btn-send-otp {
    width: 100%;
    margin-top: 8px;
  }
}

/* ===== 中等屏幕（平板横屏） ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .auth-container {
    max-width: 500px;
  }
}

/* ===== 大屏幕（桌面） ===== */
@media (min-width: 1025px) {
  .auth-container {
    max-width: 480px;
  }
}

/* ===== 高DPI屏幕优化 ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .device-mobile {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ===== iOS Safari 特殊处理 ===== */
.os-ios .form-input {
  -webkit-appearance: none;
  border-radius: 12px;
}

.os-ios .btn-submit,
.os-ios .btn-send-otp {
  -webkit-appearance: none;
}

/* ===== Android 特殊处理 ===== */
.os-android .form-input {
  border-radius: 12px;
}

.device-mobile .top-actions button,
.device-mobile .top-actions a.top-link {
  white-space: nowrap;
}

.device-mobile .search-bar input {
  font-size: 16px;
}

/* ===== 视频页面响应式 ===== */
.device-mobile .video-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
}

.device-tablet .video-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.device-desktop .video-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ===== 首页响应式 ===== */
.device-mobile .main-content {
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 20px;
}

.device-mobile .phone-mockup {
  max-width: 100%;
  margin: 0 auto;
}

.device-mobile .cta-area {
  flex-direction: column;
  gap: 16px;
}

.device-mobile .vip-bubble,
.device-mobile .watch-btn {
  width: 100%;
  text-align: center;
}

/* ===== 底部导航栏响应式 ===== */
.device-mobile .bottom-nav {
  padding: 8px 4px;
}

.device-mobile .bottom-nav a {
  padding: 8px 4px;
  font-size: 12px;
}

.device-mobile .bottom-nav .icon {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

/* ===== 会员页面响应式 ===== */
.device-mobile .member-container {
  padding: 16px;
}

.device-mobile .profile-card {
  padding: 20px;
}

.device-mobile .quick-links {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ===== 工具类 ===== */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}

/* ===== 安全区域适配（iPhone X等） ===== */
@supports (padding: max(0px)) {
  .device-mobile .bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  
  .device-mobile header {
    padding-top: max(16px, env(safe-area-inset-top));
  }
}