/* ===== 响应式优化 ===== */

/* 平板设备 (宽度 ≤ 900px) */
@media (max-width: 900px) {
  .doc-main {
    flex-direction: column !important;
  }
  .sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  .grid-2col {
    grid-template-columns: 1fr !important;
  }
  .img-wrapper {
    padding: 0.5rem !important;
  }
  .step-card {
    padding: 1rem !important;
  }
}

/* 手机设备 (宽度 ≤ 600px) */
@media (max-width: 600px) {
  body {
    padding: 0.8rem !important;
  }
  .doc-header {
    padding: 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .home-badge {
    margin-left: 0 !important;
  }
  .content-pane {
    padding: 1rem !important;
  }
  h1 {
    font-size: 1.5rem !important;
  }
  h2 {
    font-size: 1.3rem !important;
  }
  .step-title {
    font-size: 1.1rem !important;
  }
  .directory .dir-item {
    padding-left: 1rem !important;
    font-size: 0.85rem !important;
  }
  .directory ul li .dir-item {
    padding-left: 1.8rem !important;
  }
  .directory ul ul li .dir-item {
    padding-left: 2.6rem !important;
  }
  .grid-2col {
    gap: 1rem !important;
  }
  .feature-card, .compare-card {
    padding: 1rem !important;
  }
  .price-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .price-tag {
    font-size: 1.5rem !important;
  }
  .img-wrapper img {
    max-height: 200px !important;
    object-fit: contain !important;
  }
  .meta-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .author-info {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
}

/* 超小屏 (宽度 ≤ 400px) */
@media (max-width: 400px) {
  .directory .dir-item {
    white-space: normal !important;
    line-height: 1.3 !important;
    padding: 0.4rem 0.5rem !important;
  }
  .step-number {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.8rem !important;
  }
  .finish-tip {
    flex-wrap: wrap !important;
  }
}