html,
body {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior: none !important;
  background: hsl(var(--background, 0 0% 98%)) !important;
}

body {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.overflow-y-auto,
#scroll-content,
#debt-list-container,
.settings-scroll {
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-panel {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: hsl(var(--card, 0 0% 100%));
  border-radius: 16px 16px 0 0;
  padding: 24px;
}

.slide-up {
  animation: shellSlideUp 0.25s ease-out;
}

.fade-in {
  animation: shellFadeIn 0.2s ease-out;
}

@keyframes shellSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes shellFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 原型页面自带 375x812 手机壳，嵌入 web-view 后需要铺满真实屏幕。 */
#phone-container,
body > div:first-of-type[class*="w-[375px]"],
body > div:first-of-type[style*="width:375px"] {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* 隐藏 HTML 原型里的模拟系统状态栏，真实状态栏由小程序/App 容器负责。 */
#phone-container > div:first-child.px-6.pt-4,
body > div:first-of-type > div:first-child.px-6.pt-4 {
  display: none !important;
}

#top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  background: hsl(var(--background, 0 0% 98%)) !important;
  box-sizing: border-box !important;
  height: calc(72px + env(safe-area-inset-top)) !important;
  min-height: calc(72px + env(safe-area-inset-top)) !important;
  padding: calc(28px + env(safe-area-inset-top)) 24px 12px !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06) !important;
}

#scroll-content {
  height: calc(100vh - 132px - env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding-bottom: calc(200px + env(safe-area-inset-bottom)) !important;
}

#debt-list-container {
  padding-bottom: calc(200px + env(safe-area-inset-bottom)) !important;
}

/* 常见底部导航从原型容器内 absolute 改为真实屏幕 fixed。 */
#phone-container > .absolute.bottom-0,
body > div:first-of-type > .absolute.bottom-0,
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  z-index: 60 !important;
}

.modal-panel,
.fixed.bottom-0.left-1\/2 {
  width: 100vw !important;
  max-width: 100vw !important;
}