/* Runtime-only foundation for the native prototype screens. Keep the
   overview page stylesheet out of this file so screen CSS stays pixel-stable. */
html,
body {
  min-width: 0 !important;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #f5f5f7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
textarea,
select {
  font: inherit;
}

uni-page-wrapper,
uni-page-body,
#app {
  min-height: 100%;
  background: #f5f5f7;
}

.naiman-prototype-screen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #f5f5f7;
  /* Keep the page itself from creating a second vertical scrollbar. The
     standalone source scrolls the document around its fixed 812px canvas. */
  overflow: visible !important;
}

/* UniApp's H5 shell normally fixes `uni-page-wrapper` to the browser
   viewport and owns the scrollbar. The standalone prototype uses the
   document as the scroll container, so restore that shell behavior globally
   (these selectors must not be scoped by Vue). */
@media (min-width: 431px) {
  html:has(.naiman-prototype-screen) {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
  }

  /* The document (html) owns the scrollbar; body stays transparent like the
     standalone source and must not create a second gutter. */
  body:has(.naiman-prototype-screen) {
    overflow: visible !important;
  }

  uni-page:has(.naiman-prototype-screen),
  uni-page-wrapper:has(.naiman-prototype-screen) {
    height: auto !important;
    min-height: 812px !important;
    overflow: visible !important;
  }

  uni-page-wrapper:has(.naiman-prototype-screen)::after {
    display: none !important;
    height: 0 !important;
  }

  .naiman-prototype-screen {
    min-height: 812px;
    overflow: visible !important;
  }
}

@media (max-width: 430px) {
  html:has(.naiman-prototype-screen),
  body:has(.naiman-prototype-screen),
  uni-page:has(.naiman-prototype-screen),
  uni-page-wrapper:has(.naiman-prototype-screen) {
    overflow: hidden !important;
  }

  .naiman-prototype-screen {
    overflow: visible !important;
  }
}

/* The base SparkShop stylesheet gives every native button an 80upx line
   height and a larger font. Keep this reset deliberately low-specificity so
   the prototype utility classes (w-11, h-11, bg-gray-100, px-*, etc.) retain
   their source measurements and colors. */
:where(.naiman-prototype-screen .prototype-page) button,
:where(.naiman-prototype-screen .prototype-page) uni-button {
  height: auto;
  margin: 0;
  padding: 0;
  position: static;
  overflow: visible;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Match the source prototype's global type stack and inherited ink color. */
.naiman-prototype-screen .prototype-page {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: #24262b;
}

/* Production H5 renders buttons through v-uni-button, so slotted children
   do not always carry the page scope attribute. Keep the home icon group
   stable with unscoped selectors as well as the source page styles. */
.naiman-prototype-screen .prototype-page .icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 68px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}

.naiman-prototype-screen .prototype-page .icon-item .icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff4ec, #fff8f5);
  color: #ff5e3a;
  font-size: 18px;
  line-height: 1;
}

.naiman-prototype-screen .prototype-page .icon-item .icon-label {
  color: #333;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

/* Home promotion lists are rebuilt from the admin response with innerHTML.
   Their replacement nodes do not receive Vue's scope attribute, so keep the
   visual contract here in the runtime stylesheet as well as in home.vue. */
.naiman-prototype-screen .prototype-page.page-user-home .coupon-list {
  display: grid;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-item {
  min-height: 76px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #ececec;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-item:last-child {
  border-bottom: 0;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-value {
  color: #ff5e3a;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-value::before {
  content: "¥";
  font-size: 12px;
  margin-right: 1px;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-threshold {
  margin-top: 5px;
  color: #8b8f97;
  font-size: 9px;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-kind {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff4ec;
  color: #e84a26;
  font-size: 9px;
  font-weight: 700;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-title {
  margin-top: 5px;
  color: #292b30;
  font-size: 12px;
  font-weight: 700;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-meta {
  margin-top: 3px;
  color: #8b8f97;
  font-size: 9px;
  line-height: 1.4;
}

.naiman-prototype-screen .prototype-page.page-user-home .coupon-claim {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid #ff5e3a;
  border-radius: 22px;
  background: #fff;
  color: #ff5e3a;
  font-size: 11px;
  font-weight: 700;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-list {
  display: grid;
  gap: 10px;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-item {
  min-height: 72px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-thumb {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: #fff4ec;
  color: #e84a26;
  font-size: 9px;
  font-weight: 700;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-name {
  margin-top: 5px;
  color: #292b30;
  font-size: 12px;
  font-weight: 700;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-price {
  margin-top: 5px;
  color: #ff5e3a;
  font-size: 13px;
  font-weight: 800;
}

.naiman-prototype-screen .prototype-page.page-user-home .points-arrow {
  width: 30px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #b0b3b8;
}

/* The source overview promotes bottom controls to the phone frame. The
   generated UniApp pages do the same in normalizeLayout(); keep the exact
   positioning and hit-area behavior here. */
.naiman-prototype-screen .prototype-stage .phone-frame > .prototype-fixed-bottom {
  position: absolute !important;
  inset: auto 0 0 !important;
  z-index: 120 !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.naiman-prototype-screen .prototype-stage .prototype-nowrap,
.naiman-prototype-screen .prototype-stage button,
.naiman-prototype-screen .prototype-stage [role="button"],
.naiman-prototype-screen .prototype-stage .btn,
.naiman-prototype-screen .prototype-stage [class$="-btn"],
.naiman-prototype-screen .prototype-stage [class*="-btn "],
.naiman-prototype-screen .prototype-stage [class$="-button"],
.naiman-prototype-screen .prototype-stage [class*="-button "] {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}