html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 198, 207, 0.42) 0, rgba(249, 198, 207, 0) 360px),
    linear-gradient(180deg, #f7f0eb 0%, #fff8f4 46%, #fffdfb 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 198, 207, 0.42) 0, rgba(249, 198, 207, 0) 360px),
    linear-gradient(180deg, #f7f0eb 0%, #fff8f4 46%, #fffdfb 100%);
}

#app,
uni-app,
uni-page,
uni-page-wrapper,
uni-page-body {
  background: transparent !important;
}

uni-page-body {
  min-height: 100vh;
}

uni-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(249, 198, 207, 0.42) 0, rgba(249, 198, 207, 0) 330px),
    linear-gradient(180deg, #f7f0eb 0%, #fff8f4 360px, #fffdfb 100%) !important;
}

.home-toolbar {
  padding-top: 18px !important;
}

.search-button {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(198, 90, 123, 0.1);
  box-shadow: 0 10px 28px rgba(96, 64, 58, 0.1) !important;
}

.mlr-16.bg-w.ptb-20.plr-20.radius-8.mb-16 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 249, 0.98) 100%) !important;
  border: 1px solid rgba(198, 90, 123, 0.08);
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(96, 64, 58, 0.08);
}

.mlr-16.bg-w.ptb-20.plr-20.radius-8.mb-16 + .mlr-16.bg-w.ptb-20.plr-20.radius-8.mb-16 {
  margin-top: 18px !important;
}

.bg-g5 {
  background: rgba(198, 90, 123, 0.08) !important;
}

/* Most Popular: three rows per column with real horizontal overflow. */
.grid-box-row {
  width: max-content !important;
  grid-auto-columns: min(65.6vw, 341px) !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  padding: 2px 2px 2px 0 !important;
  box-sizing: border-box;
}

.grid-box-row > .relative.flex {
  width: min(65.6vw, 341px) !important;
  height: min(24.53vw, 128px) !important;
  min-width: 0;
  margin-right: 0 !important;
}

.grid-box-row > .relative.flex > uni-image.w-74 {
  width: min(19.73vw, 103px) !important;
  height: min(24.53vw, 128px) !important;
  margin-right: 10px !important;
  border-radius: 8px !important;
}

.grid-box-row .w-160 {
  width: calc(min(65.6vw, 341px) - min(19.73vw, 103px) - 10px) !important;
  min-width: 0;
  padding: 2px 0 1px;
  box-sizing: border-box;
}

.grid-box-row .w-160 .size-16 {
  margin-bottom: 4px !important;
  color: #2f2b2b;
  font-size: 14px !important;
  line-height: 20px !important;
}

.grid-box-row .w-160 .size-12.text-ellipsis-2 {
  display: block;
  font-size: 11px !important;
  line-height: 15px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid-box-row .w-160 > .flex-l.over-hidden {
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow: hidden;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.grid-box-row .w-160 > .flex-l.over-hidden > uni-view {
  display: block;
  max-width: 82px;
  height: 20px;
  margin: 0 !important;
  padding: 0 7px !important;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 10px !important;
  color: #8d8588 !important;
  font-size: 10px !important;
  line-height: 20px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-box-row .range-mark > .relative {
  width: 20px;
  height: 20px;
}

.grid-box-row .range-mark > .relative > uni-image {
  display: block;
  width: 20px !important;
  height: 20px !important;
}

.grid-box-row .range-num {
  top: 7px !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  width: 20px !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 12px !important;
  text-align: center !important;
  transform: none !important;
}

/* Ranked list page uses lc-list rather than the horizontal home component. */
uni-page .bg-w.mb-20.flex .range-mark > .relative {
  width: 20px;
  height: 20px;
}

uni-page .bg-w.mb-20.flex .range-mark > .relative > uni-image {
  display: block;
  width: 20px !important;
  height: 20px !important;
}

uni-page .bg-w.mb-20.flex .range-num {
  top: 7px !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  width: 20px !important;
  height: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 12px !important;
  text-align: center !important;
  transform: none !important;
}

/* For you book cards use lc-list instead of the ranked grid component. */
uni-page .bg-w.mb-20.flex > .over-hidden.flex.flex-between.flex-column > .flex-l.over-hidden {
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow: hidden;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

uni-page .bg-w.mb-20.flex > .over-hidden.flex.flex-between.flex-column > .flex-l.over-hidden > uni-view {
  display: block;
  max-width: 82px;
  height: 20px;
  margin: 0 !important;
  padding: 0 7px !important;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 10px !important;
  color: #8d8588 !important;
  font-size: 10px !important;
  line-height: 20px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

uni-scroll-view:has(.grid-box-row) {
  width: 100%;
  touch-action: pan-x;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

uni-scroll-view:has(.grid-box-row) .uni-scroll-view::-webkit-scrollbar {
  display: none;
}

uni-tabbar,
uni-tabbar .uni-tabbar,
uni-tabbar .uni-tabbar-bottom {
  background: transparent !important;
}

uni-tabbar::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(88px + env(safe-area-inset-bottom));
  z-index: 998;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 253, 251, 0) 0%, #fffdfb 42%, #fffdfb 100%);
}

uni-tabbar .uni-tabbar {
  z-index: 999 !important;
  border-top: 1px solid rgba(198, 90, 123, 0.08) !important;
  box-shadow: 0 -12px 36px rgba(96, 64, 58, 0.08);
  background: rgba(255, 253, 251, 0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media screen and (min-width: 768px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(249, 198, 207, 0.42) 0, rgba(249, 198, 207, 0) 360px),
      linear-gradient(180deg, #f7f0eb 0%, #fff8f4 46%, #fffdfb 100%) !important;
  }

  uni-page {
    width: 520px !important;
    margin: 0 auto !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(249, 198, 207, 0.42) 0, rgba(249, 198, 207, 0) 330px),
      linear-gradient(180deg, #f7f0eb 0%, #fff8f4 360px, #fffdfb 100%) !important;
  }

  uni-tabbar .uni-tabbar {
    left: 50% !important;
    right: auto !important;
    width: 520px !important;
    max-width: 520px !important;
    transform: translateX(-50%);
    border-radius: 22px 22px 0 0;
    overflow: hidden;
  }
}