/* =====================================================
   Responsive - 响应式断点 v4.1
   ===================================================== */

/* ---- Tablet (>= 768px) ---- */
@media (min-width: 768px) {
  :root {
    --content-max: 720px;
  }

  .badge-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .page {
    padding: var(--space-4) var(--space-6);
  }
}

/* ---- Desktop (>= 1024px) ---- */
@media (min-width: 1024px) {
  :root {
    --content-max: 960px;
  }

  .app-header {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: var(--space-4);
  }

  /* Desktop: 保持底部横向Tab栏，加宽容器 */
  .tab-bar {
    max-width: var(--content-max);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .page-content {
    padding: var(--space-6);
    padding-bottom: calc(var(--tabbar-height) + var(--space-8));
  }
}

/* ---- Small phones (<= 360px) ---- */
@media (max-width: 360px) {
  :root {
    --text-base: 13px;
    --text-lg: 15px;
    --text-xl: 17px;
    --text-2xl: 20px;
  }

  .page {
    padding: var(--space-2) var(--space-3);
  }

  .badge-grid {
    gap: var(--space-2);
  }

  .badge-icon {
    font-size: 28px;
  }

  /* 小屏幕下Tab图标略小 */
  .tab-icon {
    font-size: 18px;
  }

  .tab-label {
    font-size: 9px;
  }
}

/* ---- Safe area for notched devices ---- */
@supports (padding: env(safe-area-inset-top)) {
  .app-header {
    padding-top: calc(env(safe-area-inset-top) + var(--space-3));
  }

  .tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}