/* H5 responsive guard: keep mini-program-like pages full-width in mobile WebViews. */
:root {
  --mpx: 0.5px;
  --h5-page-pad: 24px;
  --h5-hero-gap: 16px;
}

.mp-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.mp-page[data-route="index"] .page,
.mp-page[data-route="news"] .nf-page,
.mp-page[data-route="member"] .page {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.mp-page[data-route="index"] .brand,
.mp-page[data-route="index"] .ipbar,
.mp-page[data-route="news"] .nf-head,
.mp-page[data-route="member"] .me-bar,
.mp-page[data-route="member"] .me-id {
  padding-left: var(--h5-page-pad);
  padding-right: var(--h5-page-pad);
}

.mp-page[data-route="index"] .brand {
  padding-top: 6px;
  padding-bottom: 16px;
}

.mp-page[data-route="index"] .brand-l {
  gap: 13px;
}

.mp-page[data-route="index"] .aha-mark,
.mp-page[data-route="index"] .aha-mark-img,
.mp-page[data-route="index"] .icon-btn {
  width: 38px;
  height: 38px;
}

.mp-page[data-route="index"] .search-icon {
  width: 21px;
  height: 21px;
}

.mp-page[data-route="index"] .brand-name {
  font-size: 22px;
}

.mp-page[data-route="index"] .brand-en {
  font-size: 13.5px;
  margin-top: 4px;
}

.mp-page[data-route="index"] .hero-banner {
  margin: 4px var(--h5-hero-gap) 14px;
  padding: 24px 22px 26px;
  border-radius: 16px;
}

.mp-page[data-route="index"] .tabs {
  display: flex;
  gap: 26px;
  padding: 2px var(--h5-page-pad) 0;
  justify-content: flex-start;
  border-bottom: 0.5px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.mp-page[data-route="index"] .tabs::-webkit-scrollbar {
  display: none;
}

.mp-page[data-route="index"] .tab {
  flex: 0 0 auto;
  min-width: auto;
  padding: 0 0 13px;
  border-radius: 0;
  background: transparent;
  color: var(--sub);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.mp-page[data-route="index"] .tab.on {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.mp-page[data-route="index"] .feed,
.mp-page[data-route="news"] .nf-feed {
  padding-left: var(--h5-page-pad);
  padding-right: var(--h5-page-pad);
  padding-bottom: calc(86px + var(--h5-safe-bottom));
}

.mp-page[data-route="index"] .card,
.mp-page[data-route="index"] .card.note {
  padding: 23px 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
}

.mp-page[data-route="news"] .nf-card {
  padding: 22px 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
}

.mp-page[data-route="index"] .card.note {
  padding-top: 19px;
  padding-bottom: 19px;
}

.mp-page[data-route="index"] .ctop {
  gap: 9px;
  margin-bottom: 13px;
}

.mp-page[data-route="index"] .ptype {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.mp-page[data-route="index"] .topics {
  font-size: 16px;
}

.mp-page[data-route="index"] .ctitle {
  font-size: 25px;
  line-height: 1.55;
  margin-bottom: 9px;
}

.mp-page[data-route="index"] .cprev {
  font-size: 18px;
  line-height: 1.78;
}

.mp-page[data-route="index"] .pod-row {
  gap: 11px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
}

.mp-page[data-route="index"] .pod-play {
  width: 32px;
  height: 32px;
}

.mp-page[data-route="index"] .pod-row-t {
  font-size: 17px;
}

.mp-page[data-route="index"] .pod-row-s {
  font-size: 14px;
  margin-top: 3px;
}

.mp-page[data-route="index"] .ctitle,
.mp-page[data-route="news"] .nf-title {
  text-align: left;
}

.mp-page[data-route="index"] .cprev,
.mp-page[data-route="index"] .note-body,
.mp-page[data-route="news"] .nf-prev {
  text-align: left;
}

.mp-page[data-route="news"] .nf-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding-left: 16px;
  padding-right: 16px;
}

.mp-page[data-route="news"] .nf-tab {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  white-space: nowrap;
}

.mp-page[data-route="news"] .nf-cover {
  height: clamp(178px, 50vw, 220px);
  border-radius: clamp(14px, 3.6vw, 18px);
}

.mp-page[data-route="news"] .nf-thumb {
  width: clamp(96px, 28vw, 122px);
  height: clamp(96px, 28vw, 122px);
  border-radius: clamp(12px, 3.2vw, 16px);
}

.mp-page[data-route="member"] .mcard,
.mp-page[data-route="member"] .me-list {
  margin-left: var(--h5-page-pad);
  margin-right: var(--h5-page-pad);
  border-radius: var(--h5-card-radius);
}

.mp-page[data-route="member"] .mcard {
  padding: clamp(18px, 5vw, 24px);
}

.mp-page[data-route="member"] .stats {
  padding-left: var(--h5-page-pad);
  padding-right: var(--h5-page-pad);
  gap: var(--h5-gap);
}

.mp-page[data-route="member"] .stat {
  border-radius: clamp(14px, 3.6vw, 18px);
  padding: clamp(15px, 4.2vw, 20px);
}

.mp-page[data-route="member"] .me-sec {
  padding-left: var(--h5-page-pad);
  padding-right: var(--h5-page-pad);
}

.mp-page[data-route="member"] .me-pad {
  height: calc(86px + var(--h5-safe-bottom));
}

/* Article detail needs its own guard. The page CSS was ported from Mini Program
   rpx/vw sizing, so keep the H5 shell full-width and let only readable text breathe. */
.mp-page[data-route="article"] .page {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

.mp-page[data-route="article"] .navbar,
.mp-page[data-route="article"] .actionbar,
.mp-page[data-route="article"] .input-panel,
.mp-page[data-route="article"] .share-sheet {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.mp-page[data-route="article"] .art,
.mp-page[data-route="article"] .comments {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-left: var(--h5-page-pad);
  padding-right: var(--h5-page-pad);
}

.mp-page[data-route="article"] .art {
  padding-top: clamp(18px, 5vw, 28px);
}

.mp-page[data-route="article"] .ctop {
  gap: 9px;
}

.mp-page[data-route="article"] .ptype {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.mp-page[data-route="article"] .topics {
  font-size: 14px;
}

.mp-page[data-route="article"] .atitle {
  font-size: clamp(29px, 8vw, 38px);
  line-height: 1.46;
  margin: 18px 0 24px;
  letter-spacing: 0;
}

.mp-page[data-route="article"] .avatar {
  width: 42px;
  height: 42px;
}

.mp-page[data-route="article"] .au-name {
  font-size: 15px;
  gap: 7px;
}

.mp-page[data-route="article"] .au-meta {
  font-size: 13px;
  margin-top: 4px;
}

.mp-page[data-route="article"] .rule {
  margin: 22px 0 4px;
}

.mp-page[data-route="article"] .player,
.mp-page[data-route="article"] .pod-intro,
.mp-page[data-route="article"] .guests-box,
.mp-page[data-route="article"] .op {
  width: 100%;
  box-sizing: border-box;
}

.mp-page[data-route="article"] .player {
  gap: 13px;
  padding: 15px 16px;
  margin: 18px 0 24px;
  border-radius: 16px;
}

.mp-page[data-route="article"] .play-btn {
  width: 46px;
  height: 46px;
}

.mp-page[data-route="article"] .player-t {
  font-size: 15px;
}

.mp-page[data-route="article"] .player-s,
.mp-page[data-route="article"] .atimes {
  font-size: 12px;
}

.mp-page[data-route="article"] .speed-btn {
  font-size: 12px;
  padding: 4px 8px;
}

.mp-page[data-route="article"] .body {
  width: 100%;
  min-width: 0;
  padding-top: 2px;
}

.mp-page[data-route="article"] .body-p,
.mp-page[data-route="article"] .dlg-p,
.mp-page[data-route="article"] .op-t {
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

.mp-page[data-route="article"] .body-p {
  font-size: clamp(18px, 4.8vw, 21px);
  line-height: 1.95;
  margin-bottom: 1.6em;
  letter-spacing: 0;
}

.mp-page[data-route="article"] .body-h2 {
  font-size: clamp(22px, 5.8vw, 28px);
  margin: 2.2em 0 0.9em;
}

.mp-page[data-route="article"] .body-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.mp-page[data-route="article"] .op {
  margin: 30px 0;
  padding: 20px 22px;
  border-radius: 14px;
}

.mp-page[data-route="article"] .op-t {
  font-size: clamp(18px, 4.8vw, 21px);
  line-height: 1.78;
}

.mp-page[data-route="article"] .pod-intro,
.mp-page[data-route="article"] .guests-box {
  padding: 18px;
  border-radius: 16px;
}

.mp-page[data-route="article"] .pod-intro-p {
  font-size: 15px;
  line-height: 1.78;
}

.mp-page[data-route="article"] .dlg-p {
  padding-left: 40px;
  font-size: clamp(17px, 4.5vw, 20px);
  line-height: 1.86;
  letter-spacing: 0;
}

.mp-page[data-route="article"] .comments {
  padding-top: 16px;
}

.mp-page[data-route="article"] .paywall {
  margin-left: calc(-1 * var(--h5-page-pad));
  margin-right: calc(-1 * var(--h5-page-pad));
  padding-left: var(--h5-page-pad);
  padding-right: var(--h5-page-pad);
  border-radius: 22px 22px 0 0;
}

.mp-page[data-route="article"] .pw-sub {
  max-width: none;
}

.mp-page[data-route="article"] .ab-input {
  min-width: 0;
}