@import url("figma.css");

:root {
  --nav-height: 76px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 预留系统状态栏（信号/电量）；有刘海时取更大值 */
  --safe-top: max(44px, env(safe-area-inset-top, 0px));
}

html {
  width: 100%;
  height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #fff;
}

body.single-page {
  display: block !important;
  width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: unset !important;
  background: #fff !important;
  overflow-x: hidden;
}

.single-stage {
  display: block !important;
  width: 100% !important;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  place-items: unset !important;
}

/* 覆盖 figma 设计稿里的固定手机框尺寸 */
.single-stage .phone,
body.single-page .phone {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: #fff !important;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  scroll-snap-align: unset !important;
}

/* 首页：上部固定，列表区独立滚动 */
.single-stage .phone.home,
body.single-page .phone.home {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

.phone > .page-title {
  padding-top: 12px;
}

.phone.detail .visual {
  margin-top: calc(var(--safe-top) * -1);
  padding-top: calc(var(--safe-top) + 72px);
}

.mobile-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  height: calc(var(--nav-height) + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom);
  z-index: 30;
  box-sizing: border-box;
}

body.admin-page {
  min-width: 1440px;
  min-height: 1000px;
  background: #f7f4ef;
}

.admin-stage {
  width: 1440px;
  margin: 0 auto;
}

.admin-stage .admin {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}