.xfp-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 16px 20px 24px;
  color: #292929;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.main.screen-main:has(> .xfp-page) { overflow-y: auto; }
.xfp-page *, .xfp-page *::before, .xfp-page *::after { box-sizing: border-box; }
.xfp-page button, .xfp-page input { font: inherit; }
.xfp-page button {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.xfp-page button:disabled { opacity: .5; cursor: default; }
.xfp-page button:focus-visible { outline: 2px solid #f52851; outline-offset: 3px; }
.xfp-page .xfp-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.xfp-page .xfp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 620px; margin: 0 auto; }
.xfp-page .xfp-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 12px; border-radius: 7px; background: #fff; color: #343434; font-size: 13px; line-height: 20px; }
.xfp-page .xfp-toolbar .xfp-upload { color: #fff; background: #f62850; }
.xfp-page .xfp-file[hidden] { display: none !important; }
.xfp-page .xfp-notice { min-height: 28px; max-width: 620px; margin: 0 auto 8px; padding: 4px 0; color: #656565; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.xfp-page .xfp-notice--error { color: #c52d42; }
.xfp-page .xfp-device {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 390px);
  aspect-ratio: 390 / 844;
  max-width: 390px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  color: #303030;
  box-shadow: 0 4px 24px #0000000b;
  -webkit-font-smoothing: antialiased;
}
.xfp-page .xfp-header { flex: 0 0 auto; height: 23.589744cqw; padding: 0; margin: 0; background: #fff; color: #292929; border: 0; }
.xfp-page .xfp-status-bar { display: flex; align-items: flex-start; justify-content: space-between; height: 12.564103cqw; padding: 3.974359cqw 4.871795cqw 0 8.461538cqw; font-size: 4.102564cqw; font-weight: 650; line-height: 5.128205cqw; color: #050505; }
.xfp-page .xfp-time { display: block; white-space: nowrap; letter-spacing: -.128205cqw; }
.xfp-page .xfp-status-icons { display: flex; align-items: center; gap: 1.538462cqw; height: 5.128205cqw; padding-top: .25641cqw; }
.xfp-page .xfp-signal { display: block; width: 4.871795cqw; height: 4.358974cqw; fill: currentColor; }
.xfp-page .xfp-wifi { display: block; width: 4.871795cqw; height: 4.358974cqw; fill: currentColor; }
.xfp-page .xfp-battery { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .25641cqw; width: 5.897436cqw; height: 3.846154cqw; border: .25641cqw solid #d0d0d0; border-radius: 1.025641cqw; font-size: 3.333333cqw; line-height: 3.846154cqw; font-weight: 700; background: linear-gradient(90deg, #f4d930 0 72%, #e7e7e7 72% 100%); }
.xfp-page .xfp-battery::after { position: absolute; right: -.769231cqw; top: 1.025641cqw; width: .512821cqw; height: 1.282051cqw; border-radius: 0 .25641cqw .25641cqw 0; content: ""; background: #bdbdbd; }
.xfp-page .xfp-battery svg { display: block; width: 1.282051cqw; height: 2.307692cqw; }
.xfp-page .xfp-topnav { display: grid; grid-template-columns: 18.461538cqw 1fr 18.461538cqw; align-items: center; height: 11.025641cqw; border-bottom: .25641cqw solid #f3f3f3; }
.xfp-page .xfp-menu, .xfp-page .xfp-search { display: flex; align-items: center; justify-content: center; height: 100%; }
.xfp-page .xfp-menu { padding-right: 4.358974cqw; }
.xfp-page .xfp-search { padding-left: 3.846154cqw; }
.xfp-page .xfp-menu .xfp-icon { width: 5.128205cqw; height: 5.128205cqw; }
.xfp-page .xfp-search .xfp-icon { width: 5.641026cqw; height: 5.641026cqw; }
.xfp-page .xfp-tabs { display: flex; align-items: center; justify-content: center; gap: 7.435897cqw; align-self: stretch; white-space: nowrap; font-size: 4.102564cqw; line-height: 6.153846cqw; color: #9a9a9a; }
.xfp-page .xfp-tabs > span { position: relative; display: flex; align-items: center; height: 100%; padding-bottom: 1.025641cqw; }
.xfp-page .xfp-tabs .xfp-tab-active { color: #252525; font-weight: 650; }
.xfp-page .xfp-tab-active::after { position: absolute; bottom: 1.794872cqw; left: 50%; width: 6.923077cqw; height: .512821cqw; border-radius: 99px; background: #ff244b; transform: translateX(-50%); content: ""; }
.xfp-page .xfp-feed { position: relative; flex: 1 1 auto; min-height: 0; padding: 3.333333cqw 1.282051cqw 1.282051cqw; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: #fafafa; outline-offset: -2px; -webkit-overflow-scrolling: touch; }
.xfp-page .xfp-feed::-webkit-scrollbar { display: none; }
.xfp-page .xfp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.282051cqw; align-items: stretch; width: 100%; margin: 0; padding: 0; }
.xfp-page .xfp-card { min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 1.025641cqw; background: #fff; box-shadow: none; }
.xfp-page .xfp-cover { position: relative; width: 100%; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; background: #f0f0f0; border-radius: 1.025641cqw 1.025641cqw 0 0; }
.xfp-page .xfp-cover img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; object-fit: contain; }
.xfp-page .xfp-image-placeholder { position: absolute; inset: 0; display: block; background: #f0f0f0; }
.xfp-page .xfp-image-retry { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 2.564103cqw; color: #777; background: #f3f3f3; font-size: 3.076923cqw; line-height: 5.128205cqw; }
.xfp-page .xfp-image-retry span { color: #ad4056; }
.xfp-page .xfp-card-info { padding: 2.564103cqw 2.820513cqw 2.051282cqw; }
.xfp-page .xfp-title { display: -webkit-box; min-height: 0; margin: 0; padding: 0; overflow: hidden; color: #303030; font-size: 3.589744cqw; font-weight: 500; line-height: 5.384615cqw; letter-spacing: 0; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xfp-page .xfp-meta { display: flex; align-items: center; gap: 1.282051cqw; min-width: 0; height: 5.128205cqw; margin-top: 2.051282cqw; padding: 0; color: #838383; font-size: 3.333333cqw; font-weight: 400; line-height: 5.128205cqw; white-space: nowrap; }
.xfp-page .xfp-avatar { display: block; flex: 0 0 auto; width: 4.615385cqw; height: 4.615385cqw; overflow: hidden; border-radius: 50%; }
.xfp-page .xfp-avatar svg { display: block; width: 100%; height: 100%; }
.xfp-page .xfp-nickname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xfp-page .xfp-likes { display: flex; flex: 0 0 auto; align-items: center; gap: .769231cqw; }
.xfp-page .xfp-likes .xfp-icon { width: 3.589744cqw; height: 3.589744cqw; color: #999; }
.xfp-page .xfp-bottomnav { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; flex: 0 0 auto; height: 20.25641cqw; margin: 0; padding: 1.794872cqw 2.051282cqw 8.974359cqw; border-top: .25641cqw solid #f8f8f8; background: #fff; color: #929292; font-size: 4.358974cqw; line-height: 6.153846cqw; text-align: center; }
.xfp-page .xfp-bottomnav > span { display: block; padding-top: 1.794872cqw; white-space: nowrap; }
.xfp-page .xfp-bottomnav .xfp-bottom-active { color: #292929; font-weight: 650; }
.xfp-page .xfp-bottomnav .xfp-add { display: flex; align-items: center; justify-content: center; justify-self: center; width: 11.794872cqw; height: 8.717949cqw; padding: 0; border-radius: 2.564103cqw; background: #ff234d; color: #fff; transform: rotate(-1deg); }
.xfp-page .xfp-add .xfp-icon { width: 6.153846cqw; height: 6.153846cqw; stroke-width: 3.5; }
.xfp-page .xfp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 123.076923cqw; padding: 7.692308cqw 3.846154cqw; color: #777; text-align: center; }
.xfp-page .xfp-empty p { margin: 0 0 2.051282cqw; color: #555; font-size: 3.589744cqw; line-height: 5.641026cqw; }
.xfp-page .xfp-empty span { max-width: 100%; color: #999; font-size: 2.820513cqw; line-height: 4.615385cqw; }
.xfp-page .xfp-empty button { margin-top: 5.128205cqw; padding: 2.051282cqw 4.615385cqw; border-radius: 1.794872cqw; color: #fff; background: #ff244b; font-size: 3.333333cqw; line-height: 5.128205cqw; }
.xfp-page .xfp-load-more { min-height: 10.25641cqw; padding: 2.564103cqw; color: #999; font-size: 2.820513cqw; line-height: 5.128205cqw; text-align: center; }
.xfp-page .xfp-load-more button { padding: 1.282051cqw 2.564103cqw; border-radius: 1.282051cqw; color: #858585; background: transparent; font-size: inherit; line-height: inherit; }
.xfp-page .xfp-list-end { height: 1.282051cqw; }
@media (max-width: 520px) {
  .xfp-page { padding: 8px 0 16px; }
  .xfp-page .xfp-toolbar, .xfp-page .xfp-notice { width: calc(100% - 20px); }
  .xfp-page .xfp-device { box-shadow: none; }
}