/*
 * 海角社区视频解析系统 - 响应式样式
 * 确保在各种设备尺寸上的良好显示效果
 * 使用统一的主题变量系统
 */

/* 大型设备（大型桌面，1200px 及以上） */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-max-width);
    padding: 0 var(--spacing-2xl);
  }

  /* 大屏幕特有布局 */
  .main-layout {
    grid-template-columns: 1fr 360px;
    gap: var(--spacing-2xl);
  }

  /* 侧边栏固定 */
  .sidebar-area {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-2xl));
  }

  /* 大屏幕卡片优化 */
  .app-card {
    border-radius: var(--radius-3xl);
  }

  .parser-card {
    border-radius: var(--radius-3xl);
  }

  /* 搜索框大屏优化 */
  .search-container {
    max-width: 700px;
  }

  /* 大屏幕按钮优化 */
  .btn-lg {
    padding: var(--spacing-lg) var(--spacing-3xl);
    font-size: var(--font-size-xl);
  }
}

/* 中型设备（桌面，992px 及以上） */
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 1140px;
    padding: 0 var(--spacing-lg);
  }

  /* 中等屏幕布局 */
  .main-layout {
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
  }

  /* 中屏搜索框 */
  .search-container {
    max-width: 500px;
    margin: 0 var(--spacing-lg);
  }

  /* 中屏导航 */
  .app-nav {
    margin-right: var(--spacing-lg);
  }

  .app-nav-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  /* 中屏卡片 */
  .app-card {
    border-radius: var(--radius-xl);
  }

  .sidebar-card {
    padding: var(--spacing-md);
  }
}

/* 小型设备（平板，768px 及以上） */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-lg);
  }

  /* 平板单列布局 */
  .main-layout {
    display: block;
  }

  .sidebar-area {
    margin-top: var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
  }

  /* 平板头部优化 */
  .app-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  [data-theme="dark"] .app-header {
    background: rgba(15, 23, 42, 0.95);
  }

  /* 搜索框平板优化 */
  .search-container {
    max-width: 400px;
    margin: 0 var(--spacing-md);
  }

  .search-input {
    height: 44px;
    padding: 0 100px 0 44px;
  }

  .search-btn {
    height: 36px;
    padding: 0 var(--spacing-md);
  }

  /* 导航调整 */
  .app-nav-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

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

  /* 卡片调整 */
  .app-card {
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
  }

  .app-card-header {
    padding: var(--spacing-lg);
  }

  .app-card-body {
    padding: var(--spacing-lg);
  }

  .sidebar-card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  /* 按钮调整 */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}

  .app-card-body {
    padding: 20px;
  }

  /* VIP特权网格调整 */
  .vip-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* 平板端全宽内容优化 */
  .full-width-content {
    margin-top: 24px;
  }

  /* 使用说明在平板上保持单列 */
  .usage-steps {
    gap: 16px;
  }
}

/* 超小型设备（手机，768px 以下） */
@media (max-width: 767px) {
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-md);
  }

  /* 隐藏桌面导航，显示移动导航 */
  .app-nav {
    display: none !important;
  }

  .search-container {
    display: none;
  }

  .mobile-nav {
    display: flex;
  }

  /* 单列布局 */
  .main-layout {
    display: block;
    margin-bottom: var(--spacing-lg);
  }

  .sidebar-area {
    display: none;
  }

  /* 移动端全宽内容单列布局 */
  .full-width-content {
    display: block;
    margin-top: var(--spacing-lg);
  }

  .full-width-content .app-card {
    margin-bottom: var(--spacing-md);
  }

  /* 移动端头部优化 */
  .app-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  [data-theme="dark"] .app-header {
    background: rgba(15, 23, 42, 0.95);
  }

  .header-container {
    height: var(--header-height);
    padding: 0 var(--spacing-md);
  }

  /* 移动端卡片优化 */
  .app-card {
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
  }

  .app-card-header {
    padding: var(--spacing-md);
  }

  .app-card-body {
    padding: var(--spacing-md);
  }

  .app-card-title {
    font-size: var(--font-size-lg);
  }

  /* 移动端按钮优化 */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
  }

  .btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  /* 移动端表单优化 */
  .form-control {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
  }

  .form-control-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  /* 触摸优化 */
  .btn,
  .form-control,
  .mobile-nav-item {
    min-height: 44px; /* iOS推荐的最小触摸目标 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 移动端卡片优化 */
  .app-card {
    margin: 12px 0;
    border-radius: 20px;
  }

  .parser-card {
    border-radius: 24px;
  }

  .app-card-header {
    padding: 20px;
  }

  .app-card-body {
    padding: 20px;
  }

  /* 视频播放器调整 */
  .video-container {
    padding-bottom: 56.25%; /* 16:9 比例 */
    border-radius: 16px;
    overflow: hidden;
  }

  /* VIP特权移动端布局 */
  .vip-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* 使用说明移动端优化 */
  .usage-steps {
    gap: 12px;
  }

  .usage-step {
    padding: 16px;
    border-radius: 16px;
  }

  /* FAQ移动端优化 */
  .faq-item {
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .faq-question {
    padding: 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }

  /* 底部导航空间 */
  .app-footer {
    margin-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* 横屏模式 */
@media (max-width: 767px) and (orientation: landscape) {
  /* 视频播放器在横屏模式下优化 */
  .video-container {
    padding-bottom: 42%; /* 更宽的比例 */
  }
  
  /* 底部导航在横屏模式下调整 */
  .mobile-nav {
    height: 48px;
  }
  
  .mobile-nav-icon {
    font-size: 1.125rem;
    margin-bottom: 2px;
  }
  
  .mobile-nav-text {
    font-size: 0.7rem;
  }
}

/* 打印样式 */
@media print {
  .app-header,
  .app-footer,
  .mobile-nav,
  .floating-btn,
  .ad-container,
  .parser-form,
  .app-download-btn,
  .user-menu {
    display: none !important;
  }
  
  .app-main {
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  .app-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  .video-container {
    display: none;
  }
  
  .print-url {
    display: block;
    margin: 10px 0;
    font-style: italic;
  }
  
  .print-url::before {
    content: "视频链接: ";
    font-weight: bold;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #0000ff;
    --primary-dark: #0000cc;
    --secondary-color: #008000;
    --secondary-dark: #006600;
    --accent-color: #ff0000;
    --accent-dark: #cc0000;
    --text-color: #000000;
    --text-light: #333333;
    --text-lighter: #555555;
    --bg-color: #ffffff;
    --bg-dark: #f0f0f0;
    --bg-card: #ffffff;
    --border-color: #000000;
  }
  
  .app-card,
  .btn,
  .form-control {
    border: 1px solid #000;
  }
  
  a {
    text-decoration: underline;
  }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --secondary-color: #2ecc71;
    --secondary-dark: #27ae60;
    --accent-color: #e74c3c;
    --accent-dark: #c0392b;
    --text-color: #f5f5f5;
    --text-light: #cccccc;
    --text-lighter: #999999;
    --bg-color: #121212;
    --bg-dark: #1e1e1e;
    --bg-card: #2d2d2d;
    --border-color: #444444;
  }
  
  img {
    opacity: 0.8;
  }
  
  .app-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .form-control {
    background-color: #333;
    color: #f5f5f5;
    border-color: #444;
  }
  
  .form-control:focus {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4);
  }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  
  .fade-in,
  .slide-up {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}