* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #eeeeee;
  --line: #d3d3d3;
  --text: #2e2e2e;
  --muted: #777777;
  --danger: #d60000;
  --dark: #111111;
  --yellow: #eff100;
  --sat: constant(safe-area-inset-top);
  --sat: env(safe-area-inset-top, 0px);
  --sab: constant(safe-area-inset-bottom);
  --sab: env(safe-area-inset-bottom, 0px);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #eeeeee;
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.app {
  width: min(100vw, 430px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
  /* WebClip / 刘海机：顶栏避开状态栏（搜索钮不再顶到电量） */
  padding-top: var(--sat);
  box-sizing: border-box;
}

.view {
  min-height: calc(100vh - 70px);
  background: var(--bg);
}

/* 开屏与苹果 WebClip / APK 一致：奶油底 + 圆角馒图标 */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #FDF3D2;
  color: #333;
  transition: opacity .45s ease, visibility .45s ease;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
  padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0);
}

.splash-logo {
  width: min(72vw, 280px);
  height: auto;
  max-height: 72vh;
  border-radius: 18px;
  object-fit: contain;
  display: block;
  background: transparent;
}

.splash-logo.is-icon {
  width: 120px;
  height: 120px;
  border-radius: 26.5px; /* ≈ iOS 图标连续圆角 */
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(120, 80, 20, 0.14);
}

.splash-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.42);
  border-radius: 50%;
  animation: splash-spin .7s linear infinite;
}

.splash-tip {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #666666;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}

@keyframes splash-spin {
  to { transform: rotate(360deg); }
}

.splash h1 {
  margin: 0;
  color: #c80000;
  font-size: 54px;
  line-height: 1;
  text-align: center;
  font-weight: 900;
}

.splash p {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.ad-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 60px;
  background: #e8d34a;
  overflow: visible;
}

.ad-banner.hidden {
  display: none !important;
}

.ad-banner-link {
  display: block;
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.ad-banner-img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: cover;
}

.ad-banner-img[hidden],
.ad-banner-placeholder[hidden],
.ad-banner-promo[hidden] {
  display: none !important;
}

.ad-banner-promo {
  display: block;
  width: 100%;
  height: 60px;
  border: 0;
  pointer-events: auto;
  background: #e8d34a;
}

.ad-banner-placeholder {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 36px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1c1917;
  background: #e8d34a;
  white-space: nowrap;
  overflow: hidden;
}

.ad-banner-brand {
  flex: 0 0 auto;
  margin-right: 8px;
  font-weight: 900;
  font-size: 14px;
  color: #1c1917;
}

.ad-banner-tip {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  color: #1c1917;
}

.ad-banner button#closeAd,
.ad-banner #closeAd {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  color: #444444;
  background: rgba(0, 0, 0, .18);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
}

/* 首页：对齐 YS APK —— 顶栏固定，仅视频区内部滚动 */
html.home-scroll-lock,
html.home-scroll-lock body {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  /* 业务区未撑开时不要露出纯黑底 */
  background: #eeeeee !important;
}

.app.home-mode {
  /* fixed 锁死视口，避免 iOS 下滑时整页跟着滚、顶栏被顶没 */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 状态栏下方垫白，与顶栏一致；内容区仍用 --bg */
  background: #ffffff;
  padding-top: var(--sat);
  padding-bottom: 0;
  box-sizing: border-box;
}

.app.home-mode .ad-banner {
  position: relative;
  flex: 0 0 60px;
  top: auto;
  z-index: 5;
  overflow: visible;
}

.app.home-mode .ad-banner.hidden {
  flex: 0 0 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
}

.app.home-mode .view {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.home-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

.home-chrome {
  flex: 0 0 auto;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.home-chrome .top-nav,
.home-chrome .box-rank-row,
.home-chrome .search-chip {
  background: #ffffff;
}

.home-chrome .category-row {
  background: var(--yellow);
}

.home-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg);
  padding-bottom: var(--sab);
}

/* 兼容旧 class 名（避免残留） */
.home-sticky {
  flex: 0 0 auto;
}

.ad-banner img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: fill;
  pointer-events: none;
}

.top-nav,
.page-bar {
  height: 52px;
  display: grid;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.top-nav {
  grid-template-columns: 58px 1fr 1fr 1fr 58px;
}

.top-nav .menu,
.top-nav .search,
.page-bar .back,
.page-bar .right {
  height: 62px;
  display: grid;
  place-items: center;
  color: #333333;
}

.top-nav .menu,
.top-nav .search,
.page-bar .back,
.page-bar .right {
  height: 52px;
}


/* ===== menu hints (片库更新 / 新消息) ===== */
.menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  overflow: visible;
}
.menu-wrap .menu {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
/* 消息气泡：挂在三道杠右上外侧 */
.menu-hints {
  position: absolute;
  left: 34px;
  top: 4px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 5;
  pointer-events: auto;
  max-width: none;
}
.menu-hints.is-multi {
  top: 2px;
  gap: 4px;
}
.menu-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 3px 8px;
  border: 0;
  border-radius: 12px 12px 12px 4px;
  background: #ff3b30;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  -webkit-font-smoothing: antialiased;
}
/* 小三角：指向左侧汉堡 */
.menu-hint::before {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 5px 4px 0;
  border-color: transparent #ff3b30 transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.08));
}
.menu-hint:active {
  transform: scale(0.96);
  opacity: 0.92;
}
.menu-hint-lib {
  background: #ff9500;
  border-radius: 12px 12px 12px 4px;
}
.menu-hint-lib::before {
  border-color: transparent #ff9500 transparent transparent;
}
.menu-hint-msg {
  background: #ff3b30;
}
.menu-hint-msg::before {
  border-color: transparent #ff3b30 transparent transparent;
}
.top-nav.home-main-nav {
  grid-template-columns: 58px 1fr 58px;
}
.page-bar .menu-wrap {
  margin-right: 0;
}
@media (max-width: 360px) {
  .menu-hint {
    font-size: 9px;
    padding: 2px 6px;
  }
  .menu-hints {
    left: 32px;
    top: 3px;
  }
}
/* ===== end menu hints ===== */

.hamburger {
  width: 34px;
  height: 28px;
  display: grid;
  gap: 5px;
}

.hamburger i {
  display: block;
  height: 4px;
  background: #444444;
}

.search-mark {
  width: 30px;
  height: 30px;
  border: 5px solid #e40000;
  border-radius: 50%;
  position: relative;
}

.search-mark::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 5px;
  right: -15px;
  bottom: -6px;
  background: #e40000;
  transform: rotate(45deg);
  border-radius: 9px;
}

.zone-tab {
  height: 52px;
  color: #666666;
  font-size: 16px;
  display: grid;
  place-items: center;
  position: relative;
}

.zone-tab small {
  display: block;
  margin-top: 2px;
  color: #dd2020;
  font-size: 12px;
}

.zone-tab.active::after {
  content: none;
  display: none;
}

.category-row {
  /* 勿固定矮高：部分机型系统字号放大后会裁掉下方数量 */
  height: auto;
  min-height: 48px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(76px, 1fr);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--yellow);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-row::-webkit-scrollbar {
  display: none;
}

.category-row button {
  min-width: 76px;
  min-height: 48px;
  padding: 7px 6px 5px;
  color: #343434;
  font-size: 15px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.category-row button b {
  font-weight: 400;
  line-height: 1.15;
}

.category-row button span {
  display: block;
  color: #dd2020;
  font-size: 11px;
  line-height: 1.1;
  transform: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-row button.active {
  background: #fff600;
  color: #e30000;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 8px;
  padding: 8px;
  align-items: start;
}

.video-card {
  min-width: 0;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.video-cover {
  /* 对齐 CDN 测站：约原一屏三行高度的 70% */
  aspect-ratio: auto;
  width: 100%;
  height: calc((100dvh - 52px - 48px - 16px - 28px - 114px) / 3 * 0.7);
  min-height: 80px;
  border-radius: 6px;
  background: #d5d8dd;
  background-image: var(--cover-bg);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.video-cover.tall,
.video-cover.short {
  aspect-ratio: auto;
  height: calc((100dvh - 52px - 48px - 16px - 28px - 114px) / 3 * 0.7);
  min-height: 80px;
}

.video-cover > img.cover-img,
.box-cover > img.cover-img,
.box-cover.collage i > img.cover-img,
.detail-cover > img.cover-img,
.player-cover-floor > img.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.video-cover::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  z-index: 1;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
  pointer-events: none;
}

.play {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
}

.play::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 14px;
  border-left: 16px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.video-grid .video-card .play {
  display: none;
}

.badge-row {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  background: rgba(0, 0, 0, .72);
  min-height: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}

.duration {
  position: absolute;
  right: 6px;
  bottom: 4px;
  top: auto;
  z-index: 3;
  color: #ffffff;
  background: transparent;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.badge-row .star,
.star {
  color: #ffd54a;
  font-size: 13px;
}

.badge-row .lock,
.lock {
  color: #7ec8ff;
}

.video-title {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  margin: 4px 2px 6px;
  padding: 0;
  height: 34px;
  color: #888888;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-tile {
  min-height: 160px;
  background: #f40000;
  color: #161616;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 21px;
  line-height: 1.55;
  padding: 16px;
}

.empty-panel {
  min-height: calc(100vh - 195px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #333333;
  font-size: 18px;
}

.page-bar {
  grid-template-columns: 52px 1fr auto;
  min-height: 52px;
}

.page-title {
  text-align: center;
  font-size: 18px;
  color: #444444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-bar .back {
  font-size: 38px;
  line-height: 1;
}

.page-bar .right {
  font-size: 14px;
  white-space: nowrap;
  padding: 0 10px;
  min-width: 72px;
  max-width: 110px;
  line-height: 1.2;
  text-align: center;
}

.form-page {
  background: #ffffff;
  min-height: calc(100vh - 132px);
  padding: 20px 12px;
}

.warn {
  color: #c81717;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.input-box {
  height: 50px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: #eeeeee;
  color: #222222;
  padding: 0 16px;
  margin: 0 0 14px;
  font-size: 17px;
}

.input-box::placeholder {
  color: #ababab;
}

.primary,
.secondary,
.dark-btn,
.red-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px 14px;
  font-size: 18px;
}

.primary,
.red-btn {
  color: #ffffff;
  background: #f50000;
}

.secondary {
  color: #ffffff;
  background: #cfcfcf;
}

.dark-btn {
  color: #ffffff;
  background: #171717;
}

.form-actions {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  color: #444444;
  font-size: 17px;
}

.list-section-title {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #d9d9d9;
  color: #777777;
  font-size: 16px;
}

.plain-list {
  background: #ffffff;
}

.plain-list button,
.plain-row {
  min-height: 52px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 17px;
}

.plain-list .value {
  color: #444444;
}

.chev {
  font-size: 28px;
  color: #111111;
  line-height: 1;
}

.switch {
  width: 40px;
  height: 25px;
  border-radius: 99px;
  background: #cccccc;
  padding: 3px;
}

.switch i {
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #f4f4f4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.settings-footer {
  padding: 18px 14px 28px;
}

.profile-top {
  padding: 18px 14px 12px;
  background: #ffffff;
}

.profile-row {
  display: grid;
  grid-template-columns: 95px 1fr;
  min-height: 45px;
  align-items: center;
  font-size: 17px;
}

.profile-row input {
  width: 120px;
  height: 36px;
  border: 1px solid #888888;
  border-radius: 3px;
  padding: 0 6px;
}

.share-page,
.buy-page,
.guide-page {
  padding: 14px;
  background: #ffffff;
  min-height: calc(100vh - 132px);
}
.share-page {
  background: #f2f2f2;
}
.share-page .button-row {
  grid-template-columns: repeat(3, 1fr);
}
.share-page .button-row .dark-btn {
  font-size: 14px;
  padding: 0 4px;
}
.share-page .copy-row span {
  word-break: break-all;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}
.share-page .share-tools {
  margin: 12px 0 14px;
}
.share-link-card,
.share-qr-card {
  border: 1px solid #d8d8d8;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.share-card-label {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.share-code-chip {
  display: inline-block;
  background: #f7f7f7;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  color: #444;
  margin-bottom: 10px;
}
.share-code-chip b {
  color: #d60000;
  letter-spacing: 1px;
}
.share-primary-url {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  word-break: break-all;
  line-height: 1.45;
  padding: 12px 12px;
  background: #fafafa;
  border: 1px dashed #ccc;
  border-radius: 6px;
  margin-bottom: 8px;
}
.share-link-hint {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 12px;
}
.share-copy-btn {
  width: 100%;
  max-width: none;
  margin: 0 0 8px;
  display: block;
  background: #d60000;
  border-color: #b80000;
}
.share-link-card .share-main-btn,
.share-qr-card .share-main-btn {
  width: 100%;
  max-width: none;
  margin: 0;
}
.share-qr-card .share-qr-wrap {
  margin-bottom: 10px;
}
.share-qr-card .share-qr-img {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 8px;
}
.share-qr-hint {
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: #888;
  margin: 0 0 12px;
}

.box {
  border: 1px solid #777777;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 18px;
  line-height: 1.6;
  font-size: 16px;
}

.button-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}

.button-row .dark-btn {
  min-height: 48px;
  font-size: 16px;
}

.copy-row {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
  align-items: center;
}

.qr {
  width: 238px;
  height: 238px;
  margin: 18px auto;
  background: #fff;
  border: 1px solid #eee;
}
.share-qr-wrap {
  text-align: center;
  margin-bottom: 16px;
}
.share-qr-img {
  width: 240px;
  height: 240px;
  display: block;
  margin: 8px auto 12px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  object-fit: contain;
}
.share-link-line {
  font-size: 12px;
  color: #666;
  word-break: break-all;
  padding: 0 8px 8px;
  text-align: left;
}
.share-code-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
}
.dark-btn.mini {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}
.share-main-btn {
  max-width: 260px;
  margin: 0 auto 8px;
  display: block;
}
.share-rules {
  font-size: 15px;
  line-height: 1.65;
  color: #333;
}
.share-rules .red,
.share-pack .red {
  color: #d60000;
  font-weight: 700;
}
.share-rules .blue {
  color: #1a66c4;
  font-weight: 700;
}
.share-pack-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 12px;
}
.share-pack-ok {
  background: #e8f8ef;
  color: #146c2e;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}
.share-pack-list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}
.share-pack-pass {
  margin: 10px 0;
  font-size: 15px;
}
.share-pack-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.share-pack-row .dark-btn {
  min-height: 46px;
  font-size: 13px;
  padding: 0 6px;
}
.share-pack-warn {
  color: #d60000;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0;
}
.share-hello {
  font-size: 15px;
  line-height: 1.65;
}
.share-rules-title {
  font-size: 16px;
  font-weight: 800;
  margin: 4px 0 10px;
  color: #222;
}
.invite-share-page {
  background: linear-gradient(180deg, #fff7fa 0%, #ffe9f1 40%, #fff5f8 100%);
  margin: 0 -12px;
  padding: 12px 12px 24px;
  border-radius: 0;
}
.invite-poster-stage {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #ffe4ec;
  box-shadow: 0 10px 28px rgba(200, 80, 120, .18);
}
.invite-poster-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.invite-poster-empty {
  padding: 80px 16px;
  text-align: center;
  color: #b07088;
  font-size: 14px;
}
.invite-poster-actions {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 12px auto 18px;
}
.invite-btn {
  flex: 1;
  height: 46px;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.invite-btn-copy {
  background: #fff;
  color: #5a3040;
  border: 1px solid #f0c4d2;
}
.invite-btn-save {
  background: #e05a84;
  color: #fff;
}
.invite-share-page .share-hello,
.invite-share-page .share-link-card,
.invite-share-page .share-rules {
  background: rgba(255, 255, 255, .78);
  color: #5a3040;
  border: 1px solid #f3c9d6;
}
.invite-share-page .share-hello {
  margin: 0 0 12px;
  line-height: 1.55;
  background: rgba(255, 232, 240, .92);
  color: #5a3040;
  border: 1px solid #f0c4d2;
  border-radius: 10px;
}
.invite-share-page .share-hello b {
  color: #c94a72;
}
.invite-share-page .share-card-label,
.invite-share-page .share-rules-title,
.invite-share-page .share-hello {
  color: #5a3040;
}
.invite-share-page .share-rules-title {
  color: #8a3d5a;
}
.invite-share-page .share-primary-url {
  color: #5a3040;
  background: #fff;
}
.invite-share-page .share-link-hint {
  color: #a07088;
}
.invite-share-page .share-rules .red {
  color: #d45078;
}
.invite-share-page .share-rules .blue {
  color: #5a7ad4;
}
.points-freeze-banner {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.5;
}
.invite-record-page {
  padding: 12px;
}
.invite-record-meta {
  margin-bottom: 8px;
  font-size: 13px;
}
.invite-record-empty {
  padding: 16px 4px;
  line-height: 1.6;
}
.invite-record-empty .dark-btn {
  margin-top: 12px;
  width: 100%;
}
.invite-record-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invite-record-item {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
}
.invite-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.invite-record-name {
  font-weight: 600;
  word-break: break-all;
}
.invite-record-status {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
}
.invite-record-status.ok { color: #16a34a; }
.invite-record-status.pending { color: #d97706; }
.invite-record-status.blocked { color: #dc2626; }
.invite-record-reason,
.invite-record-reward {
  margin-top: 4px;
  font-size: 13px;
}
.poster-save-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poster-save-mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 8, 14, .55);
}
.poster-save-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  max-height: 88vh;
  overflow: auto;
  background: #fff7fa;
  border-radius: 14px;
  padding: 14px 12px 16px;
  box-shadow: 0 12px 36px rgba(120, 40, 70, .28);
}
.poster-save-tip {
  text-align: center;
  color: #c94a72;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}
.poster-save-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  -webkit-touch-callout: default;
  user-select: none;
}
.poster-save-close {
  width: 100%;
  margin-top: 12px;
}
.auto-load-tip {
  text-align: center;
  color: #999;
  font-size: 13px;
  padding: 12px 0 18px;
  min-height: 20px;
}
.auto-load-tip:empty { display: none; }
.auto-load-tip:not(:empty) {
  color: #666;
  font-weight: 600;
}

.buy-option {
  margin: 46px auto 22px;
  max-width: 220px;
}

.pay-box {
  padding: 22px 14px;
  text-align: center;
}

.pay-count {
  background: #cccccc;
  color: #cf0000;
  font-size: 18px;
  padding: 8px 0;
}

.timer {
  display: inline-block;
  min-width: 70px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #000000;
  color: #ffffff;
  border: 1px solid #cf0000;
  font-size: 25px;
}

.wallet {
  text-align: left;
  font-size: 19px;
  line-height: 1.5;
  word-break: break-all;
}

.chat-input {
  position: fixed;
  left: 50%;
  bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  width: min(100vw, 430px);
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 10px;
  padding: 7px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.chat-input input {
  border: 1px solid #bbbbbb;
  border-radius: 7px;
  padding: 0 10px;
  background: #f4f4f4;
}

.image-btn {
  display: grid;
  place-items: center;
  border: 2px solid #777777;
  background: #ffffff;
  font-size: 26px;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.drawer.open {
  pointer-events: auto;
}

.drawer-panel {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: min(80vw, 320px);
  transform: translateX(calc(-50% - 430px));
  background: #eeeeee;
  box-shadow: 12px 0 20px rgba(0, 0, 0, .25);
  transition: transform .24s ease;
  overflow-y: auto;
  padding-top: var(--sat);
  box-sizing: border-box;
}

.drawer.open .drawer-panel {
  transform: translateX(calc(-50% - 43px));
}

.drawer-mask {
  position: absolute;
  inset: 0;
  margin-left: min(80vw, 320px);
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .24s ease;
}

.drawer.open .drawer-mask {
  opacity: 1;
}

.drawer-head {
  min-height: 132px;
  padding: 14px 10px 12px;
  background: #151515;
  color: #ffffff;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: start;
}

.drawer-head img {
  width: 52px;
  height: 52px;
  cursor: pointer;
}

.drawer-user {
  min-width: 0;
}

.drawer-head strong {
  display: block;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.drawer-points {
  margin-top: 8px;
  color: #ff2a2a;
  font-size: 14px;
}

.drawer-exp {
  margin-top: 8px;
  width: 100%;
  min-height: 28px;
  border-radius: 4px;
  background: #ffffff;
  color: #222222;
  font-size: 12px;
  text-align: left;
  padding: 0 8px;
}

.drawer-invite-freeze-tip {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 4px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
}

.invite-freeze-tip {
  margin: 0;
  padding: 10px 12px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.5;
}

.drawer-menu button {
  position: relative;
}

.msg-red-dot {
  display: none !important;
}

.msg-unread-n {
  justify-self: end;
  margin-right: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #e11d48;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.drawer-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.drawer-head button {
  min-width: 96px;
  height: 34px;
  border-radius: 7px;
  background: #ffffff;
  color: #333333;
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
}

.drawer-points-btn {
  min-height: 40px !important;
  font-weight: 700;
}
.drawer-logout-btn {
  background: #c62828 !important;
  color: #fff !important;
  border: none;
}

.points-page {
  padding: 10px;
  background: #ececec;
  min-height: calc(100vh - 48px);
}

.points-card {
  background: #ffffff;
  border: 1px solid #111111;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.points-balance {
  font-size: 18px;
  margin-bottom: 4px;
}

.points-delta {
  color: #666666;
  font-size: 14px;
  margin-bottom: 12px;
}

.points-actions,
.points-usdt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.points-usdt {
  grid-template-columns: 1fr 1fr;
}

.points-actions button,
.points-usdt button,
.points-row button,
.market-buy {
  min-height: 40px;
  border-radius: 6px;
  background: #3a3a3a;
  color: #ffffff;
  font-size: 15px;
}

.points-actions button.ghost,
.points-row button:disabled,
.market-buy:disabled {
  background: #d0d0d0;
  color: #777777;
}

.points-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid #111111;
  border-radius: 6px;
  font-size: 15px;
}

.points-row .red {
  color: #d60000;
}

.points-row small,
.points-help {
  color: #2b5cff;
  font-size: 13px;
}

.points-sub {
  color: #d60000;
  font-size: 13px;
  margin-top: 4px;
}

.perm-title {
  margin: 14px 4px 8px;
  font-size: 16px;
}

.market-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #f2f2f2;
  border-bottom: 1px solid #ddd;
}

.market-tabs button {
  min-height: 44px;
  font-size: 14px;
  color: #444;
}

.market-tabs button.active {
  background: #d9d9d9;
  font-weight: 700;
}

.market-list {
  background: #fff;
}

.market-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #ececec;
}

.market-item .price {
  color: #d60000;
  font-size: 18px;
  font-weight: 700;
  text-align: right;
}

.market-item .meta {
  color: #888;
  font-size: 12px;
  margin-top: 4px;
}

.pay-icons {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.pay-icons i {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-style: normal;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: #fff;
}

.pay-icons .alipay { background: #1677ff; }
.pay-icons .wechat { background: #07c160; }

.guide-steps {
  padding: 12px;
  line-height: 1.7;
  font-size: 15px;
  background: #fff;
}

.guide-steps h3 {
  margin: 14px 0 6px;
  font-size: 16px;
}

.guide-steps .demo-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  margin: 8px 0 12px;
}

.guide-btn-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.guide-btn-row button {
  min-height: 36px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
}

.red-note { color: #d60000; font-size: 14px; line-height: 1.6; margin: 8px 0; }
.field-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.muted { color: #777; font-size: 14px; }
.black-banner {
  background: #111;
  color: #fff;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 1.6;
  font-size: 14px;
}
.withdraw-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.withdraw-line .mini { width: 100px; min-height: 36px; }
.elite-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #111;
  border-radius: 6px;
  background: #fff;
  padding: 12px;
  margin-bottom: 10px;
}
.elite-card .red { color: #d60000; margin-top: 6px; font-weight: 700; }
.sec-label {
  background: #d9d9d9;
  padding: 8px 10px;
  margin: 10px 0 6px;
  font-size: 15px;
}
.gray-box { background: #eee !important; border: 0 !important; }
.help-link {
  display: block;
  padding: 8px 0;
  color: #222;
  text-decoration: none;
}
.linkish {
  background: none;
  color: #222;
  text-decoration: underline;
  padding: 0;
  display: inline;
  min-height: auto;
}

.drawer-tabs,
.drawer-categories {
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 0 13px;
  padding: 10px 10px 8px;
  font-size: 15px;
}

.drawer-tabs button,
.drawer-categories button {
  min-height: 34px;
  color: #333333;
  white-space: nowrap;
}

.drawer-categories button.drawer-zone {
  font-weight: 700;
  color: #111;
  border-bottom: 2px solid #f59e0b;
  margin-right: 4px;
}

.drawer-menu {
  margin-top: 10px;
}

.drawer-menu button {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  text-align: left;
  color: #444444;
  font-size: 16px;
}

.drawer-menu span {
  text-align: center;
  font-size: 24px;
}

.drawer-menu .red {
  color: #e00000;
}


.modal-root {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: wxMaskIn .2s ease;
}

.modal-root.open {
  display: flex;
}

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

@keyframes wxDialogIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.dialog {
  width: min(100%, 320px);
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  animation: wxDialogIn .22s cubic-bezier(.2, .8, .2, 1);
}

.dialog.poster-prompt {
  width: min(100%, 340px);
}

.poster-prompt-wrap {
  margin-top: 14px;
  max-height: 52vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  background: #f5f5f5;
}

.poster-prompt-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.dialog-body {
  padding: 28px 22px 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: #191919;
  letter-spacing: .01em;
  word-break: break-word;
}

.dialog-body small {
  display: block;
  color: #888888;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.dialog-body b,
.dialog-body strong {
  color: #191919;
  font-weight: 700;
}

/* 冷启动公告：正文要醒目，不用灰色小字 */
.dialog-body .cold-notice {
  text-align: left;
}
.dialog-body .cold-notice-title {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #000000;
  line-height: 1.35;
  letter-spacing: .02em;
}
.dialog-body .cold-notice-body {
  display: block;
  margin-top: 16px;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  text-align: left;
  white-space: pre-wrap;
  letter-spacing: .02em;
}

.dialog-body .dialog-red,
.dialog-red {
  color: #fa5151;
  font-size: 15px;
  font-weight: 500;
  margin-top: 10px;
}

.dialog .input-box,
.dialog .modal-input,
.modal-input {
  width: 100%;
  margin-top: 14px;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: #f7f7f7;
  color: #191919;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  box-shadow: inset 0 0 0 1px #ebebeb;
}

.dialog .input-box:focus,
.dialog .modal-input:focus,
.modal-input:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px #07c160;
}

.pay-qr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}
.pay-qr-block {
  flex: 1 1 120px;
  max-width: 160px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}
.pay-qr-lab {
  font-weight: 600;
  margin-bottom: 6px;
  color: #191919;
  font-size: 13px;
}
.pay-qr-img {
  width: 100%;
  max-width: 140px;
  height: auto;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eee;
}

.dialog-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
}

.dialog-actions.single {
  grid-auto-flow: row;
}

.dialog-actions button {
  min-height: 50px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, .08);
  border-radius: 0;
  background: transparent;
  color: #191919;
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.dialog-actions button:last-child {
  border-right: 0;
}

.dialog-actions button:active {
  background: rgba(0, 0, 0, .04);
}

.dialog-actions button.primary {
  color: #576b95;
  font-weight: 600;
}

.dialog-actions button.danger {
  color: #fa5151;
  font-weight: 600;
}

.dialog-actions button.ok {
  color: #07c160;
  font-weight: 600;
}

.dialog-actions button:disabled,
.dialog-actions button.ok:disabled,

.dialog-actions button.cold-cd {
  color: #b0b0b0 !important;
  font-weight: 500;
}
.dialog-actions button.primary:disabled {
  color: #b0b0b0 !important;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 1;
}

.pay-result-dialog {
  border-radius: 14px;
  overflow: hidden;
}

.pay-result-body {
  padding: 30px 22px 20px !important;
  font-weight: 400;
}

.pay-result-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.pay-result-icon.ok {
  background: #e8f8ef;
  color: #07c160;
  box-shadow: none;
}

.pay-result-icon.wait {
  background: #fff3e0;
  color: #fa9d3b;
  box-shadow: none;
}

.pay-result-icon.check {
  background: #edf4ff;
  color: #576b95;
  box-shadow: none;
}

.pay-result-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(87, 107, 149, .25);
  border-top-color: #576b95;
  border-radius: 50%;
  animation: paySpin .7s linear infinite;
}

@keyframes paySpin {
  to { transform: rotate(360deg); }
}

.pay-result-title {
  font-size: 17px;
  font-weight: 600;
  color: #191919;
  margin: 0 0 6px;
  letter-spacing: .01em;
}

.pay-result-points {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #07c160;
}

.pay-result-desc {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #888;
}

.dialog.captcha {
  padding: 0;
  text-align: left;
}

.dialog.captcha > div:first-child {
  padding: 22px 20px 8px;
  font-size: 15px;
  font-weight: 500;
  color: #191919;
  line-height: 1.5;
}

.bb-flash-tip {
  position: fixed;
  left: 50%;
  bottom: 18%;
  z-index: 12050;
  max-width: min(78vw, 280px);
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(17, 17, 17, .86);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.bb-flash-tip.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.bb-flash-tip.copy-ok {
  top: 42%;
  bottom: auto;
  max-width: min(86vw, 320px);
  padding: 22px 26px;
  border-radius: 14px;
  background: rgba(20, 20, 20, .92);
  border: 2px solid #2ecc71;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.5px;
  transform: translate(-50%, 16px) scale(.94);
}

.bb-flash-tip.copy-ok.show {
  transform: translate(-50%, 0) scale(1);
  animation: bbCopyOkPulse .45s ease;
}

@keyframes bbCopyOkPulse {
  0% { transform: translate(-50%, 12px) scale(.9); opacity: 0; }
  60% { transform: translate(-50%, -2px) scale(1.04); opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

.bb-pay-loading {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.bb-pay-loading.show {
  display: flex;
}
.bb-pay-loading-box {
  min-width: 120px;
  max-width: 70vw;
  padding: 26px 24px 22px;
  border-radius: 12px;
  background: rgba(40, 40, 40, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}
.bb-pay-loading-box .loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #fff;
}
.bb-pay-loading-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}
.order-st {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.order-st.ok {
  background: #e8f8ee;
  color: #0a7a3a;
}
.order-st.pay {
  background: #fff1e8;
  color: #c2410c;
}
.order-st.wait {
  background: #f3f4f6;
  color: #666;
}
.order-st.off {
  background: #f3f4f6;
  color: #999;
}
.market-order-item .meta {
  word-break: break-all;
}
.order-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eee;
}
.order-check-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #444;
  font-weight: 600;
}
.order-clear-btn {
  border: 0;
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}
.market-order-item {
  align-items: flex-start;
  gap: 8px;
}
.order-check {
  flex: 0 0 auto;
  padding-top: 6px;
}
.order-main {
  flex: 1 1 auto;
  min-width: 0;
}
.order-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.order-acts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.order-del-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}
.order-acts .market-buy {
  min-width: 72px;
}


.captcha {
  padding: 0;
}

.dialog.captcha .captcha-code,
.captcha-code {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  color: #576b95;
  font-weight: 700;
  letter-spacing: .06em;
  transform: none;
}

.captcha-img {
  height: 220px;
  margin: 10px 16px 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 54% 30%, #f7b4cb 0 9%, transparent 10%),
    radial-gradient(circle at 72% 41%, #f6c15c 0 5%, transparent 6%),
    radial-gradient(circle at 29% 81%, #ff825a 0 6%, transparent 7%),
    linear-gradient(135deg, #d9ecff, #f7d2dc 50%, #b88d94);
  position: relative;
  overflow: hidden;
}

.captcha-img span {
  position: absolute;
  color: #222222;
  font-weight: 800;
  font-size: 22px;
  transform: rotate(var(--r));
}

.captcha-bottom {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: 0;
  margin-top: 16px;
  padding: 0;
  align-items: stretch;
  border-top: 1px solid rgba(0,0,0,.08);
}

.refresh {
  font-size: 20px;
  color: #888;
}

.captcha-bottom button {
  min-height: 50px;
  margin: 0;
  border: 0;
  border-right: 1px solid rgba(0,0,0,.08);
  border-radius: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
  color: #191919;
}

.captcha-bottom button:last-child {
  border-right: 0;
  color: #576b95;
  font-weight: 600;
}

.captcha-bottom button:not(.refresh) {
  min-height: 50px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 17px;
}

.load-more {
  width: calc(100% - 20px);
  min-height: 46px;
  margin: 2px 10px 18px;
  border-radius: 5px;
  background: #171717;
  color: #ffffff;
  font-size: 17px;
}

.detail-page,
.chat-page,
.game-page {
  min-height: calc(100vh - 132px);
  background: #ffffff;
  padding: 12px;
}

.player,
.detail-cover {
  width: 100%;
  max-height: 42vh;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: #111111;
  overflow: hidden;
}

.player {
  display: block;
  object-fit: contain;
  background: #000;
}

.detail-cover {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.detail-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.45));
}

.detail-page h2 {
  margin: 13px 0 9px;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 600;
  color: #242424;
}

.detail-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  color: #555555;
  font-size: 13px;
}

.detail-meta span {
  min-width: 0;
  min-height: 28px;
  display: grid;
  place-items: center;
  background: #eeeeee;
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-main-nav {
  grid-template-columns: 58px 1fr 58px;
}
.home-main-nav .home-tabs {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 36px;
  justify-self: center;
  width: 100%;
  max-width: 220px;
}
.home-main-nav .nav-spacer {
  width: 58px;
  height: 52px;
}
.home-main-nav .main-tab {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 44px;
  font-size: 17px;
  color: #444;
  background: transparent;
  padding: 0 4px;
}
.home-main-nav .main-tab.active {
  color: #111;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 #111;
}
.loading-block {
  grid-column: 1 / -1;
  width: 100%;
  min-height: min(52vh, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #777;
  font-size: 15px;
  text-align: center;
  padding: 24px 12px;
}
.loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e5e5e5;
  border-top-color: #333;
  border-radius: 50%;
  animation: bb-spin .7s linear infinite;
}
@keyframes bb-spin {
  to { transform: rotate(360deg); }
}
.video-card.skeleton .video-cover {
  background: linear-gradient(90deg, #d8d8d8 25%, #ececec 37%, #d8d8d8 63%);
  background-size: 400% 100%;
  animation: bb-shimmer 1.2s ease infinite;
}
@keyframes bb-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.video-cover {
  transition: filter .2s ease;
}
.video-cover:not(.cover-ready) {
  background-color: #d5d8dd;
  min-height: 80px;
}
.box-detail-page .video-grid {
  min-height: 160px;
}
.drawer-section-label {
  width: 100%;
  flex: 0 0 100%;
  padding: 10px 4px 4px;
  color: #888;
  font-size: 12px;
}
.drawer-zone-row {
  width: 100%;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.drawer-zone-btn {
  min-height: 40px !important;
  border-radius: 6px;
  background: #f3f4f6 !important;
  color: #111 !important;
  font-weight: 700;
  text-align: center !important;
}
.drawer-zone-btn.search {
  grid-column: 1 / -1;
  background: #111 !important;
  color: #fff !important;
}
.search-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #fff8e1;
  color: #7a5a00;
  font-size: 13px;
  border-bottom: 1px solid #f0e0a8;
}
.search-chip button {
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
}
.zone-nav {
  border-top: 1px solid #eee;
  /* 四专区：最新上传 / 普通区 / 精华区 / 已解锁 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
}
.zone-nav .zone-tab {
  width: 100%;
  text-align: center;
  justify-items: center;
  place-items: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 2px 4px 6px;
  height: 40px;
  border-radius: 8px;
  color: #666;
  transition: color .15s ease, background .15s ease;
}
.zone-nav .zone-tab.active {
  color: #e10600;
  font-weight: 800;
  background: #fff1f1;
}
.zone-nav .zone-tab.active::after {
  content: none;
  display: none;
}
.box-rank-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-bottom: 1px solid #eee;
}
.box-rank-row button {
  min-height: 44px;
  font-size: 14px;
  color: #555;
  background: transparent;
}
.box-rank-row button.active {
  color: #d60000;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 #d60000;
}
.box-rank-row small {
  display: block;
  color: #d60000;
  font-size: 11px;
}
.box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: #f2f2f2;
}
.box-card-item {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-align: left;
  padding: 0 0 8px;
}
.box-cover {
  height: 150px;
  background: #ddd center/cover no-repeat;
  position: relative;
}
.box-cover.collage {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
.box-cover.collage i {
  display: block;
  position: relative;
  overflow: hidden;
  background: #ccc center/cover no-repeat;
}
.box-followers {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}
.box-name {
  padding: 8px 8px 2px;
  font-size: 14px;
  font-weight: 700;
}
.box-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 12px;
  color: #666;
}
.box-meta .follow-mini {
  margin-left: auto;
  width: auto;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.box-edit-bar {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.box-edit-bar button {
  background: #d60000;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  min-height: 28px;
}
.mybox-bar {
  grid-template-columns: 58px 1fr auto;
}
.mybox-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 10px;
  min-height: 52px;
}
.mybox-bar .right {
  width: auto;
  min-width: 44px;
  padding: 0 8px;
  font-size: 15px;
  color: #333;
}
.mybox-bar .add-round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d60000;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
}
.box-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.box-detail-head .dark-btn {
  width: auto;
  min-width: 88px;
  padding: 0 12px;
}
.owner-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #1a73e8;
  font: inherit;
  cursor: pointer;
}
.follow-user-list {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #f2f2f2;
}
.follow-user-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  padding: 8px;
  cursor: pointer;
}
.follow-user-covers {
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: #ddd;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
.follow-user-covers.empty {
  background: linear-gradient(135deg, #e8e8e8, #d2d2d2);
}
.follow-user-covers i {
  display: block;
  background: #ccc center/cover no-repeat;
}
.follow-user-meta {
  display: grid;
  gap: 6px;
  text-align: left;
}
.follow-user-meta b {
  font-size: 15px;
  color: #222;
}
.follow-user-meta span {
  font-size: 12px;
  color: #888;
}

.locked-preview {
  position: relative;
  background: #ffffff;
  color: #222;
  padding-bottom: 12px;
}
.locked-stage {
  position: relative;
  width: 100%;
  max-height: 42vh;
  overflow: hidden;
  background: #ececec;
  border-radius: 4px;
}
.locked-media {
  width: 100%;
  height: min(42vh, 260px);
  min-height: 180px;
  background: #e8e8e8 center/contain no-repeat;
}
.locked-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
}
.locked-cell {
  border: 1px solid rgba(0,0,0,.06);
  background: transparent;
}
.locked-title {
  padding: 12px 4px 0;
  font-size: 16px;
  line-height: 1.42;
  color: #222;
  font-weight: 600;
}
.locked-footer {
  position: relative;
  margin-top: 12px;
  padding: 12px 16px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail-bar {
  position: sticky;
  top: 0;
  z-index: 5;
}
.unlock-cta {
  background: #e10600;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  min-height: 48px;
  border-radius: 6px;
  padding: 0 28px;
  width: min(86%, 360px);
}
.unlock-cta.inline {
  display: block;
  width: auto;
  margin: 10px auto 4px;
}
.page-dot {
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-wrap { position: relative; }

.player-cover-floor {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-color: #111;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

.player-wrap > .player {
  position: relative;
  z-index: 1;
}
/* xgplayer 根节点：详情区内联时必须撑开高度（不能 absolute，否则 player-wrap 塌成 0） */
.player-wrap > #detailPlayerHost,
.player-wrap > .bb-xg-host {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: 42vh;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000 !important;
  padding-top: 0 !important;
}
#detailPlayerHost.xgplayer,
.bb-xg-host.xgplayer {
  width: 100% !important;
  background: #000 !important;
  padding-top: 0 !important;
}
.player-wrap #detailPlayerHost .xgplayer-start,
.player-wrap #detailPlayerHost .xgplayer-controls,
.player-wrap #detailPlayerHost .xgplayer-enter,
.player-wrap #detailPlayerHost .xgplayer-replay,
.player-wrap .bb-xg-host .xgplayer-start,
.player-wrap .bb-xg-host .xgplayer-controls,
.player-wrap .bb-xg-host .xgplayer-enter {
  display: none !important;
}
#detailPlayerHost video,
.bb-xg-host video,
#detailPlayerHost #detailPlayer {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #000;
}
.fs-stage #detailPlayerHost,
.fs-stage .bb-xg-host {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  position: absolute !important;
  inset: 0;
  border-radius: 0 !important;
}
/* 横屏：只旋转外层容器，避免 xg 内 video 再转一次 */
.fs-overlay.fs-landscape .fs-stage > #detailPlayerHost,
.fs-overlay.fs-landscape .fs-stage > .bb-xg-host {
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.fs-overlay.fs-landscape .fs-stage > #detailPlayerHost video,
.fs-overlay.fs-landscape .fs-stage > .bb-xg-host video,
.fs-overlay.fs-landscape .fs-stage > #detailPlayerHost #detailPlayer,
.fs-overlay.fs-landscape .fs-stage > .bb-xg-host #detailPlayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
/* 竖屏无 xg：video 必须绝对铺满。flex 里 height:100% 在还没有首帧时高度是 0，进度在走但黑屏 */
.fs-overlay.fs-portrait .fs-stage > #detailPlayer.player,
.fs-overlay:not(.fs-landscape) .fs-stage > #detailPlayer.player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000;
  z-index: 1 !important;
}
/* 无 xg 时：直接旋转原生 video */
.fs-overlay.fs-landscape .fs-stage > #detailPlayer.player {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  object-fit: cover !important;
  z-index: 1 !important;
}
/* 横屏时手势层仍全屏；xg 底栏随容器旋转，不再挖屏幕底部 */
.fs-overlay.fs-xg.fs-landscape.fs-controls-on .fs-tap {
  bottom: 0;
}
/* 详情页：隐藏 xg 控件（点封面进全屏） */
.player-wrap #detailPlayerHost .xgplayer-start,
.player-wrap #detailPlayerHost .xgplayer-controls,
.player-wrap #detailPlayerHost .xgplayer-enter,
.player-wrap #detailPlayerHost .xgplayer-replay,
.player-wrap .bb-xg-host .xgplayer-start,
.player-wrap .bb-xg-host .xgplayer-controls,
.player-wrap .bb-xg-host .xgplayer-enter {
  display: none !important;
}
/* 非 xg 全屏：隐藏 xg 控件，用自研底栏 */
.fs-overlay:not(.fs-xg) #detailPlayerHost .xgplayer-controls,
.fs-overlay:not(.fs-xg) .bb-xg-host .xgplayer-controls,
.fs-overlay:not(.fs-xg) #detailPlayerHost .xgplayer-start,
.fs-overlay:not(.fs-xg) .bb-xg-host .xgplayer-start,
.fs-overlay:not(.fs-xg) #detailPlayerHost .xgplayer-enter,
.fs-overlay:not(.fs-xg) .bb-xg-host .xgplayer-enter,
.fs-overlay:not(.fs-xg) #detailPlayerHost .xgplayer-replay,
.fs-overlay:not(.fs-xg) .bb-xg-host .xgplayer-replay {
  display: none !important;
}
/* xg 全屏：自研底栏进度条（可拖可点）；隐藏 xg 底栏避免冲突/弹回 0 */
.fs-overlay.fs-xg .fs-dock {
  display: grid !important;
}
.fs-overlay.fs-xg #detailPlayerHost .xgplayer-controls,
.fs-overlay.fs-xg .bb-xg-host .xgplayer-controls {
  display: none !important;
}
.fs-overlay.fs-xg .fs-bar .fs-flip {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
.fs-overlay.fs-xg:not(.fs-controls-on) .fs-tap {
  pointer-events: auto;
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* 控件展开时：手势层接管画面；底栏自研进度条可点可拖 */
.fs-overlay.fs-xg.fs-controls-on .fs-tap {
  pointer-events: auto;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 72px;
}
.fs-overlay.fs-xg.fs-controls-on #detailPlayerHost .xgplayer-controls,
.fs-overlay.fs-xg.fs-controls-on .bb-xg-host .xgplayer-controls {
  display: none !important;
}
.fs-overlay.fs-xg:not(.fs-controls-on) #detailPlayerHost .xgplayer-controls,
.fs-overlay.fs-xg:not(.fs-controls-on) .bb-xg-host .xgplayer-controls {
  display: none !important;
}
.fs-overlay.fs-xg #detailPlayerHost .xgplayer-start,
.fs-overlay.fs-xg .bb-xg-host .xgplayer-start,
.fs-overlay.fs-xg #detailPlayerHost .xgplayer-enter,
.fs-overlay.fs-xg .bb-xg-host .xgplayer-enter {
  display: none !important;
}
/* 拖进度后强制关 xg 加载圈 */
.fs-overlay.fs-xg #detailPlayerHost.bb-xg-loading-off .xgplayer-loading,
.fs-overlay.fs-xg .bb-xg-host.bb-xg-loading-off .xgplayer-loading,
.player-wrap #detailPlayerHost.bb-xg-loading-off .xgplayer-loading,
.player-wrap .bb-xg-host.bb-xg-loading-off .xgplayer-loading {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* xg 自带加载圈：仅缓冲中显示（错误态勿盖住「请刷新」） */
.fs-overlay.fs-xg #detailPlayerHost.xgplayer-isloading:not(.xgplayer-is-error) .xgplayer-loading,
.fs-overlay.fs-xg .bb-xg-host.xgplayer-isloading:not(.xgplayer-is-error) .xgplayer-loading {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9 !important;
  pointer-events: none !important;
}
.fs-overlay.fs-xg #detailPlayerHost.xgplayer-is-error .xgplayer-loading,
.fs-overlay.fs-xg .bb-xg-host.xgplayer-is-error .xgplayer-loading,
.player-wrap #detailPlayerHost.xgplayer-is-error .xgplayer-loading,
.player-wrap .bb-xg-host.xgplayer-is-error .xgplayer-loading {
  display: none !important;
}
.fs-overlay.fs-xg #detailPlayerHost.xgplayer-is-error .xgplayer-error,
.fs-overlay.fs-xg .bb-xg-host.xgplayer-is-error .xgplayer-error,
.player-wrap #detailPlayerHost.xgplayer-is-error .xgplayer-error,
.player-wrap .bb-xg-host.xgplayer-is-error .xgplayer-error {
  display: flex !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}
/* 解码错误时手势层让出点击，否则点不到「刷新」 */
.fs-overlay.fs-xg:has(.xgplayer-is-error) .fs-tap,
.fs-overlay.fs-xg.bb-fs-media-error .fs-tap {
  pointer-events: none !important;
}
.fs-overlay.fs-xg > .fs-busy {
  display: none !important;
}
.fs-overlay.fs-xg > .fs-busy.show.is-reload {
  display: flex !important;
  z-index: 40 !important;
  pointer-events: auto !important;
}
/* 详情页：播放器在封面下真实尺寸预缓冲 */
.player-wrap.bb-xg-on > #detailPlayerHost.bb-xg-prefetch,
.player-wrap.bb-xg-on > .bb-xg-prefetch {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  opacity: 0.02;
  pointer-events: none !important;
  border-radius: 4px;
  overflow: hidden;
}
.player-wrap.bb-xg-on > .player-cover-floor { z-index: 0; }
.player-wrap.bb-xg-on > .detail-cover { z-index: 2; }
.player-wrap.bb-xg-on > .player-badges { z-index: 4; }
.player-wrap.bb-xg-on > .detail-preload-busy,
.player-wrap.bb-xg-on > .fs-busy { z-index: 5; }
.player-wrap .player-reenter {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.fs-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 10px;
}
.fs-btn {
  min-height: 40px;
  border-radius: 6px;
  background: #2b2b2b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: #000;
  display: block;
}
.fs-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.fs-tap {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: transparent;
}
.fs-busy {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.28);
}
.fs-busy.show { display: flex; }
.fs-busy-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
}
.fs-busy-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.player-wrap > .fs-busy {
  border-radius: 0;
  z-index: 5;
}
.player-wrap.is-buffering .detail-cover {
  pointer-events: auto;
  cursor: wait;
}
.player-wrap.is-buffering .detail-cover .play {
  opacity: 0.35;
}
.player-wrap.is-buf-timeout > .fs-busy.is-reload,
.player-wrap.is-buf-timeout > .detail-preload-busy.is-reload {
  pointer-events: auto !important;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.45);
}
.player-wrap.is-buf-timeout .fs-busy-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 横屏：加载提示与画面同向旋转 */
.fs-overlay.fs-landscape .fs-busy {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  z-index: 8;
}
.fs-bar,
.fs-dock-wrap {
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 5;
}
.fs-overlay.fs-controls-on .fs-bar,
.fs-overlay.fs-controls-on .fs-dock-wrap {
  opacity: 1;
}
.fs-overlay.fs-controls-on .fs-bar,
.fs-overlay.fs-controls-on .fs-dock,
.fs-overlay.fs-controls-on .fs-dock-wrap .fs-bar {
  pointer-events: auto;
}
/* chrome 容器：竖屏铺满；横屏时整体旋转，顶栏标题/返回随画面一起转 */
.fs-dock-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.fs-dock-wrap .fs-spacer { flex: 1 1 auto; min-height: 0; pointer-events: none; }
.fs-dock-wrap .fs-bar,
.fs-dock-wrap .fs-dock {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
  width: 100%;
  pointer-events: auto;
}
/* 顶栏：返回 + 标题（对齐 YS APK；翻转在底栏） */
.fs-bar {
  height: 52px;
  padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  z-index: 6;
}
.fs-bar .fs-back {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
.fs-bar .fs-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.fs-bar-modes { display: none !important; }
.fs-actions { display: none !important; }
.fs-bar button {
  border: 0;
  color: #fff;
  font-weight: 700;
}
.fs-dock {
  display: grid;
  grid-template-columns: 44px 1fr auto 40px;
  gap: 8px;
  align-items: center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.15));
  color: #fff;
  box-sizing: border-box;
}
.fs-bar .fs-bar-pad {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.fs-dock .fs-flip {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
.fs-dock .fs-flip-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.fs-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
}
.fs-seek-track {
  position: relative;
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.fs-seek-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.fs-seek-fill {
  position: absolute;
  left: 0;
  width: 0;
  height: 5px;
  border-radius: 999px;
  background: #d60000;
  pointer-events: none;
}
.fs-seek-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
  pointer-events: none;
}
.fs-seek-track[data-dragging="1"] .fs-seek-thumb {
  width: 22px;
  height: 22px;
  margin-left: -11px;
}
.fs-time {
  font-size: 12px;
  white-space: nowrap;
  opacity: .95;
  min-width: 84px;
  text-align: right;
}
.fs-seek-tip {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 20;
  min-width: 88px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.fs-seek-tip.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.fs-seek-tip.fs-vol-tip,
.fs-seek-tip.fs-bright-tip {
  min-width: 108px;
  letter-spacing: 0;
  font-size: 20px;
}
.fs-bright-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
/* 横屏时提示数字跟画面同向旋转 */
.fs-overlay.fs-landscape .fs-seek-tip {
  transform: translate(-50%, -50%) rotate(90deg) scale(0.92);
}
.fs-overlay.fs-landscape .fs-seek-tip.show {
  transform: translate(-50%, -50%) rotate(90deg) scale(1);
}
.fs-overlay .player,
.fs-overlay #detailPlayer,
.fs-overlay #detailPlayerHost,
.fs-overlay .bb-xg-host {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  background: #000;
  border-radius: 0;
}
/* 横屏：画面与进度条同向旋转；退出/竖屏/横屏仍固定在屏幕顶部 */
.fs-overlay.fs-landscape .fs-dock-wrap {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}
.fs-overlay.fs-landscape .fs-dock {
  left: auto;
  right: auto;
  bottom: auto;
  padding: 10px 14px;
}
.fs-overlay.fs-landscape .fs-seek-track {
  width: 100%;
  min-width: 0;
  height: 32px;
}
.fs-overlay.fs-landscape .fs-bar {
  padding-top: 8px;
}
body.fs-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}
.player-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.lock-badge, .dur-badge {
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
}
.trial-btn { background: #f5c400 !important; }
.trial-tip {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  pointer-events: none;
}
.locked-footer .trial-btn { margin-top: 8px; width: 100%; }
.win-banner {
  background: #d60000;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  margin: 8px 0;
  line-height: 1.5;
}
.win-banner .linkish { color: #fff; text-decoration: underline; }
.invite-banner { font-size: 13px; }
.invite-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: #fff5f5;
  border: 1px solid #ffd0d0;
  border-radius: 8px;
}
.invite-tip-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #444;
}
.invite-tip-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.invite-tip-btn {
  appearance: none;
  border: 1px solid #e10600;
  background: #fff;
  color: #e10600;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.invite-tip-btn.primary {
  background: #e10600;
  color: #fff;
}
.guess-head {
  margin: 16px 0 8px;
  padding: 0 2px;
  font-size: 16px;
  font-weight: 800;
  color: #222;
}
.guess-grid {
  padding: 0 0 4px;
}
.guess-more {
  text-align: center;
  color: #888;
  font-size: 13px;
  padding: 10px 0 4px;
}

.detail-bar { justify-content: space-between; }
.detail-bar .page-title { display: none; }
.detail-bar-actions { display: flex; gap: 8px; margin-left: auto; }
.report-btn {
  background: #d60000 !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  min-height: 34px;
}
.collect-btn {
  background: #fff !important;
  color: #d60000 !important;
  border: 1px solid #d60000 !important;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  min-height: 34px;
}
.detail-toolbar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}
.dl-btn {
  background: #f5c400;
  color: #222;
  border-radius: 4px;
  min-height: 36px;
  font-weight: 700;
  font-size: 16px;
}
.collector-line { font-size: 14px; margin: 8px 0; color: #444; }
.collector-line .red { color: #d60000; font-weight: 700; }
.collector-line .box-name-link {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #d60000;
  font-weight: 700;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.box-card-clickable { cursor: pointer; }
.box-card-clickable:active { background: #f3f3f3; }
.related-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.related-head button {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
}
.related-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.box-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}
.box-card-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.box-card-meta { color: #777; font-size: 12px; margin-bottom: 8px; }
.follow-mini {
  background: #3a3a3a;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  min-height: 30px;
  width: 100%;
}
.report-page { padding: 14px; background: #fff; min-height: calc(100vh - 48px); }
.report-lead { font-size: 16px; margin-bottom: 12px; }
.report-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  line-height: 1.45;
}
.report-option input { margin-top: 4px; }
.ghost-red { background: #d60000; margin-top: 10px; }
.box-pick {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 14px 12px;
  font-size: 16px;
}
.box-pick .meta { display: block; color: #888; font-size: 12px; margin-top: 4px; }
.plus-btn { font-size: 22px; line-height: 1; }
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; }

.detail-page .dark-btn,
.detail-page .red-btn {
  margin-bottom: 10px;
}

.messages-nav {
  grid-template-columns: 44px repeat(4, 1fr);
}

.messages-nav .menu {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  padding: 0 6px;
}

.messages-nav .zone-tab {
  position: relative;
  font-size: 14px;
}

.messages-nav .zone-tab small {
  display: inline-block;
  min-width: 16px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 8px;
  background: #d60000;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  vertical-align: middle;
}

.msg-card-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #eeeeee;
  min-height: calc(100vh - 58px);
}

.msg-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.msg-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 8px;
}

.msg-card-tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border-radius: 999px;
  padding: 2px 8px;
}

.msg-card-preview {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  line-height: 1.45;
}

.msg-card-time {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

.ann-dialog {
  text-align: left;
}

.ann-dialog b {
  display: block;
  font-size: 18px;
  margin-bottom: 10px;
}

.ann-dialog-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: normal;
  word-break: break-word;
}

.chat-bubble {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.chat-bubble.me {
  background: #f3f4f6;
}

.chat-bubble.staff {
  background: #ecfdf5;
  color: #065f46;
}

.chat-bubble.muted {
  color: #6b7280;
  background: #f9fafb;
}

.system-text {
  padding: 12px 14px;
  margin: 0;
  color: #777777;
  line-height: 1.5;
  background: #eeeeee;
}

.chat-page {
  padding-bottom: 76px;
}

.empty-panel.small {
  min-height: 220px;
  color: #777777;
  font-size: 16px;
}

.chat-input {
  z-index: 45;
}

.chat-input .image-btn {
  border-radius: 7px;
  background: #151515;
  color: #ffffff;
  border: 0;
  font-size: 15px;
}

.account-save {
  background: #eeeeee;
}

.account-save > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px 12px;
  max-width: 300px;
  margin: 22px auto 70px;
  font-size: 18px;
  word-break: break-all;
}

.modal-input {
  margin: 0;
  text-align: center;
}

.game-page {
  text-align: center;
}

.game-page .box {
  margin-top: 18px;
  font-size: 20px;
}

.dice {
  width: 118px;
  height: 118px;
  margin: 32px auto;
  border-radius: 18px;
  background: #171717;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 58px;
  font-weight: 900;
}

.video-cover[style=""],
.detail-cover[style="background-image:url()"] {
  background-image: linear-gradient(135deg, #cfd6df, #8b929b 52%, #2d2d2d) !important;
}

.profile-top .dark-btn {
  margin-top: 8px;
  min-height: 46px;
  font-size: 17px;
}

.plain-list button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 431px) {
  .drawer-panel {
    left: calc(50% - 215px);
    transform: translateX(-110%);
  }

  .drawer.open .drawer-panel {
    transform: translateX(0);
  }

  .drawer-mask {
    margin-left: calc(50% - 215px + min(82vw, 354px));
  }
}

@media (max-width: 370px) {
  .splash-logo.is-icon {
    width: 104px;
    height: 104px;
    border-radius: 23px;
  }

  .zone-tab {
    font-size: 16px;
  }

  .category-row {
    min-height: 52px;
    grid-auto-columns: minmax(80px, 1fr);
  }

  .category-row button {
    min-width: 80px;
    min-height: 52px;
    font-size: 16px;
    padding: 8px 6px 6px;
  }

  .category-row button span {
    font-size: 12px;
  }

  .video-grid {
    gap: 9px;
    padding: 9px;
  }

  .video-title {
    font-size: 13px;
  }

  .page-title {
    font-size: 20px;
  }

  .button-row {
    grid-template-columns: 1fr;
  }
  .share-page .button-row {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* FAQ accordion (APK FaqData) */
.faq-page {
  background: #f5f5f5;
  min-height: calc(100vh - 52px);
  padding-bottom: 28px;
}
.faq-sec-title {
  margin: 0;
  padding: 12px 16px 8px;
  font-size: 13px;
  color: #888;
  letter-spacing: 0.02em;
}
.faq-shortcuts {
  margin: 0 12px 8px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececec;
}
.faq-shortcuts button {
  border-bottom: 1px solid #f0f0f0;
}
.faq-shortcuts button:last-child {
  border-bottom: none;
}
.faq-list {
  margin: 0 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ececec;
  overflow: hidden;
  padding: 0;
}
.faq-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 0 14px;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 0;
  color: #1a1a1a;
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "›";
  flex: 0 0 auto;
  font-size: 22px;
  color: #b0b0b0;
  transform: rotate(90deg);
  transition: transform .15s ease;
}
.faq-item[open] summary::after {
  transform: rotate(-90deg);
}
.faq-a {
  padding: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #555;
  white-space: pre-wrap;
  background: #fafafa;
  margin: 0 -14px;
  padding: 10px 14px 14px;
  border-top: 1px solid #f3f3f3;
}
.faq-foot {
  margin: 16px 12px 0;
  display: grid;
  gap: 8px;
}
.faq-foot-link {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ececec;
  color: #333;
  font-size: 14px;
  text-align: center;
}
.faq-foot-link:first-child {
  color: #d60000;
  font-weight: 600;
}

/* 账号凭证卡（本地临时生成） */
.cred-card-wrap { text-align: center; padding: 4px 0 8px; }
.cred-warn {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  border-radius: 8px;
}
.cred-canvas {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(201, 74, 114, 0.18);
  background: #fff;
}
.cred-actions { margin-top: 12px; }
.cred-hint { margin: 10px 0 0; font-size: 12px; color: #999; }

.chat-thread .chat-bubble {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}
.chat-thread .chat-bubble.user { background: #f8fafc; }
.chat-thread .chat-bubble.admin { background: #fff1f2; }
.chat-thread .chat-meta { font-size: 12px; color: #888; margin-bottom: 4px; }
.chat-thread .chat-text { font-size: 14px; color: #222; white-space: pre-wrap; line-height: 1.45; }

/* 出售积分 / 兑换红包 */
.sell-page, .rp-page { padding: 12px 12px 40px; }
.sell-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.sell-card h3 { margin: 0 0 10px; font-size: 15px; }
.sell-card p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #555; }
.sell-balance { margin-top: 10px !important; color: #222 !important; font-size: 14px !important; }
.sell-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.sell-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sell-chip {
  min-width: 72px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #222;
  font-weight: 700;
  font-size: 13px;
}
.sell-chip.active { background: #c80000; border-color: #c80000; color: #fff; }
.rp-hero {
  border-radius: 16px;
  padding: 18px 16px;
  color: #fff;
  background: linear-gradient(145deg, #e11d48, #9f1239);
  margin-bottom: 12px;
}
.rp-kicker { font-size: 12px; opacity: .9; }
.rp-hero h1 { margin: 6px 0 12px; font-size: 24px; }
.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rp-stat {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px;
}
.rp-stat .lab { font-size: 12px; opacity: .9; }
.rp-stat .val { margin-top: 4px; font-size: 22px; font-weight: 800; }
.rp-tiers { display: grid; gap: 8px; margin-bottom: 8px; }
.rp-tier {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 12px; border-radius: 12px;
  border: 1.5px solid #eee; background: #fff; color: #222;
}
.rp-tier.active { border-color: #c80000; background: #fff5f5; }
.rp-tier.disabled, .rp-tier:disabled { opacity: .45; }
.rp-badge {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: #fecdd3; color: #9f1239; font-weight: 800;
}
.rp-ch {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f3f3f3;
}
.rp-ch:last-child { border-bottom: 0; }
.rp-pts { color: #c80000; font-weight: 700; white-space: nowrap; }
.rp-tag {
  display: inline-block; font-size: 11px; color: #b45309;
  background: #fff7ed; border-radius: 999px; padding: 1px 8px;
}
.rp-notice { margin: 0; padding: 0; list-style: none; }
.rp-notice li {
  position: relative; padding-left: 14px;
  margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #444;
}
.rp-notice li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: #c80000;
}
.rp-od {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f3f3f3; font-size: 13px;
}

/* 屏锁手势绘制 */
.pattern-lock-page {
  padding: 12px 12px 36px;
  text-align: center;
}
.pattern-lock-title {
  margin: 2px 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #191919;
}
.pattern-lock-host {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0;
}
.pattern-lock-canvas-wrap {
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pattern-lock-hint {
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
  min-height: 20px;
}
.pattern-lock-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px auto 0;
  width: 100%;
  max-width: 340px;
  padding: 0 4px;
}
.pattern-lock-actions .pattern-lock-save {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
}
.pattern-lock-redraw {
  width: 100%;
  min-height: 48px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #f5f5f5;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}
.pattern-lock-off {
  display: block;
  margin: 14px auto 0;
  width: 100%;
  max-width: 340px;
  border: 0;
  background: transparent;
  color: #888;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pattern-lock-foot {
  margin-top: 16px;
  text-align: center;
  color: #999;
  font-size: 12px;
}
.pattern-lock-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #111;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 8px 48px;
}
.pattern-lock-gate .pattern-lock-host {
  min-height: 340px;
}
.pattern-lock-gate-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}
.pattern-lock-gate-hint {
  margin-top: 10px;
  color: #aaa;
  font-size: 13px;
  min-height: 18px;
}
.pattern-lock-gate-foot {
  position: absolute;
  bottom: 28px;
  left: 16px;
  right: 16px;
  text-align: center;
  color: #777;
  font-size: 12px;
}

/* 设置行右侧：数值 + › */
.plain-list button .row-end {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.plain-list button .row-end .value {
  color: #666;
  font-size: 15px;
}

/* 缓存大小选择 */
.cache-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.cache-size-chip {
  min-height: 42px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #f7f7f7;
  color: #222;
  font-size: 15px;
  font-weight: 600;
}
.cache-size-chip.on {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
}

/* 用户上传页（对齐参考稿） */
.uu-page {
  padding: 12px 14px 28px;
  background: #f3f3f3;
  min-height: 70vh;
}
.uu-perk {
  margin: 0 0 14px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: linear-gradient(165deg, #fff45a 0%, #ffe566 42%, #ffd84a 100%);
  box-shadow: 0 2px 0 rgba(180, 140, 0, 0.18);
}
.uu-perk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.uu-perk-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111;
  color: #fff45a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.uu-perk-title {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.02em;
}
.uu-perk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.uu-perk-list li {
  position: relative;
  padding: 8px 10px 8px 28px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #1a1a1a;
}
.uu-perk-list li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #d60000;
  box-shadow: 0 0 0 3px rgba(214, 0, 0, 0.15);
}
.uu-perk-em {
  color: #d60000;
  font-style: normal;
  font-weight: 800;
  font-size: 1.12em;
}
.uu-pick {
  text-align: center;
  padding: 36px 12px;
  background: #fff;
  border-radius: 10px;
}
.uu-pick-btn {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  background: #fff;
  font-size: 15px;
  color: #222;
}
.uu-form {
  background: transparent;
}
.uu-filemeta {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.uu-filename {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  word-break: break-all;
  line-height: 1.35;
}
.uu-filespec {
  margin-top: 6px;
  font-size: 12px;
}
.uu-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 14px;
  color: #222;
  font-weight: 600;
}
.uu-tip {
  font-weight: 400;
  color: #999;
  font-size: 12px;
  margin-left: 4px;
}
.uu-input,
.uu-select,
.uu-textarea {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: #fff;
  color: #222;
  padding: 11px 12px;
  font-size: 14px;
  margin: 0 0 4px;
  font-family: inherit;
}
.uu-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.45;
}
.uu-cover-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}
.uu-outline {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #333;
  font-size: 14px;
}
.uu-cover-wrap {
  width: 100%;
  max-width: 280px;
  margin: 0 auto 14px;
  border-radius: 8px;
  overflow: hidden;
  background: #e8e8e8;
  min-height: 120px;
}
.uu-cover-wrap img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.uu-note {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 0 2px;
}
.uu-queue {
  margin: 12px 0 8px;
}
.uu-queue-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #222;
}
.uu-q-item {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  margin: 0 0 10px;
}
.uu-q-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  word-break: break-all;
}
.uu-q-meta {
  margin-top: 4px;
  font-size: 12px;
}
.uu-q-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: #ececec;
  overflow: hidden;
}
.uu-q-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: #d60000;
  border-radius: 999px;
}
.uu-q-err {
  margin-top: 6px;
  color: #d60000;
  font-size: 12px;
}
.uu-q-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.uu-q-btn {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #333;
}
.uu-q-btn.primary {
  border-color: #d60000;
  color: #d60000;
  font-weight: 700;
}
.uu-progress {
  min-height: 20px;
  margin: 0 0 10px;
  font-size: 13px;
}
.uu-mine {
  margin-top: 18px;
}
.uu-mine-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}
.uu-mine-row {
  padding: 8px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 13px;
  color: #555;
}

/* 超级编排账号 */
.curator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px 6px;
  padding: 8px 12px;
  background: #111;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}
.curator-bar.on {
  background: #0b5;
}
.curator-bar button {
  border: 0;
  background: #fff;
  color: #111;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
}
.curator-bar.on button {
  background: #063;
  color: #fff;
}
.video-card.is-pinned .video-cover {
  outline: 2px solid #0b5;
  outline-offset: -2px;
}
.curator-pin-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;
  background: #0b5;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
}
.curator-card-btn {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 4;
  border: 0;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
}
.curator-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  text-align: left;
}
.curator-edit-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
.dialog.curator-dialog {
  width: min(100%, 420px);
  max-height: min(86vh, 720px);
  overflow: auto;
  text-align: left;
}
.curator-pick-block {
  margin-top: 12px;
  text-align: left;
}
.curator-pick-label {
  font-size: 13px;
  font-weight: 800;
  color: #222;
  margin-bottom: 8px;
}
.curator-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 120px;
  overflow: auto;
}
.curator-chip {
  border: 1px solid #ddd;
  background: #f6f6f6;
  color: #333;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 8px;
}
.curator-chip.on {
  background: #111;
  border-color: #111;
  color: #fff;
}
#curatorPickTip {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  color: #0a7a3e;
}

.curator-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.curator-bar-actions button {
  border: 0;
  background: #fff;
  color: #111;
  font-weight: 800;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
}
.curator-bar.on .curator-bar-actions button {
  background: #063;
  color: #fff;
}
.curator-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,.45);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curator-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.video-card.is-selected .video-cover,
.box-card-item.is-selected .box-cover {
  outline: 2px solid #2d7cff;
  outline-offset: -2px;
}
.curator-pin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 13px;
  font-weight: 700;
}
.curator-box-list {
  max-height: 160px;
  overflow: auto;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.curator-box-item {
  text-align: left;
  border: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 8px 10px;
}
.curator-box-item.on {
  border-color: #111;
  background: #111;
  color: #fff;
}
.curator-box-item b { display: block; font-size: 13px; }
.curator-box-item span { font-size: 11px; opacity: .8; }
.box-card-item { position: relative; }
.box-enter-mini {
  margin-left: auto;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.box-card-item.curator-on .box-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== drawer categories v4 ===== */
.drawer-categories {
  display: block !important;
  padding: 12px 12px 10px !important;
  background: #fff !important;
  border-bottom: 1px solid #ececec;
  font-size: 14px !important;
}
.drawer-cat-zones {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 24px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #f0f0f0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-categories .drawer-zone,
.drawer-cat-zones .drawer-zone {
  position: relative;
  flex: 0 0 auto;
  min-height: 0 !important;
  padding: 2px 0 7px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #f5a623 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #222 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.drawer-cat-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 14px;
  max-height: none !important;
  overflow: visible !important;
  padding: 2px 0 0 !important;
}
.drawer-cat-item {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 8px 4px 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #555 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: center;
  white-space: nowrap !important;
  overflow: visible !important;
}
.drawer-cat-item .drawer-cat-text {
  display: inline-block;
  width: auto;
  max-width: 100%;
  color: #555 !important;
  font-weight: 400 !important;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.drawer-cat-item:active,
.drawer-cat-item:active .drawer-cat-text {
  color: #333 !important;
}
.cat-hot-badge { display: none !important; }
.drawer-cat-item,
.drawer-cat-zones .drawer-zone {
  position: relative;
}
.drawer-cat-item.is-updated .drawer-cat-text {
  color: #111 !important;
  font-weight: 600;
}
/* 角标固定宽高区间，不撑开三列；>=100 前端显示 99+ */
.cat-today-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 4px !important;
  min-width: 18px;
  max-width: 28px;
  height: 15px;
  border-radius: 999px;
  background: #ff3b30 !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  line-height: 15px !important;
  letter-spacing: -0.04em;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(255, 59, 48, 0.45);
  -webkit-font-smoothing: antialiased;
}
/* +N 气泡：紧贴该分类文字最右侧（末字右边 1px），不挡字 */
.drawer-cat-item .drawer-cat-text,
.drawer-zone-inner,
.zone-tab-label {
  position: relative !important;
  display: inline-block !important;
  max-width: none;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  z-index: 1;
}
.drawer-cat-item .cat-today-badge,
.drawer-zone-inner .cat-today-badge,
.zone-tab-label .cat-today-badge {
  position: absolute !important;
  top: -7px !important;
  left: calc(100% + 1px) !important;
  right: auto !important;
  z-index: 2;
  pointer-events: none;
}
.zone-tab {
  overflow: visible !important;
}
.zone-tab-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}
/* 有角标时自动加大间距，避免和旁边分类挤在一起 */
.drawer-cat-list.has-today-badges {
  column-gap: 18px !important;
  row-gap: 18px !important;
}
.drawer-cat-zones.has-today-badges {
  gap: 0 32px !important;
}
.zone-nav.has-today-badges .zone-tab {
  padding-left: 6px;
  padding-right: 6px;
}
@media (min-width: 380px) {
  .drawer-cat-list.has-today-badges {
    column-gap: 22px !important;
  }
}
.zone-nav {
  overflow: visible !important;
  padding-top: 0;
  padding-bottom: 10px;
  margin-top: -4px;
}
.drawer-cat-zones {
  overflow-x: auto;
  overflow-y: visible !important;
  padding-top: 8px !important;
}
.drawer-categories {
  overflow: visible !important;
}
.drawer-cat-item {
  overflow: visible !important;
  padding-top: 8px !important;
}
.drawer-cat-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px 0 2px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #b45309 !important;
  font-size: 13px !important;
  font-weight: 600;
  text-align: center;
}
@media (min-width: 380px) {
  .drawer-cat-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 14px;
  }
}
.drawer-zone-inner,
.zone-tab-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ===== end drawer categories v4 ===== */

.box-manage-tip {
  margin: 0 12px 10px;
  padding: 8px 10px;
  background: #fff6e8;
  color: #8a4b00;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.box-video-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  background: #d60000;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  min-height: 28px;
}
.video-card.box-manage-on .video-cover {
  outline: 1px dashed rgba(214, 0, 0, 0.45);
  outline-offset: -1px;
}


/* 短视频：按封面图高度（宽度一致） */
.video-grid.cover-natural .video-cover,
.video-grid.cover-natural .video-cover.tall,
.video-grid.cover-natural .video-cover.short {
  height: auto;
  min-height: 80px;
  aspect-ratio: auto;
  background-size: 100% auto;
  background-position: top center;
}
.video-grid.cover-natural .video-cover > img.cover-img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  vertical-align: top;
}
.video-grid.cover-natural .video-cover .badge-row,
.video-grid.cover-natural .video-cover .duration,
.video-grid.cover-natural .video-cover .play,
.video-grid.cover-natural .video-cover .curator-check,
.video-grid.cover-natural .video-cover .curator-card-btn,
.video-grid.cover-natural .video-cover .box-video-remove,
.video-grid.cover-natural .video-cover .curator-pin-mark {
  position: absolute;
}

/* cover-natural masonry pack */
.video-grid.cover-natural {
  display: block;
  column-count: 2;
  column-gap: 8px;
  padding: 8px;
  align-items: unset;
}
.video-grid.cover-natural .video-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 12px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}