@media (max-width: 768px) {
  /* 1. 页面与播放器：背景留出浅灰色间隔，播放器保持 16:9。 */
  .hl-live-page--mobile {
    min-height: 100vh;
    /* iOS 中 overflow 会创建滚动容器，从而使播放器 / Tab 的 sticky 失效。 */
    overflow: visible;
    background: #f3f5f7;
    font-family: Arial, "Microsoft YaHei", sans-serif;
  }

  .hl-live-page--mobile .hl-live-player {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    line-height: 0;
  }

  .hl-live-page--mobile .hl-live-player__video {
    display: block;
    object-fit: contain;
    vertical-align: top;
  }

  /* 播放器与栏目导航始终停留在手机可视区顶部，内容在其下方滚动。 */
  .hl-live-mobile-player {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
  }

  .hl-live-mobile-player .hl-live-player {
	background: #101114;
	min-height: 0;
  }

  .hl-live-mobile-player .hl-live-player__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
  }

  /* TCPlayer 出现加载失败时，任何内部节点都不得撑开或挤走 16:9 容器。 */
  .hl-live-mobile-player .hl-live-player > :not(.hl-live-player__message):not(.hl-live-player__retry) {
    max-width: 100% !important;
  }

  .hl-live-mobile-player .hl-live-player__message {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 15px;
  }

  .hl-live-mobile-player .hl-live-player.has-error,
  .hl-live-mobile-player .hl-live-player.has-error::before {
    background-color: #101114;
  }

  /* 2. 简介 / 互动导航：白底、等宽、橙色下划线表示当前栏目。 */
  .hl-live-mobile-tabs {
    position: sticky;
    top: 56.25vw;
    z-index: 41;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e9edf1;
    background: #fff;
    box-shadow: 0 1px 3px rgba(28, 39, 50, .06);
  }

  .hl-live-mobile-tabs button {
    position: relative;
    height: 50px;
    border: 0;
    padding: 0;
    background: #fff;
    color: #9aa4b0;
    font-size: 16px;
  }

  .hl-live-mobile-tabs .is-active {
    color: #27313d;
    font-weight: 600;
  }

  .hl-live-mobile-tabs .is-active::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 26px;
    height: 3px;
    transform: translateX(-50%);
    background: #ff7b4c;
    content: "";
  }

  /* 3. 简介面板：只控制三个卡片之间的间距，不设置统一白底。 */
  .hl-live-mobile-intro {
    padding: 12px;
  }

  /* 4. 基本信息卡片：标题 -> 状态/观看人数同一行 -> 分割线 -> 时间/地址。 */
  .hl-live-mobile-info-card {
    padding: 18px 18px 14px;
    border-radius: 10px;
    background: #fff;
  }

  .hl-live-mobile-info-card__title {
    margin: 0;
    color: #242d38;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.48;
  }

  .hl-live-mobile-info-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0f3;
  }

  .hl-live-mobile-info-card__meta .hl-live-status {
    margin: 0;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.35;
  }

  .hl-live-mobile-info-card__meta .hl-live-popularity {
    color: #8e99a7;
    font-size: 13px;
    line-height: 1.4;
  }

  /* 时间与地址：标签固定 40px，减少标签与内容之间的空隙。 */
  .hl-live-mobile-info-card__details {
    margin: 0;
    padding: 11px 0 0;
    color: #5e6a79;
    font-size: 14px;
  }

  .hl-live-mobile-info-card__details div {
    display: flex;
    align-items: flex-start;
    margin: 7px 0;
  }

  .hl-live-mobile-info-card__details dt {
	flex: 0 0 66px;
    color: #323c48;
    font-weight: 600;
    line-height: 1.55;
	white-space: nowrap;
  }

  .hl-live-mobile-info-card__details dd {
    margin: 0;
    line-height: 1.55;
	white-space: nowrap;
  }

  /* 两个完整日期仍保持单行展示，避免把“直播时间”标签拆开。 */
  .hl-live-mobile-info-card__details div:first-child dd {
    font-size: 12px;
    letter-spacing: -.15px;
  }

  /* 5. 主播卡片：独立灰底圆角卡片，与上、下卡片分别留 10px 间距。 */
  .hl-live-mobile-anchor-card {
    margin-top: 10px;
    padding: 14px;
    border-radius: 10px;
    background: #eef1f4;
  }

  .hl-live-mobile-anchor-card:empty {
    display: none;
  }

  .hl-live-mobile-anchor-card .hl-live-anchor {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .hl-live-mobile-anchor-card .hl-live-anchor__avatar {
    flex: 0 0 46px;
  }

  .hl-live-mobile-anchor-card .hl-live-anchor__avatar img {
    display: block;
    width: 46px !important;
    height: 46px !important;
    max-width: none !important;
    margin: 0;
    border-radius: 8px;
    object-fit: cover;
  }

  .hl-live-mobile-anchor-card .hl-live-anchor__content {
    min-width: 0;
  }

  .hl-live-mobile-anchor-card .hl-live-anchor__content h2 {
    overflow: hidden;
    margin: 0;
    color: #303a46;
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hl-live-mobile-anchor-card .hl-live-anchor__content p {
    overflow: hidden;
    margin: 3px 0 0;
    color: #778290;
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 6. 活动简介卡片：独立白底圆角，正文和图片均在卡片内自适应。 */
  .hl-live-mobile-description-card {
    margin-top: 10px;
    padding: 18px;
    border-radius: 10px;
    background: #fff;
  }

  .hl-live-mobile-description-card .hl-live-description {
    margin: 0;
  }

  .hl-live-mobile-description-card .hl-live-description h2 {
    margin: 0 0 12px;
    color: #303a46;
    font-size: 17px;
    line-height: 1.4;
  }

  .hl-live-mobile-description-card .hl-live-description p {
    margin: 0 0 10px;
    color: #596575;
    font-size: 14px;
    line-height: 1.78;
  }

  .hl-live-mobile-description-card .hl-live-description img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 360px;
    margin: 12px 0;
    border-radius: 6px;
    object-fit: contain;
  }

  /* 7. 互动区：使用独立浅灰蓝背景，评论区与简介区明显区分。 */
  .hl-live-mobile-interaction {
    min-height: calc(100vh - 260px);
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    background: #f3f7fb;
  }

  .hl-live-mobile-interaction .hl-live-comments {
    min-height: calc(100vh - 320px);
  }

  .hl-live-mobile-interaction .hl-live-comments__header {
    display: none;
  }

  .hl-live-mobile-interaction .hl-live-comments__list {
    margin: 0;
    padding: 20px 18px 110px;
  }
  .hl-live-mobile-interaction .hl-live-comments__toast {
    position: fixed;
    z-index: 32;
    top: auto;
    bottom: calc(88px + env(safe-area-inset-bottom));
    font-size: 14px;
  }

  .hl-live-mobile-interaction .hl-live-comment {
    justify-content: flex-end;
    gap: 10px;
    border: 0;
  }

  .hl-live-mobile-interaction .hl-live-comment img {
    order: 2;
    width: 42px;
    height: 42px;
  }

  .hl-live-mobile-interaction .hl-live-comment div {
    max-width: calc(100% - 62px);
  }

  .hl-live-mobile-interaction .hl-live-comment strong {
    display: block;
    color: #7b8795;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
  }

  .hl-live-mobile-interaction .hl-live-comment p {
    display: inline-block;
    margin: 6px 0 0;
    padding: 10px 14px;
    border-radius: 9px;
    background: #dce9ff;
    color: #2e394a;
    font-size: 15px;
    line-height: 1.45;
  }

  /* 8. 底部评论输入框：固定底部，自动避开 iPhone 安全区。 */
  .hl-live-mobile-interaction .hl-live-comments__form,
  .hl-live-mobile-interaction .hl-live-comments__login {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border: 0;
    background: #fff;
    box-shadow: 0 -1px 8px rgba(20, 35, 50, .08);
  }

  .hl-live-mobile-interaction .hl-live-comments__form textarea {
    min-height: 40px;
    max-height: 96px;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    background: #f5f6f8;
    font-size: 16px;
    line-height: 20px;
  }

  .hl-live-mobile-interaction .hl-live-comments__form div {
    display: contents;
  }

  .hl-live-mobile-interaction .hl-live-comments__form div span {
    display: none;
  }

  .hl-live-mobile-interaction .hl-live-comments__form button {
    flex: 0 0 auto;
    padding: 7px 4px;
    background: transparent;
    color: #ff7b4c;
    font-size: 16px;
  }
  .hl-live-mobile-interaction .hl-live-comments__form button:disabled {
    color: #a9b1bc;
    background: transparent;
    cursor: not-allowed;
  }

  .hl-live-mobile-interaction .hl-live-comments__login {
    justify-content: center;
    color: #7b8795;
  }

  /* 9. 键盘弹出：顶部播放器保持原位，输入框跟随键盘顶部。 */
  .hl-live-keyboard-open .hl-live-page--mobile {
    min-height: auto;
  }

  .hl-live-keyboard-open .hl-live-mobile-player,
  .hl-live-keyboard-open .hl-live-mobile-tabs {
    pointer-events: none;
  }

  .hl-live-keyboard-open .hl-live-mobile-interaction .hl-live-comments__form {
    bottom: var(--hl-live-keyboard-offset, 0px);
  }
}