/**
 * 全站壳层响应式补强（营销 / 用户门户 / 管理后台共用断点语义）
 *
 * 断点约定：
 * - 手机端 xs：≤479px
 * - 小屏 sm：480–639px
 * - 中屏 md：640–900px
 * - 大屏 lg：901–1279px
 * - 超大屏 xl：1280–1599px
 * - 超大屏 2xl：≥1600px
 *
 * 各应用须在主题 CSS 之后引入本文件。
 */

/* —— 用户门户 —— */
@media (min-width: 901px) {
  body.user-portal .header {
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
  }
}

@media (min-width: 1280px) {
  body.user-portal:not(.tg-chat-embed) .main {
    padding-inline: clamp(1.25rem, 2.5vw, 2rem);
  }
}

@media (min-width: 1600px) {
  body.user-portal:not(.tg-chat-embed) .main {
    padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  }
}

@media (max-width: 900px) {
  /* 移动导航已改为汉堡抽屉，见 user-portal-responsive.css */
}

@media (max-width: 640px) {
  body.user-portal .main {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  body.user-portal.tg-full-chat .main {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 480px) {
  body.user-portal .header {
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
  }
}

/* 登录 / 注册：兜底居中（本文件最后加载，覆盖其它壳层误伤） */
body.user-portal.auth-page,
body.user-portal:has(.auth-page) {
  display: grid !important;
  place-items: center;
  align-content: safe center;
}

body.user-portal.auth-page #root,
body.user-portal:has(.auth-page) #root {
  display: block !important;
  width: 100%;
  min-height: 100dvh;
}

body.user-portal.auth-page .auth-page,
body.user-portal:has(.auth-page) .auth-page {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  body.user-portal.auth-page,
  body.user-portal:has(.auth-page) {
    place-items: start center;
    align-content: start;
  }
}

/* —— 管理后台 —— */
@media (min-width: 1280px) {
  .admin-root .main-content {
    padding: 1.75rem clamp(1.25rem, 2vw, 2.25rem);
  }
}

@media (min-width: 1600px) {
  .admin-root .main-content {
    padding: 2rem clamp(1.5rem, 2.5vw, 3rem);
  }
}

@media (max-width: 640px) {
  .admin-root .main-content {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .tg-app-table--admin .tg-table-wrap {
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
  }

  .tg-app-table--admin .tg-table {
    min-width: 36rem;
  }

  .tg-app-table--admin .tg-table th,
  .tg-app-table--admin .tg-table td {
    padding: 0.65rem 0.75rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .admin-root .header h1 {
    font-size: 1.1rem;
  }

  .tg-app-table--admin .tg-table {
    min-width: 32rem;
  }
}

/* —— 营销静态页 —— */
@media (min-width: 1600px) {
  .header,
  .hero,
  .footer,
  .docs-container .main-content {
    padding-left: max(4%, 2rem) !important;
    padding-right: max(4%, 2rem) !important;
  }
}

@media (max-width: 640px) {
  .header,
  .hero {
    padding-left: max(4%, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4%, env(safe-area-inset-right, 0px)) !important;
  }
}