/* Shared platform navigation and compact mobile content cards. */
.brand {
  height: 200px !important;
  min-height: 200px !important;
}

.brandLogo {
  width: 84px !important;
  height: 111px !important;
  max-width: 84px !important;
  object-fit: contain !important;
}

header .topPlatformSwitcher {
  order: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 1 440px;
  width: min(440px, 46vw) !important;
  margin: 0 0 0 auto !important;
  padding: 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(210, 210, 216, .9) !important;
  border-radius: 13px;
  background: rgba(239, 239, 242, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 12px rgba(0, 0, 0, .035);
}

body.platform-video { --platform-accent: #666fa3; --platform-accent-soft: #eef0f8; }
body.platform-xhs { --platform-accent: #c45462; --platform-accent-soft: #faecef; }
body.platform-douyin { --platform-accent: #6f657f; --platform-accent-soft: #f1eef5; }
body.platform-wechat { --platform-accent: #078a4a; --platform-accent-soft: #eaf7f0; }

html.platform-video,
body.platform-video {
  overflow-x: clip !important;
}

header .topPlatformSwitcher a.active {
  color: var(--platform-accent) !important;
  background: var(--platform-accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--platform-accent) 18%, transparent), 0 2px 8px color-mix(in srgb, var(--platform-accent) 16%, transparent) !important;
  font-weight: 750 !important;
}

header .topPlatformSwitcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 550;
  letter-spacing: .01em;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

header .topPlatformSwitcher a:not(.active):hover {
  color: #303034;
  background: rgba(255, 255, 255, .68);
}

header .actions {
  order: 3;
  margin-left: 8px;
}

@media (min-width: 761px) {
  main > header.platformHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .055);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

@media (max-width: 760px) {
  main > header,
  main > header.platformHeader {
    position: static !important;
    top: auto !important;
  }

  aside {
    display: none !important;
  }

  header .topPlatformSwitcher {
    display: none !important;
  }

  .mobilePlatformDock {
    position: fixed;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 62px;
    padding: 5px;
    border: 1px solid rgba(220, 220, 225, .92);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobilePlatformDock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    border-radius: 13px;
    color: #72727a;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobilePlatformDock a svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .mobilePlatformDock a.active {
    color: var(--platform-accent, var(--accent, #6669a8));
    background: var(--platform-accent-soft, var(--accent-soft, #f0f0f7));
  }

  .tablePanel table tbody,
  .xhsTable tbody,
  .dyTable tbody,
  .wxTable tbody {
    gap: 6px !important;
    padding: 6px !important;
  }

  .tablePanel table tr,
  .xhsTable tr,
  .dyTable tr,
  .wxTable tr {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px 7px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }

  .tablePanel table td,
  .xhsTable td,
  .dyTable td,
  .wxTable td {
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  .tablePanel table td:first-child,
  .xhsTable td:first-child,
  .dyTable td:first-child,
  .wxTable td:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 1px;
  }

  .tablePanel table td:not(:first-child)::before,
  .xhsTable td:not(:first-child)::before,
  .dyTable td:not(:first-child)::before,
  .wxTable td:not(:first-child)::before {
    margin-bottom: 1px !important;
    color: #8b8b93 !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  .videoCell,
  .xhsCell {
    min-height: 58px;
    gap: 8px !important;
    align-items: center !important;
  }

  .videoCover,
  .xhsCover {
    width: 44px !important;
    height: 58px !important;
    flex: 0 0 44px !important;
    border-radius: 6px !important;
  }

  .videoTitle,
  .videoTitle.long,
  .xhsTitle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    max-width: none !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  .tablePanel table td:nth-child(2),
  .xhsTable td:nth-child(2),
  .dyTable td:nth-child(2),
  .wxTable td:nth-child(2) {
    grid-column: span 2;
  }

  .tablePanel footer,
  .boostFooter,
  .xhsPager {
    min-height: 46px !important;
    padding: 7px 9px !important;
  }

  .platformPager button,
  .pager button {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 761px) {
  .mobilePlatformDock {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .tablePanel table tr,
  .xhsTable tr,
  .dyTable tr,
  .wxTable tr {
    gap: 4px 6px !important;
    padding: 7px 8px !important;
  }

  .tablePanel table td,
  .xhsTable td,
  .dyTable td,
  .wxTable td {
    font-size: 10px !important;
  }
}