.ksjb-mobile-lock {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* b602e6f protected mobile playback, logo, skeleton, and pull-refresh behavior. */
.ksjb-mobile-lock {
  overscroll-behavior-y: none;
}

body.ksjb-mobile-lock {
  overflow: hidden;
  overscroll-behavior: none;
}

.ksjb-mobile-spa-root,
.ksjb-mobile-shell {
  overscroll-behavior-y: none;
}

.ksjb-mobile-topbar {
  position: relative;
  z-index: 45;
}

.ksjb-mobile-main {
  overscroll-behavior-y: contain;
}

.ksjb-player .ksjb-team-logo {
  width: 54px;
  max-width: 54px;
  height: 54px;
}

.ksjb-player .ksjb-team-logo img,
.ksjb-player .ksjb-team-logo b {
  width: 44px;
  height: 44px;
}

.ksjb-player > span:last-child {
  max-width: 62px;
  overflow: hidden;
  color: #5a6780;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-player-controls {
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto;
}

.ksjb-player-controls button span {
  color: currentColor;
}

.ksjb-player-controls .ksjb-player-landscape-btn {
  display: none;
  grid-template-columns: 18px auto;
  gap: 4px;
  width: auto;
  min-width: 56px;
  padding: 0 8px;
  color: #15375e;
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ksjb-player-controls .ksjb-player-pip-btn {
  color: #10151f;
  background: linear-gradient(135deg, #d8ecff, #72adff);
}

.ksjb-player-controls .ksjb-player-landscape-btn em {
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.ksjb-site-player:fullscreen .ksjb-player-landscape-btn,
.ksjb-site-player.is-web-fullscreen .ksjb-player-landscape-btn {
  display: inline-grid;
}

.ksjb-site-player.is-landscape-animating::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, #172033 0 20%, transparent 21%),
    radial-gradient(circle at 26% 26%, #172033 0 12%, transparent 13%),
    radial-gradient(circle at 74% 26%, #172033 0 12%, transparent 13%),
    radial-gradient(circle at 27% 76%, #172033 0 12%, transparent 13%),
    radial-gradient(circle at 74% 76%, #172033 0 12%, transparent 13%),
    #fff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
  transform: translate(-50%, -50%) rotate(0deg) scale(.84);
  animation: ksjbLandscapeBall .78s cubic-bezier(.2, .82, .22, 1) both;
  pointer-events: none;
}

.ksjb-site-player.is-landscape-animating::after {
  content: "正在切换横屏";
  position: absolute;
  left: 50%;
  top: calc(50% + 64px);
  z-index: 12;
  border-radius: 999px;
  padding: 7px 14px;
  color: #fff;
  background: rgba(5, 10, 20, .62);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: ksjbLandscapeText .78s ease both;
  pointer-events: none;
}

/* X5 homepage alignment: carousel, match favorites, live cards. */
.ksjb-page[data-view="home"] {
  gap: 0;
}

.ksjb-page[data-view="home"] .ksjb-state-block {
  margin: 0 0 8px;
}

.ksjb-brand-hero.ksjb-x5-carousel {
  width: 100%;
  min-height: 0;
  aspect-ratio: 353 / 150;
  margin: 16px auto 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #dce8f7;
  box-shadow: none;
}

.ksjb-x5-carousel .ksjb-brand-hero-slide::after {
  display: none;
}

.ksjb-x5-carousel .ksjb-hero-dots {
  bottom: 2px;
  gap: 4px;
}

.ksjb-x5-carousel .ksjb-hero-dots button {
  width: 10px;
  height: 10px;
  background: rgba(231, 239, 251, .9);
  box-shadow: 0 1px 4px rgba(55, 88, 135, .25);
}

.ksjb-x5-carousel .ksjb-hero-dots button.is-active {
  width: 16px;
  background: #6aa2ff;
}

.ksjb-x5-favorite-strip {
  width: calc(100% + 28px);
  gap: 0;
  margin: 2px -14px 0;
  padding: 0 6px 8px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-padding: 6px;
}

.ksjb-x5-favorite-card {
  flex: 0 0 48vw !important;
  width: 48vw;
  height: 30.4vw !important;
  max-width: 230px;
  max-height: 146px;
  min-height: 0 !important;
  aspect-ratio: auto;
  display: block;
  margin-right: -4px;
  border: 1px solid rgba(218, 229, 246, .84);
  border-radius: 18px;
  padding: 18px 6px 8px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(253, 254, 255, .98)),
    radial-gradient(circle at 12% 16%, rgba(114, 166, 255, .13), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 5px 10px rgba(87, 125, 181, .2);
}

.ksjb-x5-favorite-card.is-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  margin-right: 0;
  text-align: center;
}

.ksjb-x5-favorite-card.is-empty strong {
  color: #505b71;
  font-size: 13px;
  font-weight: 900;
}

.ksjb-x5-favorite-card.is-empty span {
  color: #9ba7bd;
  font-size: 11px;
  font-weight: 750;
}

.ksjb-x5-match-teams {
  display: block !important;
  min-width: 0;
}

.ksjb-x5-match-team {
  display: flex !important;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 24px;
}

.ksjb-x5-match-team + .ksjb-x5-match-team {
  margin-top: 4px;
}

.ksjb-x5-match-team strong {
  display: block;
  width: 70px;
  max-width: calc(100% - 26px);
  overflow: hidden;
  color: #505b71;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.ksjb-x5-team-logo {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
}

.ksjb-x5-team-logo img,
.ksjb-x5-team-logo b {
  width: 20px;
  height: 20px;
}

.ksjb-x5-team-logo b {
  color: #fff;
  background: linear-gradient(180deg, #79adff, #4d8dff);
  font-size: 10px;
}

.ksjb-x5-match-time {
  position: absolute;
  top: 27.5%;
  right: 12.777778%;
  display: grid !important;
  place-items: center;
  width: 17.222222%;
  min-width: 31px;
  height: 24px;
  border: 1px solid #e6edf7;
  border-radius: 12px;
  color: #9ba7bd;
  background: rgba(255, 255, 255, .78);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
}

.ksjb-x5-match-time span,
.ksjb-x5-match-time strong {
  display: block;
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
}

.ksjb-x5-favorite-bottom {
  position: absolute;
  left: 14px;
  right: 5px;
  bottom: 8px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ksjb-x5-league {
  display: block;
  min-width: 0;
  max-width: calc(100% - 62px);
  overflow: hidden;
  color: #505b71;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-x5-favorite-card button {
  position: static;
  flex: 0 0 54px;
  width: 54px;
  height: 28px;
  justify-self: auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #a9d0ff 0%, #70aafa 52%, #4e8fec 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8), 0 4px 8px rgba(70, 128, 221, .42);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.ksjb-x5-live-title {
  width: calc(100% + 28px);
  margin: 16px -14px 8px;
  padding-left: 12px;
}

.ksjb-x5-live-title span {
  display: block;
  color: #505b71;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 950;
}

.ksjb-page[data-view="home"] .ksjb-live-grid {
  width: calc(100% + 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  margin: 0 -14px;
  padding: 0 9px 0;
}

.ksjb-x5-live-card {
  width: 100%;
  min-height: 0;
  aspect-ratio: 176 / 152;
  border: 1px solid rgba(219, 230, 247, .92);
  border-radius: 17px;
  padding: 3px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #f9fbff 100%);
  box-shadow: 0 4px 8px rgba(87, 125, 181, .2);
}

.ksjb-x5-live-cover {
  width: 100%;
  aspect-ratio: 170 / 96;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #dce8f7;
}

.ksjb-x5-live-cover::after,
.ksjb-x5-live-card .ksjb-live-ribbon,
.ksjb-x5-live-card .ksjb-live-heat {
  display: none;
}

.ksjb-x5-live-body {
  display: grid;
  gap: 0;
  height: 48px;
  padding: 8px 5px 0;
}

.ksjb-x5-live-name {
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  color: #505b71;
  font-size: 12px;
  line-height: 1.08;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}

.ksjb-x5-live-meta {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 16px;
  color: #9ba7bd;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
}

.ksjb-x5-live-meta .ksjb-avatar {
  width: 14px;
  height: 14px;
  font-size: 8px;
}

.ksjb-x5-anchor-name {
  min-width: 0;
  overflow: hidden;
  color: #9ba7bd;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-x5-hot {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: #9ba7bd;
  white-space: nowrap;
}

.ksjb-x5-hot i {
  width: 12px;
  height: 12px;
  background: center / contain no-repeat url("/static/images/mobile-ui/icons/active/live.svg");
  opacity: .44;
}

/* X5 source-port homepage modules. Keep these class names aligned with /private/tmp/x5-mobile-source. */
.ksjb-page[data-view="home"] {
  --x5r: calc(min(100vw, 480px) / 3.75);
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4,
.ksjb-page[data-view="home"] .index__horizontal_container___2SbF0,
.ksjb-page[data-view="home"] .index__live_subtitle_wrap___1iLG0,
.ksjb-page[data-view="home"] .index__live_studio_list_wrap___Gu9Mu {
  width: calc(var(--x5r) * 3.75);
  margin-left: -14px;
  margin-right: -14px;
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--x5r) * .16);
  margin-bottom: calc(var(--x5r) * .16);
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-container {
  position: relative;
  width: calc(var(--x5r) * 3.53);
  height: calc(var(--x5r) * 1.5);
  overflow: hidden;
  border-radius: calc(var(--x5r) * .12);
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(calc(var(--hero-index, 0) * -100%));
  transition: transform .28s ease;
  will-change: transform;
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0 calc(var(--x5r) * .01);
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-slide a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  background-size: cover;
  text-decoration: none;
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-slide img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: crisp-edges;
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-pagination-bullets {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--x5r) * .02) !important;
  display: flex;
  justify-content: center;
  gap: 0;
  text-align: center !important;
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-pagination-bullet {
  width: calc(var(--x5r) * .1);
  height: calc(var(--x5r) * .1);
  margin: 0 calc(var(--x5r) * .04) 0 0 !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent url("/zhibo/dian-2.png") center / 100% 100% no-repeat;
  opacity: 1;
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-pagination-bullet-active,
.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .swiper-pagination-bullet.is-active {
  width: calc(var(--x5r) * .16);
  background-image: url("/zhibo/dian-1.png");
}

.ksjb-page[data-view="home"] .index__news_page_carousel___gRel4 .ksjb-worldcup-countdown-slide {
  display: block;
  padding: 0;
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-copy {
  position: absolute;
  left: calc(var(--x5r) * .16);
  top: calc(var(--x5r) * .36);
  width: calc(var(--x5r) * 1.76);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-kicker {
  min-height: calc(var(--x5r) * .18);
  padding: 0 calc(var(--x5r) * .08);
  border-radius: calc(var(--x5r) * .05);
  font-size: calc(var(--x5r) * .075);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-copy strong {
  margin-top: calc(var(--x5r) * .07);
  font-size: calc(var(--x5r) * .28);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-copy em {
  margin-top: calc(var(--x5r) * .05);
  font-size: calc(var(--x5r) * .11);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-units {
  position: absolute;
  left: calc(var(--x5r) * 1.78);
  top: calc(var(--x5r) * .66);
  gap: calc(var(--x5r) * .055);
  transform: translateY(-50%);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-units span {
  width: calc(var(--x5r) * .52);
  min-width: 0;
  height: calc(var(--x5r) * .44);
  gap: calc(var(--x5r) * .035);
  padding: 0 calc(var(--x5r) * .055);
  border-radius: calc(var(--x5r) * .06);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-units b {
  font-size: calc(var(--x5r) * .27);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-countdown-units i {
  font-size: calc(var(--x5r) * .11);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-trophy {
  right: calc(var(--x5r) * .12);
  width: calc(var(--x5r) * .48);
  height: calc(var(--x5r) * .64);
  border-radius: calc(var(--x5r) * .16) calc(var(--x5r) * .16) calc(var(--x5r) * .06) calc(var(--x5r) * .06);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-trophy::before {
  top: calc(var(--x5r) * .055);
  font-size: calc(var(--x5r) * .1);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-trophy::after {
  bottom: calc(var(--x5r) * .075);
  width: calc(var(--x5r) * .22);
  height: calc(var(--x5r) * .22);
}

.ksjb-page[data-view="home"] .ksjb-worldcup-trophy i {
  width: calc(var(--x5r) * .16);
  height: calc(var(--x5r) * .32);
  margin-top: calc(var(--x5r) * .14);
}

.ksjb-page[data-view="home"] .index__horizontal_container___2SbF0 {
  margin-top: calc(var(--x5r) * .02);
}

.ksjb-page[data-view="home"] .index__live_recommend_carousel_wrap___2Pn3F {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0 calc(var(--x5r) * .06);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.ksjb-page[data-view="home"] .index__live_recommend_carousel_wrap___2Pn3F::-webkit-scrollbar {
  display: none;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4 {
  --color_1: #505b71;
  --color_2: #9ba7bd;
  --color_3: #505b71;
  display: inline-block;
  width: calc(var(--x5r) * 1.8);
  height: calc(var(--x5r) * 1.14);
  margin-right: calc(var(--x5r) * -.04);
  padding: calc(var(--x5r) * .18) calc(var(--x5r) * .06) calc(var(--x5r) * .08) calc(var(--x5r) * .14);
  position: relative;
  color: var(--color_1);
  background-image: url("/zhibo/yuyuexinxi-light.png");
  background-size: 100% 100%;
  text-align: left;
  vertical-align: top;
  text-decoration: none;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-empty {
  display: inline-grid;
  place-content: center;
  gap: calc(var(--x5r) * .06);
  text-align: center;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-empty strong {
  color: #505b71;
  font-size: calc(var(--x5r) * .13);
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-empty span {
  color: #9ba7bd;
  font-size: calc(var(--x5r) * .1);
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-skeleton,
.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C.is-skeleton {
  pointer-events: none;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-skeleton .ksjb-skeleton-ball {
  display: block;
  width: calc(var(--x5r) * .2);
  height: calc(var(--x5r) * .2);
  flex: 0 0 auto;
  margin: 0 calc(var(--x5r) * .02) 0 0;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-skeleton .index__live_host_team_left___1gt0r .ksjb-skeleton-line {
  width: calc(var(--x5r) * .7);
  height: calc(var(--x5r) * .12);
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-skeleton .index__live_league_name___3inPz {
  width: calc(var(--x5r) * .42);
  height: calc(var(--x5r) * .1);
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-skeleton .index__live_reserve_button___1geGU {
  background-image: none;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4.is-skeleton .index__live_reserve_time___i3H5B .ksjb-skeleton-line {
  width: calc(var(--x5r) * .24);
  height: calc(var(--x5r) * .08);
  margin: 0 0 calc(var(--x5r) * .025);
}

.ksjb-page[data-view="home"] .index__live_host_team___20C1j {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ksjb-page[data-view="home"] .index__live_host_team_down___3HOta {
  margin-top: calc(var(--x5r) * .04);
}

.ksjb-page[data-view="home"] .index__live_host_team_left___1gt0r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--x5r) * .92);
  min-width: 0;
}

.ksjb-page[data-view="home"] .index__live_host_team_left___1gt0r .ksjb-x5-team-mark {
  display: grid;
  place-items: center;
  flex: 0 0 calc(var(--x5r) * .2);
  width: calc(var(--x5r) * .2);
  height: calc(var(--x5r) * .2);
  margin: 0 calc(var(--x5r) * .02) 0 0;
  overflow: hidden;
  border-radius: 50%;
  color: #6c7f9d;
  background: #f2f6fd;
  font-size: calc(var(--x5r) * .08);
  font-weight: 900;
  line-height: 1;
}

.ksjb-page[data-view="home"] .index__live_host_team_left___1gt0r .ksjb-x5-team-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ksjb-page[data-view="home"] .index__live_host_team_left___1gt0r .ksjb-x5-team-mark b {
  display: block;
  font: inherit;
  line-height: 1;
}

.ksjb-page[data-view="home"] .index__live_host_team_left___1gt0r .ksjb-x5-team-mark.has-logo b {
  display: none;
}

.ksjb-page[data-view="home"] .index__live_host_team_left___1gt0r > .ksjb-x5-team-name {
  display: block;
  width: calc(var(--x5r) * .68);
  overflow: hidden;
  color: var(--color_1);
  font-size: calc(var(--x5r) * .12);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-page[data-view="home"] .index__live_host_team_right___1zUH8 {
  margin-right: calc(var(--x5r) * .23);
  color: transparent;
  font-size: calc(var(--x5r) * .12);
  font-weight: 500;
  text-align: right;
}

.ksjb-page[data-view="home"] .index__live_bottom_wrap___1WWGM {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(var(--x5r) * .07);
}

.ksjb-page[data-view="home"] .index__live_league_name___3inPz {
  min-width: 0;
  max-width: calc(var(--x5r) * .82);
  overflow: hidden;
  color: var(--color_3);
  font-size: calc(var(--x5r) * .1);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-page[data-view="home"] .index__live_reserve_button___1geGU {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--x5r) * .54);
  height: calc(var(--x5r) * .28);
  margin-right: calc(var(--x5r) * .05);
  color: #fff;
  background-image: url("/zhibo/yuyue.png");
  background-size: 100% 100%;
  font-size: calc(var(--x5r) * .11);
  font-weight: 600;
}

.ksjb-page[data-view="home"] .index__live_reserve_time___i3H5B {
  position: absolute;
  right: calc(var(--x5r) * .23);
  top: calc(var(--x5r) * .275);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--x5r) * .31);
  height: calc(var(--x5r) * .24);
  color: var(--color_2);
  font-size: calc(var(--x5r) * .1);
  line-height: 1.1;
  text-align: center;
}

.ksjb-page[data-view="home"] .index__live_reserve_time___i3H5B p {
  margin: 0;
  padding: 0;
}

.ksjb-page[data-view="home"] .index__live_subtitle_wrap___1iLG0 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--x5r) * .16);
  margin-bottom: calc(var(--x5r) * .08);
  padding-left: calc(var(--x5r) * .12);
}

.ksjb-page[data-view="home"] .index__live_subtitle_wrap_span___3yycN {
  color: #505b71;
  font-size: calc(var(--x5r) * .14);
  font-weight: 600;
  line-height: 1;
  margin-left: calc(var(--x5r) * .04);
}

.ksjb-page[data-view="home"] .index__live_studio_list_wrap___Gu9Mu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 calc(var(--x5r) * .09);
}

.ksjb-page[data-view="home"] .index__live_studio_list_wrap___Gu9Mu .list-view-section-body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C {
  width: calc(var(--x5r) * 1.76);
  height: calc(var(--x5r) * 1.52);
  margin-bottom: calc(var(--x5r) * .06);
  padding: calc(var(--x5r) * .03);
  color: #505b71;
  background-image: url("/zhibo/zhibofengmian-light.png");
  background-size: 100% 100%;
  text-align: left;
  text-decoration: none;
}

.ksjb-page[data-view="home"] .index__live_recommend_item_wrap___KuOt4 *,
.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C * {
  text-decoration: none;
}

.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C.is-skeleton .index__live_studio_item_cover_picture___28h03 {
  background-image: none;
}

.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C.is-skeleton .index__live_author_username___2BlvB {
  display: block;
  height: calc(var(--x5r) * .12);
}

.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C.is-skeleton .index__live_avatar_link___1CNN2 {
  flex: 0 0 auto;
  margin-right: calc(var(--x5r) * .02);
}

.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C.is-skeleton .index__live_meta_box_title___1WLJ9 {
  width: calc(var(--x5r) * .66);
}

.ksjb-page[data-view="home"] .index__live_studio_item_wrap___1UV1C.is-skeleton .index__live_meta_box_hot___guzHV .ksjb-skeleton-line {
  width: calc(var(--x5r) * .36);
  height: calc(var(--x5r) * .1);
}

.ksjb-page[data-view="home"] .index__live_studio_item_cover_picture___28h03 {
  width: calc(var(--x5r) * 1.7);
  height: calc(var(--x5r) * .96);
  overflow: hidden;
  border-top-left-radius: calc(var(--x5r) * .14);
  border-top-right-radius: calc(var(--x5r) * .14);
}

.ksjb-page[data-view="home"] .index__live_studio_item_cover_picture___28h03 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-page[data-view="home"] .index__live_author_info_block___2rKH1 {
  width: 100%;
  height: calc(var(--x5r) * .48);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--x5r) * .05);
}

.ksjb-page[data-view="home"] .index__live_author_info_box___1qW_3 {
  flex: 1 1 auto;
  min-width: 0;
}

.ksjb-page[data-view="home"] .index__live_author_username___2BlvB {
  width: calc(var(--x5r) * 1.22);
  overflow: hidden;
  color: #505b71;
  font-size: calc(var(--x5r) * .12);
  line-height: calc(var(--x5r) * .12);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-page[data-view="home"] .index__live_meta_box___A8j1d {
  display: flex;
  align-items: center;
  height: calc(var(--x5r) * .16);
  margin-top: calc(var(--x5r) * .04);
}

.ksjb-page[data-view="home"] .index__live_avatar_link___1CNN2 {
  display: grid;
  place-items: center;
  width: calc(var(--x5r) * .14);
  height: calc(var(--x5r) * .14);
  overflow: hidden;
  border-radius: 50%;
  margin-right: calc(var(--x5r) * .02);
  color: #5d81b8;
  background: linear-gradient(180deg, #edf4ff, #dceaff);
  font-size: calc(var(--x5r) * .08);
  font-weight: 900;
  line-height: 1;
}

.ksjb-page[data-view="home"] .index__live_avatar_link___1CNN2 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-page[data-view="home"] .index__live_avatar_link___1CNN2 b {
  display: block;
  font: inherit;
  line-height: 1;
}

.ksjb-page[data-view="home"] .index__live_avatar_link___1CNN2.has-avatar b {
  display: none;
}

.ksjb-page[data-view="home"] .index__live_meta_box_title___1WLJ9 {
  display: block;
  width: calc(var(--x5r) * .66);
  height: calc(var(--x5r) * .16);
  overflow: hidden;
  color: #9ba7bd;
  font-size: calc(var(--x5r) * .1);
  line-height: calc(var(--x5r) * .16);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-page[data-view="home"] .index__live_meta_box_hot___guzHV {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: calc(var(--x5r) * .11);
}

.ksjb-page[data-view="home"] .index__live_meta_box_hot___guzHV img {
  display: block;
  width: calc(var(--x5r) * .12);
  height: calc(var(--x5r) * .12);
}

.ksjb-page[data-view="home"] .index__live_meta_box_hot___guzHV span {
  color: #9ba7bd;
  font-size: calc(var(--x5r) * .1);
}

@keyframes ksjbLandscapeBall {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(.72);
  }

  34% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(84deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(.92);
  }
}

@keyframes ksjbLandscapeText {
  0%,
  100% {
    opacity: 0;
  }

  28%,
  72% {
    opacity: 1;
  }
}

.ksjb-skeleton-block,
.ksjb-skeleton-line,
.ksjb-skeleton-ball,
.ksjb-skeleton-pill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #e6eff9 0, #f7fbff 45%, #e6eff9 100%);
  background-size: 220% 100%;
  animation: ksjbSkeletonWave 1.15s ease-in-out infinite;
}

.ksjb-skeleton-line {
  display: block;
  width: 72%;
  height: 12px;
  border-radius: 999px;
}

.ksjb-skeleton-line.is-wide {
  width: 96%;
}

.ksjb-skeleton-ball {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.ksjb-skeleton-pill {
  width: 72px;
  height: 28px;
  border-radius: 999px;
}

@keyframes ksjbSkeletonWave {
  0% {
    background-position: 110% 0;
  }

  100% {
    background-position: -110% 0;
  }
}

.ksjb-schedule-main .ksjb-match-team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ksjb-schedule-main .ksjb-match-team.is-home {
  justify-content: flex-end;
}

.ksjb-schedule-main .ksjb-match-team.is-away {
  justify-content: flex-start;
}

.ksjb-match-team em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-team-logo.is-small {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.ksjb-team-logo.is-small img,
.ksjb-team-logo.is-small b {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.ksjb-live-card-skeleton {
  pointer-events: none;
}

.ksjb-live-card-skeleton .ksjb-live-cover {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 8px 8px 0 0;
}

.ksjb-live-card-skeleton .ksjb-live-body {
  display: grid;
  gap: 8px;
}

.ksjb-reserve-card-skeleton {
  display: grid;
  place-items: center;
  gap: 12px;
  pointer-events: none;
}

body.ksjb-mobile-lock {
  position: relative;
  min-width: 0;
}

.ksjb-mobile-spa-root {
  --m-bg: #eaf2fb;
  --m-card: #ffffff;
  --m-card-soft: #fafbfc;
  --m-text: #151922;
  --m-sub: #647084;
  --m-muted: #9aa4b3;
  --m-line: #e8ebf0;
  --m-red: #e6202e;
  --m-sky: #6ea8ff;
  --m-rail: #252a36;
  --m-red-dark: #b90f1a;
  --m-red-soft: #fff0f1;
  --m-gold: #d8ad66;
  --m-green: #18a668;
  --m-blue: #2b6de8;
  --m-shadow: 0 10px 24px rgba(18, 24, 40, .08);
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  z-index: 9000;
  overflow: hidden;
  overscroll-behavior-x: none;
  color: var(--m-text);
  background: #dfe3e8;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

.ksjb-mobile-spa-root * {
  box-sizing: border-box;
}

.ksjb-mobile-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100vw, 480px);
  max-width: 100vw;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  overscroll-behavior-x: none;
  background: var(--m-bg);
}

.ksjb-mobile-topbar {
  display: grid;
  gap: 0;
  padding: 0;
  background: #fff;
}

.ksjb-mobile-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ksjb-mobile-logo img {
  width: 92px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
}

.ksjb-top-links {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  min-width: 0;
  height: 58px;
  overflow: hidden;
  padding: 0 8px;
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(96, 130, 180, .12);
  scrollbar-width: none;
}

.ksjb-top-links::-webkit-scrollbar {
  display: none;
}

.ksjb-top-links button {
  position: relative;
  min-width: 0;
  height: 58px;
  border: 0;
  padding: 0;
  color: #4f5f7a;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.ksjb-top-links button.is-active,
.ksjb-top-links button.is-live {
  color: #4f8cf7;
}

.ksjb-top-links button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: #5a96ff;
  transform: translateX(-50%);
}

.ksjb-app-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 32%),
    linear-gradient(135deg, #34394d, #2a2f42);
}

.ksjb-mobile-spa-root.is-app-shell .ksjb-app-banner {
  grid-template-columns: minmax(0, 1fr);
}

.ksjb-app-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 52px;
  border-radius: 14px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ksjb-app-brand img {
  display: block;
  width: min(202px, 52vw);
  height: auto;
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .24));
}

.ksjb-app-banner button:not(.ksjb-app-brand) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(180deg, #91bcff, #5b95f4);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(76, 142, 243, .22);
}

.ksjb-app-banner button:not(.ksjb-app-brand) svg {
  width: 18px;
  height: 18px;
}

.ksjb-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  color: var(--m-text);
  background: #fff;
  font-size: 18px;
}

.ksjb-icon-btn:active,
.ksjb-tab-btn:active,
.ksjb-live-card:active,
.ksjb-score-row:active,
.ksjb-app-banner button:not(.ksjb-app-brand):active,
.ksjb-top-links button:active,
.ksjb-reserve-card:active,
.ksjb-reserve-card button:active {
  transform: translateY(1px) scale(.975);
}

button.is-repeat-bump,
a.is-repeat-bump,
input.is-repeat-bump {
  animation: ksjb-repeat-bump .26s ease both;
}

@keyframes ksjb-repeat-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.ksjb-mobile-main {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  padding: 14px 14px 84px;
}

.ksjb-mobile-main.is-swipe-locked {
  cursor: grabbing;
  user-select: none;
}

.ksjb-pull-invite {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  height: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(-76px + var(--pull-y, 0px)));
  transition: opacity .18s ease, transform .18s ease;
}

.ksjb-mobile-main.is-pull-active .ksjb-pull-invite,
.ksjb-mobile-main.is-pull-refreshing .ksjb-pull-invite {
  opacity: 1;
}

.ksjb-mobile-main.is-pull-refreshing .ksjb-pull-invite {
  transform: translateY(0);
}

.ksjb-pull-invite-inner {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid rgba(96, 146, 226, .16);
  border-radius: 999px;
  padding: 7px 15px 7px 9px;
  color: #356399;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 22px rgba(69, 116, 181, .14);
  backdrop-filter: blur(10px);
  transform: scale(.96);
  transition: transform .18s ease;
}

.ksjb-mobile-main.is-pull-ready .ksjb-pull-invite-inner,
.ksjb-mobile-main.is-pull-refreshing .ksjb-pull-invite-inner {
  transform: scale(1);
}

.ksjb-pull-invite-inner span {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.ksjb-pull-ball {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 2px solid #1a2b44;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a2b44 0 20%, transparent 21%),
    radial-gradient(circle at 24% 25%, #1a2b44 0 13%, transparent 14%),
    radial-gradient(circle at 76% 25%, #1a2b44 0 13%, transparent 14%),
    radial-gradient(circle at 28% 78%, #1a2b44 0 13%, transparent 14%),
    radial-gradient(circle at 75% 77%, #1a2b44 0 13%, transparent 14%),
    #fff;
  box-shadow: inset 0 -3px 5px rgba(43, 109, 232, .12), 0 4px 10px rgba(43, 109, 232, .18);
  animation: ksjbPullBall 1.05s linear infinite;
}

.ksjb-pull-ball::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(26, 43, 68, .3);
  border-radius: 50%;
}

@keyframes ksjbPullBall {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-3px) rotate(180deg);
  }

  100% {
    transform: translateY(0) rotate(360deg);
  }
}

.ksjb-page {
  display: none;
  gap: 12px;
}

.ksjb-page.is-active {
  display: grid;
}

.ksjb-mobile-spa-root.is-room-entering .ksjb-room-page {
  animation: none;
}

.ksjb-mobile-spa-root.is-room-entering .ksjb-room-player {
  animation: none;
}

@keyframes ksjbRoomPageEnter {
  from {
    opacity: .32;
    transform: translateY(22px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ksjbRoomPlayerEnter {
  0% {
    filter: saturate(.88) brightness(.72);
    transform: translateY(18px) scale(.965);
  }

  68% {
    filter: saturate(1.04) brightness(1.04);
    transform: translateY(0) scale(1.012);
  }

  100% {
    filter: none;
    transform: translateY(0) scale(1);
  }
}

.ksjb-segment {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}

.ksjb-segment::-webkit-scrollbar {
  display: none;
}

.ksjb-chip {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  color: var(--m-sub);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ksjb-chip.is-active {
  border-color: #76aafa;
  color: #fff;
  background: linear-gradient(180deg, #9fc4ff, #5592f5);
  box-shadow: 0 8px 16px rgba(64, 130, 233, .24);
}

.ksjb-match-hero {
  position: relative;
  display: block;
  min-height: 154px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .18) 38%, transparent 60%),
    linear-gradient(180deg, #f8fbff, #dfeeff);
  touch-action: pan-y;
  user-select: none;
}

.ksjb-hero-track {
  display: flex;
  width: 100%;
  min-height: 154px;
  transform: translateX(calc(var(--hero-index, 0) * -100%));
  transition: transform .26s ease;
  will-change: transform;
}

.ksjb-hero-slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  min-height: 154px;
  padding: 18px 12px 24px;
}

.ksjb-match-center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: calc(100% - 170px);
  color: #4e6282;
  text-align: center;
}

.ksjb-match-center span,
.ksjb-match-center em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.ksjb-match-center strong {
  color: #5b6782;
  font-size: 20px;
  font-weight: 950;
}

.ksjb-match-center b {
  max-width: 260px;
  overflow: hidden;
  padding: 2px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #9cc5ff, #5b96f4);
  box-shadow: 0 8px 18px rgba(76, 142, 243, .26);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-player {
  position: absolute;
  bottom: 24px;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 6px;
  width: 74px;
  min-height: 94px;
  padding: 9px 7px 8px;
  border: 1px solid rgba(90, 143, 221, .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 45% 22%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .68) 44%, rgba(224, 238, 255, .84)),
    linear-gradient(180deg, #fff, #eaf4ff);
  box-shadow: 0 12px 28px rgba(65, 115, 188, .18);
}

.ksjb-player img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(58, 90, 140, .18));
}

.ksjb-player b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #89b8ff, #5d96f4);
  font-size: 22px;
  font-weight: 950;
}

.ksjb-player span {
  max-width: 62px;
  overflow: hidden;
  color: #5a6780;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-player.left {
  left: 14px;
}

.ksjb-player.right {
  right: 14px;
}

.ksjb-hero-dots {
  position: absolute;
  bottom: 9px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.ksjb-hero-dots button {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(87, 151, 245, .32);
  transition: width .18s ease, background-color .18s ease;
}

.ksjb-hero-dots button.is-active {
  width: 16px;
  background: #5797f5;
}

.ksjb-reserve-strip {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.ksjb-reserve-strip::-webkit-scrollbar {
  display: none;
}

.ksjb-reserve-card {
  position: relative;
  flex: 0 0 184px;
  display: grid;
  gap: 12px;
  min-height: 108px;
  border: 1px solid rgba(136, 170, 220, .22);
  border-radius: 12px;
  padding: 13px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(73, 118, 186, .16);
}

.ksjb-reserve-card div {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ksjb-reserve-card strong {
  overflow: hidden;
  color: #59677e;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-reserve-card p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-right: 66px;
  min-width: 0;
}

.ksjb-reserve-card span,
.ksjb-reserve-card em {
  min-width: 0;
  overflow: hidden;
  color: #5f6c83;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-reserve-card span {
  max-width: 64px;
}

.ksjb-reserve-card em {
  max-width: 82px;
}

.ksjb-reserve-card button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 56px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #a9ccff, #5d96f4);
  box-shadow: 0 8px 18px rgba(76, 142, 243, .3);
  font-size: 12px;
  font-weight: 900;
}

.ksjb-hero {
  position: relative;
  min-height: 116px;
  overflow: hidden;
  border-radius: 8px;
  padding: 18px 16px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(230, 32, 46, .94), rgba(35, 39, 52, .92)),
    url("/static/images/live-covers/live-01.jpg") center/cover;
  box-shadow: var(--m-shadow);
}

.ksjb-hero::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -42px;
  width: 150px;
  height: 150px;
  border: 24px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
}

.ksjb-hero small,
.ksjb-live-ribbon,
.ksjb-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.ksjb-hero small {
  background: rgba(255, 255, 255, .18);
}

.ksjb-hero h1 {
  position: relative;
  z-index: 1;
  margin: 10px 0 5px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.ksjb-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 260px;
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  line-height: 1.45;
}

.ksjb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}

.ksjb-section-head strong {
  font-size: 17px;
  line-height: 1.2;
}

.ksjb-section-head span,
.ksjb-card-note {
  color: var(--m-muted);
  font-size: 12px;
}

.ksjb-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ksjb-live-push-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: -2px;
}

.ksjb-live-push-card {
  display: grid;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
  border: 1px solid rgba(241, 32, 51, .2);
  border-radius: 8px;
  padding: 6px;
  color: var(--m-text);
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  box-shadow: 0 10px 22px rgba(73, 118, 186, .12);
  text-align: left;
}

.ksjb-live-push-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #202633;
}

.ksjb-live-push-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-live-push-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), transparent);
}

.ksjb-live-push-cover i {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 1;
  border-radius: 999px;
  padding: 2px 5px;
  color: #fff;
  background: var(--m-red);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.ksjb-live-push-card strong,
.ksjb-live-push-card em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-live-push-card strong {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.18;
}

.ksjb-live-push-card em {
  color: var(--m-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.ksjb-live-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(136, 170, 220, .18);
  border-radius: 10px;
  background: var(--m-card);
  box-shadow: 0 12px 26px rgba(73, 118, 186, .14);
  text-align: left;
}

.ksjb-live-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #202633;
}

.ksjb-live-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-live-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), transparent);
}

.ksjb-live-ribbon {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  color: #fff;
  background: var(--m-red);
}

.ksjb-live-ribbon i,
.ksjb-room-live i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  animation: ksjbPulse 1.25s ease-in-out infinite;
}

.ksjb-room-live.is-offline i {
  background: #9aa4b5;
  box-shadow: 0 0 0 4px rgba(154, 164, 181, .18);
  animation: none;
}

.ksjb-live-heat {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 1;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.ksjb-live-body {
  display: grid;
  gap: 8px;
  padding: 8px 9px 10px;
}

.ksjb-live-title {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--m-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.32;
}

.ksjb-anchor-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.ksjb-anchor-line::after {
  content: "♨";
  color: var(--m-muted);
  font-size: 11px;
}

.ksjb-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgba(216, 173, 102, .48);
  border-radius: 999px;
  color: #f6d58a;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .18), transparent 28%),
    linear-gradient(135deg, #121822 0%, #26303d 46%, #0b1017 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 10px rgba(19, 25, 35, .16);
  font-size: 12px;
  font-weight: 900;
}

.ksjb-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-anchor-line span {
  min-width: 0;
  overflow: hidden;
  color: var(--m-sub);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-panel,
.ksjb-score-card,
.ksjb-anchor-card,
.ksjb-profile-card {
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  background: var(--m-card);
  box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.ksjb-panel {
  padding: 13px;
}

.ksjb-score-toolbar {
  position: sticky;
  top: -10px;
  z-index: 2;
  display: grid;
  gap: 8px;
  margin: -10px -12px 0;
  padding: 10px 12px 8px;
  background: rgba(244, 246, 248, .95);
  backdrop-filter: blur(14px);
}

.ksjb-date-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.ksjb-date-strip button {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  background: #fff;
  color: var(--m-sub);
  font-size: 11px;
  font-weight: 700;
}

.ksjb-date-strip button.is-active {
  border-color: var(--m-red);
  color: var(--m-red);
  background: var(--m-red-soft);
}

.ksjb-league-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--m-sub);
  background: var(--m-card-soft);
  font-size: 12px;
  font-weight: 800;
}

.ksjb-score-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 48px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 10px 9px;
  border: 0;
  border-top: 1px solid var(--m-line);
  color: var(--m-text);
  background: #fff;
}

.ksjb-score-time {
  color: var(--m-muted);
  font-size: 11px;
  font-weight: 700;
}

.ksjb-team {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-num {
  min-width: 0;
  text-align: center;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.ksjb-status-pill {
  justify-self: end;
  justify-content: center;
  min-width: 48px;
  padding: 0 6px;
  border: 1px solid var(--m-line);
  color: var(--m-sub);
  background: #fff;
  white-space: nowrap;
}

.ksjb-status-pill.live {
  border-color: rgba(230, 32, 46, .22);
  color: var(--m-red);
  background: var(--m-red-soft);
}

.ksjb-status-pill.done {
  color: var(--m-muted);
  background: #f6f7f9;
}

.ksjb-anchor-card,
.ksjb-profile-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.ksjb-user-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}

.ksjb-user-head .ksjb-avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.ksjb-user-head strong {
  display: block;
  overflow: hidden;
  font-size: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-user-head span,
.ksjb-form label span {
  color: var(--m-sub);
  font-size: 12px;
}

.ksjb-grid-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ksjb-action-tile {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 74px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  color: var(--m-text);
  background: var(--m-card-soft);
  font-size: 12px;
  font-weight: 800;
}

.ksjb-action-tile b {
  font-size: 20px;
  line-height: 1;
}

.ksjb-account-overview {
  display: grid;
  gap: 10px;
}

.ksjb-profile-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ksjb-profile-metric {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  background: var(--m-card-soft);
}

.ksjb-profile-metric span {
  overflow: hidden;
  color: var(--m-sub);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-profile-metric strong {
  overflow: hidden;
  color: var(--m-text);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-profile-signature {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  color: var(--m-sub);
  background: #fff;
  font-size: 13px;
  line-height: 1.45;
}

.ksjb-account-actions .ksjb-action-tile {
  min-height: 64px;
}

.ksjb-profile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ksjb-profile-panel-head strong {
  font-size: 15px;
}

.ksjb-profile-panel-head .ksjb-btn {
  width: auto;
  min-width: 64px;
  height: 34px;
}

.ksjb-form {
  display: grid;
  gap: 10px;
}

.ksjb-form label {
  display: grid;
  gap: 5px;
}

.ksjb-inline-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ksjb-inline-field .ksjb-btn {
  height: 42px;
  min-width: 74px;
  padding: 0 12px;
  font-size: 12px;
}

.ksjb-captcha-img {
  overflow: hidden;
  min-width: 98px;
  padding: 0;
}

.ksjb-captcha-img img {
  display: block;
  width: 98px;
  height: 40px;
  object-fit: cover;
}

.ksjb-input,
.ksjb-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  outline: 0;
  color: var(--m-text);
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 20px;
}

.ksjb-input {
  height: 42px;
  padding: 0 11px;
}

.ksjb-input[type="file"] {
  padding: 8px 11px;
}

.ksjb-textarea {
  min-height: 72px;
  padding: 10px 11px;
  resize: vertical;
}

.ksjb-btn-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ksjb-btn {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 13px;
  color: #fff;
  background: var(--m-red);
  font-size: 14px;
  font-weight: 900;
}

.ksjb-btn.secondary {
  border: 1px solid var(--m-line);
  color: var(--m-text);
  background: #fff;
}

.ksjb-btn.gold {
  color: #2a1d0c;
  background: linear-gradient(180deg, #f4d59a, var(--m-gold));
}

.ksjb-btn:disabled {
  opacity: .58;
}

.ksjb-stream-box {
  display: grid;
  gap: 8px;
}

.ksjb-stream-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px;
  border-radius: 8px;
  background: #f7f8fa;
}

.ksjb-stream-line span {
  color: var(--m-sub);
  font-size: 12px;
  font-weight: 800;
}

.ksjb-stream-line code {
  min-width: 0;
  overflow: hidden;
  color: var(--m-text);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-copy {
  height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 0 9px;
  color: #fff;
  background: #202737;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-room-page {
  display: grid;
  gap: 12px;
  margin: -14px -14px -84px;
  padding: 0 14px 84px;
  background: var(--m-bg);
  color: var(--m-text);
}

.ksjb-room-top {
  display: grid;
  grid-template-columns: auto 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 -14px;
  padding: max(11px, env(safe-area-inset-top)) 14px 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(63, 95, 145, .08);
}

.ksjb-room-top img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

.ksjb-room-top strong {
  display: block;
  overflow: hidden;
  color: var(--m-text);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-room-top span {
  color: var(--m-sub);
  font-size: 12px;
}

.ksjb-room-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(132, 184, 255, .34);
  border-radius: 12px;
  background: #05070c;
  box-shadow: 0 18px 36px rgba(3, 7, 18, .28), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.ksjb-player-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  opacity: .34;
  filter: saturate(.9) contrast(1.05);
  transition: opacity .22s ease;
}

.ksjb-site-player.is-playing .ksjb-player-poster {
  opacity: 0;
}

.ksjb-site-player.is-ended .ksjb-player-poster {
  opacity: .52;
  filter: grayscale(.35) saturate(.78) contrast(1.05);
}

.ksjb-room-player img,
.ksjb-room-player video {
  width: 100%;
  height: 100%;
}

.ksjb-player-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 7, 14, .62), transparent 27%, transparent 61%, rgba(4, 7, 14, .78)),
    radial-gradient(circle at 50% 46%, rgba(79, 147, 255, .14), transparent 38%);
}

.ksjb-player-loading {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 5;
  display: grid;
  justify-items: center;
  width: 56px;
  height: 56px;
  padding: 10px;
  border: 1px solid rgba(255, 232, 181, .18);
  border-radius: 18px;
  color: #fff6df;
  background: rgba(8, 12, 20, .68);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(14px);
}

.ksjb-site-player[data-first-frame="1"]:not(.is-buffering) .ksjb-player-loading,
.ksjb-site-player.is-ended .ksjb-player-loading,
.ksjb-site-player[data-load-failed="1"] .ksjb-player-loading,
.ksjb-site-player[data-stream=""] .ksjb-player-loading {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
}

.ksjb-player-loading span {
  display: none;
}

.ksjb-player-loading-ball {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border: 2px solid #1b2739;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1b2739 0 20%, transparent 21%),
    radial-gradient(circle at 24% 25%, #1b2739 0 13%, transparent 14%),
    radial-gradient(circle at 76% 25%, #1b2739 0 13%, transparent 14%),
    radial-gradient(circle at 28% 78%, #1b2739 0 13%, transparent 14%),
    radial-gradient(circle at 75% 77%, #1b2739 0 13%, transparent 14%),
    #ffffff;
  box-shadow: inset 0 -4px 7px rgba(77, 141, 255, .16), 0 5px 16px rgba(255, 232, 181, .2);
  animation: ksjbPlayerBallSpin .92s linear infinite;
}

.ksjb-site-player:not([data-first-frame="1"]):not(.is-ended) .ksjb-player-status,
.ksjb-site-player:not([data-first-frame="1"]):not(.is-ended) .ksjb-player-center-actions,
.ksjb-site-player:not([data-first-frame="1"]):not(.is-ended) .ksjb-danmaku-layer,
.ksjb-site-player.is-buffering:not(.is-ended) .ksjb-player-status,
.ksjb-site-player.is-buffering:not(.is-ended) .ksjb-player-center-actions,
.ksjb-site-player.is-buffering:not(.is-ended) .ksjb-danmaku-layer {
  opacity: 0;
  pointer-events: none;
}

.ksjb-player-loading-ball::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(27, 39, 57, .32);
  border-radius: 50%;
}

@keyframes ksjbPlayerBallSpin {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-4px) rotate(180deg);
  }

  100% {
    transform: translateY(0) rotate(360deg);
  }
}

.ksjb-room-player video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.ksjb-room-player video::-webkit-media-controls {
  display: none !important;
}

.ksjb-site-player.is-videojs-player .video-js {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  color: #fff;
  font-family: inherit;
  background: #05070c;
}

.ksjb-aliplayer-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: #05070c;
}

.ksjb-aliplayer-container .prism-player,
.ksjb-aliplayer-container video {
  width: 100% !important;
  height: 100% !important;
}

.ksjb-aliplayer-container video {
  object-fit: contain !important;
}

.ksjb-site-player.is-aliplayer-player .ksjb-player-fallback-video {
  display: none !important;
}

.ksjb-site-player.is-aliplayer-player .ksjb-player-poster {
  opacity: .18;
}

.ksjb-site-player.is-aliplayer-player[data-first-frame="1"] .ksjb-player-poster {
  opacity: 0;
}

.ksjb-site-player.is-aliplayer-player .ksjb-player-shade {
  z-index: 4;
}

.ksjb-site-player.is-aliplayer-player .ksjb-danmaku-layer {
  z-index: 5;
}

.ksjb-site-player.is-aliplayer-player .ksjb-player-meta,
.ksjb-site-player.is-aliplayer-player .ksjb-player-mode-toggle,
.ksjb-site-player.is-aliplayer-player .ksjb-player-status,
.ksjb-site-player.is-aliplayer-player .ksjb-player-loading,
.ksjb-ali-controls,
.ksjb-ali-unmute {
  z-index: 8;
}

.ksjb-ali-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 50px;
  padding: 8px 12px 8px 14px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(5, 9, 16, 0), rgba(5, 9, 16, .82));
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  pointer-events: auto;
}

.ksjb-ali-controls button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: #eef6ff;
  background: transparent;
  font: inherit;
  touch-action: manipulation;
}

.ksjb-ali-controls button:active {
  background: rgba(255, 255, 255, .16);
}

.ksjb-ali-controls > button:first-child {
  margin-right: auto;
}

.ksjb-ali-controls svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ksjb-ali-quality-menu {
  position: relative;
  flex: 0 0 auto;
}

.ksjb-ali-quality-menu.is-hidden,
.ksjb-ali-quality-menu[hidden] {
  display: none !important;
}

.ksjb-ali-quality-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 58px;
  height: 34px !important;
  gap: 5px;
  padding: 0 10px !important;
  border: 1px solid rgba(99, 156, 255, .95) !important;
  background: rgba(12, 20, 36, .44) !important;
  color: #f4f8ff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 22px rgba(30, 83, 180, .18);
}

.ksjb-ali-quality-button em {
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.ksjb-ali-quality-button i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .9;
}

.ksjb-ali-quality-list {
  position: absolute;
  right: 0;
  bottom: 42px;
  display: grid;
  width: max-content;
  min-width: 150px;
  max-width: 176px;
  padding: 6px;
  border: 1px solid rgba(211, 232, 255, .24);
  border-radius: 10px;
  background: rgba(8, 14, 26, .72);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.ksjb-ali-quality-list[hidden] {
  display: none !important;
}

.ksjb-ali-quality-list button {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(34px, 1fr) max-content;
  column-gap: 8px;
  width: 100%;
  height: 32px;
  min-height: 32px;
  justify-content: initial;
  justify-items: start;
  align-items: center;
  border-radius: 8px;
  padding: 0 9px;
  color: #eef5ff;
  font-size: 13px;
  font-weight: 900;
  background: transparent;
  text-align: left;
}

.ksjb-ali-quality-list button span,
.ksjb-videojs-quality-list button span {
  min-width: 0;
  justify-self: start;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  white-space: nowrap;
}

.ksjb-ali-quality-list button small,
.ksjb-videojs-quality-list button small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  color: #ffd9df;
  background: rgba(255, 64, 88, .2);
  font-size: 9px;
  font-weight: 850;
  line-height: 16px;
  white-space: nowrap;
}

.ksjb-ali-quality-list button[aria-selected="true"] {
  color: #fff;
  background: rgba(72, 130, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.ksjb-ali-danmaku {
  display: inline-flex !important;
  width: auto !important;
  min-width: 54px;
  height: 34px !important;
  gap: 7px;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(12, 20, 36, .34) !important;
}

.ksjb-ali-danmaku b {
  font-size: 13px;
  font-weight: 950;
}

.ksjb-ali-danmaku i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #23efe1;
  box-shadow: 0 0 14px rgba(35, 239, 225, .7);
}

.ksjb-site-player.is-danmaku-off .ksjb-ali-danmaku i {
  background: rgba(255, 255, 255, .4);
  box-shadow: none;
}

.ksjb-ali-unmute {
  position: absolute;
  left: 50%;
  bottom: 54px;
  display: inline-grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(211, 232, 255, .68);
  border-radius: 999px;
  padding: 0 13px;
  color: #15375e;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 12px 26px rgba(36, 93, 170, .24);
  transform: translateX(-50%);
  touch-action: manipulation;
}

.ksjb-ali-unmute[hidden] {
  display: none !important;
}

.ksjb-ali-unmute svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ksjb-site-player.is-videojs-player .vjs-tech {
  pointer-events: auto;
  object-fit: contain;
}

.ksjb-site-player.is-videojs-player .ksjb-player-poster {
  opacity: .18;
}

.ksjb-site-player.is-videojs-player[data-first-frame="1"] .ksjb-player-poster {
  opacity: 0;
}

.ksjb-site-player.is-videojs-player .ksjb-player-shade {
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(4, 7, 14, .42), transparent 24%, transparent 66%, rgba(4, 7, 14, .5));
}

.ksjb-site-player.is-videojs-player .ksjb-danmaku-layer {
  z-index: 5;
}

.ksjb-site-player.is-videojs-player .vjs-control-bar {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
  padding: 0 6px;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0), rgba(8, 12, 22, .92));
  transition: opacity .22s ease, transform .22s ease;
  overflow: visible;
}

.ksjb-site-player.is-videojs-player.is-controls-hidden .vjs-control-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.ksjb-site-player.is-videojs-player.has-inline-videojs-tools .vjs-control-bar {
  padding-right: 6px;
}

.ksjb-site-player.is-videojs-player.has-inline-videojs-tools .vjs-progress-control {
  min-width: 64px;
  flex: 1 1 auto;
}

.ksjb-site-player.is-videojs-player.has-inline-videojs-tools .vjs-volume-panel,
.ksjb-site-player.is-videojs-player.has-inline-videojs-tools .vjs-time-control,
.ksjb-site-player.is-videojs-player.has-inline-videojs-tools .vjs-live-control {
  flex: 0 0 auto;
}

.ksjb-site-player.is-videojs-player.has-inline-videojs-tools .vjs-fullscreen-control {
  display: none;
}

.ksjb-site-player.is-videojs-player .vjs-button > .vjs-icon-placeholder::before,
.ksjb-site-player.is-videojs-player .vjs-time-control,
.ksjb-site-player.is-videojs-player .vjs-live-control {
  color: #fff6df;
}

.ksjb-site-player.is-videojs-player .vjs-play-progress,
.ksjb-site-player.is-videojs-player .vjs-volume-level {
  background: #f12033;
}

.ksjb-site-player.is-videojs-player .vjs-slider {
  background: rgba(255, 246, 224, .22);
}

.ksjb-site-player.is-videojs-player .vjs-load-progress {
  background: rgba(255, 246, 224, .28);
}

.ksjb-site-player.is-videojs-player .vjs-error-display {
  display: none !important;
}

.ksjb-site-player.is-videojs-player .vjs-big-play-button {
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 232, 181, .25);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ff3d50, #e8182b);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
  transform: translate(-50%, -50%);
}

.ksjb-site-player.is-videojs-player:hover .vjs-big-play-button,
.ksjb-site-player.is-videojs-player .vjs-big-play-button:focus {
  border-color: rgba(255, 232, 181, .46);
  background: linear-gradient(135deg, #ff4c5d, #ef1d31);
}

.ksjb-videojs-inline-tools {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  height: 100%;
  margin-left: auto;
}

.ksjb-videojs-quality-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ksjb-videojs-quality-menu.is-hidden,
.ksjb-videojs-quality-menu[hidden] {
  display: none;
}

.ksjb-videojs-control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  min-width: 36px;
  width: 36px;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #d7d7d7;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
}

.ksjb-videojs-control-button:hover,
.ksjb-videojs-control-button:focus {
  color: #fff;
  background: transparent;
}

.ksjb-videojs-control-button svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ksjb-videojs-control-button em,
.ksjb-videojs-control-button b {
  display: block;
  overflow: hidden;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-videojs-control-button span + em {
  margin-left: 4px;
}

.ksjb-videojs-control-mute,
.ksjb-videojs-control-pip,
.ksjb-videojs-control-quality {
  gap: 0;
}

.ksjb-videojs-control-mute em,
.ksjb-videojs-control-pip em {
  display: none;
}

.ksjb-videojs-control-quality {
  min-width: 44px;
  padding: 0 6px;
  color: #f3f7ff;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-videojs-control-quality.is-hidden,
.ksjb-videojs-control-quality[hidden] {
  display: none;
}

.ksjb-videojs-quality-list {
  position: absolute;
  right: -6px;
  bottom: 44px;
  z-index: 30;
  display: grid;
  width: max-content;
  min-width: 150px;
  max-width: 176px;
  padding: 6px;
  border: 1px solid rgba(211, 232, 255, .24);
  border-radius: 10px;
  background: rgba(8, 14, 26, .72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.ksjb-videojs-quality-list[hidden] {
  display: none;
}

.ksjb-videojs-quality-list button {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(34px, 1fr) max-content;
  align-items: center;
  justify-content: initial;
  justify-items: start;
  column-gap: 8px;
  width: 100%;
  height: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 0 9px;
  color: #eef5ff;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.ksjb-videojs-quality-list button[aria-selected="true"] {
  color: #fff;
  background: rgba(72, 130, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.ksjb-videojs-control-mute.is-unmuted,
.ksjb-videojs-control-pip.is-active {
  color: #d7d7d7;
  border-color: transparent;
  background: transparent;
}

.ksjb-videojs-control-pip.is-unavailable {
  opacity: .66;
}

.ksjb-videojs-control-danmaku {
  min-width: 36px;
}

.ksjb-site-player.is-danmaku-off .ksjb-videojs-control-danmaku {
  color: rgba(215, 215, 215, .52);
  background: transparent;
}

@media (max-width: 420px) {
  .ksjb-videojs-inline-tools {
    gap: 0;
  }

  .ksjb-videojs-control-button {
    min-width: 34px;
    width: 34px;
    height: 100%;
    padding: 0;
  }

  .ksjb-videojs-control-mute em,
  .ksjb-videojs-control-pip em {
    display: none;
  }

  .ksjb-videojs-control-quality {
    min-width: 40px;
    padding: 0 4px;
  }

  .ksjb-videojs-control-danmaku {
    min-width: 34px;
  }
}

.ksjb-videojs-float-controls {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 52px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.ksjb-videojs-mute-float,
.ksjb-videojs-danmaku-toggle {
  display: inline-grid;
  align-items: center;
  height: 34px;
  border: 1px solid rgba(211, 232, 255, .68);
  border-radius: 999px;
  font: inherit;
  touch-action: manipulation;
  pointer-events: auto;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.ksjb-videojs-mute-float {
  grid-template-columns: 20px auto;
  gap: 6px;
  min-width: 104px;
  padding: 0 10px;
  color: #15375e;
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 12px 26px rgba(36, 93, 170, .24);
}

.ksjb-videojs-mute-float.is-unmuted {
  color: #eaf5ff;
  border-color: rgba(190, 219, 255, .42);
  background: linear-gradient(135deg, rgba(17, 31, 52, .82), rgba(43, 78, 122, .72));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .24);
}

.ksjb-site-player[data-muted="0"] .ksjb-videojs-float-controls,
.ksjb-site-player.is-mute-float-dismissed .ksjb-videojs-float-controls {
  display: none;
}

.ksjb-videojs-mute-float svg,
.ksjb-videojs-pip-control svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ksjb-videojs-mute-float em,
.ksjb-videojs-pip-control em {
  overflow: hidden;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-videojs-bottom-tools {
  position: absolute;
  right: 22px;
  bottom: 7px;
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.ksjb-videojs-pip-control,
.ksjb-videojs-fullscreen-control {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(211, 232, 255, .52);
  border-radius: 999px;
  color: #eaf5ff;
  font: inherit;
  touch-action: manipulation;
  pointer-events: auto;
  background: linear-gradient(135deg, rgba(17, 31, 52, .82), rgba(43, 78, 122, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

.ksjb-videojs-pip-control {
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  height: 30px;
  padding: 0 10px;
}

.ksjb-videojs-fullscreen-control {
  width: 30px;
  height: 30px;
  padding: 0;
}

.ksjb-videojs-fullscreen-control svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ksjb-videojs-pip-control.is-active {
  color: #15375e;
  border-color: rgba(214, 235, 255, .76);
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
}

.ksjb-videojs-pip-control.is-unavailable {
  opacity: .72;
}

.ksjb-videojs-danmaku-toggle {
  grid-template-columns: auto 26px;
  gap: 10px;
  min-width: 102px;
  justify-content: center;
  height: 38px;
  padding: 0 10px 0 18px;
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(17, 31, 52, .82), rgba(43, 78, 122, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px rgba(0, 0, 0, .28);
}

.ksjb-videojs-danmaku-toggle b {
  display: block;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.ksjb-videojs-danmaku-toggle i {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f8fbff, #8fbeff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 0 0 1px rgba(255, 255, 255, .24), 0 0 18px rgba(86, 150, 255, .34);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ksjb-site-player.is-danmaku-off .ksjb-videojs-danmaku-toggle {
  color: rgba(218, 234, 255, .7);
  border-color: rgba(190, 219, 255, .32);
  background: rgba(15, 25, 42, .58);
}

.ksjb-site-player.is-danmaku-off .ksjb-videojs-danmaku-toggle i {
  background: rgba(169, 194, 226, .66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 0 0 1px rgba(255, 255, 255, .12);
  transform: scale(.86);
}

.ksjb-player-center-actions {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 62px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translateX(-50%);
  transition: opacity .18s ease, transform .18s ease;
}

.ksjb-site-player.is-center-dismissed .ksjb-player-center-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.92);
}

.ksjb-site-player.is-controls-hidden .ksjb-player-center-actions,
.ksjb-site-player.is-controls-hidden .ksjb-player-status,
.ksjb-site-player.is-controls-hidden .ksjb-player-top,
.ksjb-site-player.is-controls-hidden .ksjb-player-controls,
.ksjb-site-player.is-controls-hidden .ksjb-videojs-float-controls,
.ksjb-site-player.is-controls-hidden .ksjb-ali-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.ksjb-site-player.is-controls-hidden .ksjb-ali-quality-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ksjb-site-player.is-controls-hidden[data-muted="1"]:not(.is-mute-float-dismissed) .ksjb-videojs-float-controls {
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.ksjb-site-player.is-controls-hidden[data-muted="1"]:not(.is-mute-float-dismissed) .ksjb-videojs-mute-float {
  pointer-events: auto;
}

.ksjb-player-orb[data-player-action="center-play"] {
  display: none;
}

.ksjb-player-orb {
  display: inline-grid;
  grid-template-columns: 22px auto;
  align-items: center;
  gap: 7px;
  min-width: 118px;
  height: 46px;
  border: 1px solid rgba(211, 232, 255, .46);
  border-radius: 999px;
  padding: 0 14px;
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(17, 31, 52, .8), rgba(43, 78, 122, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  touch-action: manipulation;
}

.ksjb-player-orb.is-gold {
  min-width: 164px;
  height: 44px;
  color: #15375e;
  border-color: rgba(214, 235, 255, .76);
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 14px 30px rgba(36, 93, 170, .24);
}

.ksjb-player-orb svg,
.ksjb-player-controls svg,
.ksjb-room-input svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ksjb-player-orb em {
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ksjb-player-ended {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(82%, 330px);
  padding: 16px 18px;
  border: 1px solid rgba(255, 232, 181, .22);
  border-radius: 8px;
  color: #fff6df;
  text-align: center;
  background: rgba(10, 14, 24, .72);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(16px);
}

.ksjb-player-ended strong {
  font-size: 17px;
  font-weight: 900;
}

.ksjb-player-ended span {
  color: rgba(255, 246, 224, .78);
  font-size: 12px;
  line-height: 1.55;
}

.ksjb-player-status {
  color: rgba(255, 246, 224, .92);
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

.ksjb-player-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 112px;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
  opacity: .92;
  pointer-events: none;
  transition: opacity .2s ease;
}

.ksjb-site-player.is-ended .ksjb-player-status {
  display: none;
}

.ksjb-site-player[data-video-only-audio="1"] .ksjb-player-status {
  bottom: 54px;
  z-index: 11;
  opacity: .96 !important;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .48);
}

.ksjb-player-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  pointer-events: none;
  transition: opacity .2s ease;
}

.ksjb-player-top > span:last-child,
.ksjb-player-top .ksjb-player-heat {
  margin-left: auto;
  color: rgba(255, 239, 198, .86);
  font-size: 11px;
  font-weight: 800;
}

.ksjb-player-top .ksjb-player-heat + .ksjb-player-mode-toggle {
  margin-left: 0;
}

.ksjb-player-mode-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto 18px;
  align-items: center;
  gap: 5px;
  height: 26px;
  border: 1px solid rgba(211, 232, 255, .52);
  border-radius: 999px;
  padding: 0 7px 0 9px;
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(17, 31, 52, .8), rgba(43, 78, 122, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  pointer-events: auto;
  touch-action: manipulation;
}

.ksjb-player-mode-toggle.is-floating {
  position: absolute;
  top: 44px;
  right: 22px;
  z-index: 9;
  min-width: 58px;
  height: 28px;
  padding: 0 8px 0 10px;
}

.ksjb-player-mode-toggle b {
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.ksjb-player-mode-toggle i {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 999px;
  background: rgba(226, 240, 255, .28);
}

.ksjb-player-mode-toggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(238, 247, 255, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .2);
  transition: transform .18s ease, background .18s ease;
}

.ksjb-site-player.is-fast-player .ksjb-player-mode-toggle {
  color: #15375e;
  border-color: rgba(214, 235, 255, .76);
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 6px 18px rgba(74, 141, 255, .28);
}

.ksjb-site-player.is-fast-player .ksjb-player-mode-toggle i {
  background: rgba(70, 129, 216, .22);
}

.ksjb-site-player.is-fast-player .ksjb-player-mode-toggle i::after {
  background: #ffffff;
  transform: translateX(6px);
}

.ksjb-room-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  color: #111827;
  background: linear-gradient(135deg, #ffe4a6, #e1a145);
  font-size: 11px;
  font-weight: 900;
}

.ksjb-room-live i {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .75);
}

.ksjb-room-live.is-offline {
  color: #d8deea;
  background: rgba(216, 222, 234, .14);
}

.ksjb-room-live.is-offline i {
  background: #9aa4b5;
  box-shadow: 0 0 0 4px rgba(154, 164, 181, .18);
  animation: none;
}

.ksjb-player-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px;
  border: 1px solid rgba(211, 232, 255, .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(12, 24, 42, .78), rgba(29, 56, 91, .68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  transition: opacity .2s ease, transform .2s ease;
}

.ksjb-player-controls button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: #eaf5ff;
  background: rgba(224, 240, 255, .14);
  touch-action: manipulation;
}

.ksjb-player-controls .ksjb-danmaku-toggle {
  display: inline-grid;
  grid-template-columns: auto 22px;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 86px;
  height: 34px;
  padding: 0 8px 0 14px;
  border: 1px solid rgba(211, 232, 255, .52);
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(17, 31, 52, .82), rgba(43, 78, 122, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

.ksjb-player-controls .ksjb-danmaku-toggle b {
  display: block;
  color: currentColor;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.ksjb-player-controls .ksjb-danmaku-toggle i {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f8fbff, #8fbeff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 0 0 1px rgba(255, 255, 255, .24), 0 0 14px rgba(86, 150, 255, .32);
  transform: translateX(0);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.ksjb-site-player.is-danmaku-off .ksjb-player-controls .ksjb-danmaku-toggle {
  color: rgba(218, 234, 255, .7);
  border-color: rgba(190, 219, 255, .32);
  background: rgba(15, 25, 42, .58);
}

.ksjb-site-player.is-danmaku-off .ksjb-player-controls .ksjb-danmaku-toggle i {
  background: rgba(169, 194, 226, .66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 0 0 1px rgba(255, 255, 255, .12);
  transform: scale(.86);
}

.ksjb-player-controls button:active {
  transform: scale(.96);
}

.ksjb-player-controls button:nth-child(2) {
  color: #15375e;
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ksjb-player-controls .ksjb-player-pip-btn {
  grid-template-columns: 16px auto;
  gap: 4px;
  width: auto;
  min-width: 62px;
  padding: 0 8px;
  color: #15375e;
  background: linear-gradient(135deg, rgba(246, 251, 255, .96), rgba(132, 184, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ksjb-player-controls .ksjb-player-pip-btn em {
  overflow: hidden;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-player-controls .ksjb-player-pip-btn.is-active {
  background: linear-gradient(135deg, rgba(232, 244, 255, .98), rgba(92, 155, 255, .94));
}

.ksjb-player-controls .ksjb-player-pip-btn.is-unavailable {
  opacity: .72;
}

.ksjb-player-controls span {
  overflow: hidden;
  color: rgba(226, 240, 255, .78);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-danmaku-layer {
  position: absolute;
  inset: 40px 0 54px;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.ksjb-site-player.is-danmaku-off .ksjb-danmaku-layer {
  display: none;
}

.ksjb-danmaku-layer span {
  position: absolute;
  top: calc(var(--row) * 22px);
  left: 100%;
  max-width: 78%;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 12, 20, .42);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  animation: ksjb-danmaku-run var(--speed) linear var(--delay) infinite;
}

@keyframes ksjb-danmaku-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100vw - 100%));
  }
}

.ksjb-site-player:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  aspect-ratio: auto;
}

.ksjb-site-player.is-web-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 120;
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.ksjb-site-player:fullscreen video {
  object-fit: contain;
}

.ksjb-site-player.is-web-fullscreen video {
  object-fit: contain;
}

.ksjb-site-player.is-landscape {
  background: #03060c;
}

.ksjb-room-meta {
  display: grid;
  gap: 8px;
  padding: 0;
}

.ksjb-room-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(136, 170, 220, .18);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(73, 118, 186, .08);
}

.ksjb-room-score strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-room-score b {
  color: var(--m-blue);
  font-size: 18px;
}

.ksjb-room-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
}

.ksjb-room-tabs button {
  height: 36px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  color: var(--m-sub);
  background: #fff;
  font-weight: 800;
}

.ksjb-room-tabs button.is-active {
  color: #fff;
  border-color: #76aafa;
  background: linear-gradient(180deg, #9fc4ff, #5592f5);
  box-shadow: 0 8px 16px rgba(64, 130, 233, .2);
}

.ksjb-room-panel {
  min-height: 238px;
  border: 1px solid rgba(136, 170, 220, .18);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 26px rgba(73, 118, 186, .1);
}

.ksjb-chat-list {
  display: grid;
  align-content: end;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding: 11px;
}

.ksjb-chat-msg {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 86%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f6ff;
}

.ksjb-chat-msg.mine {
  justify-self: end;
  background: var(--m-red-soft);
}

.ksjb-chat-msg b {
  color: var(--m-blue);
  font-size: 12px;
}

.ksjb-chat-msg span {
  color: var(--m-text);
  font-size: 13px;
  line-height: 1.42;
}

.ksjb-chat-msg.is-empty {
  justify-self: center;
  width: auto;
  max-width: 100%;
  background: transparent;
}

.ksjb-chat-msg.is-empty span {
  color: var(--m-muted);
}

.ksjb-room-input {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px 44px;
  gap: 7px;
  width: min(100vw, 480px);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(136, 170, 220, .18);
  backdrop-filter: blur(14px);
}

.ksjb-room-input input {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 0 11px;
  color: var(--m-text);
  background: #f7fbff;
  font-size: 16px;
  line-height: 20px;
}

.ksjb-room-input button {
  display: grid;
  place-items: center;
  height: 40px;
  border: 1px solid rgba(228, 174, 85, .18);
  border-radius: 12px;
  color: #10151f;
  background: linear-gradient(135deg, #ffe5ad, #e7ad4f);
  box-shadow: 0 8px 18px rgba(228, 174, 85, .22);
  touch-action: manipulation;
}

.ksjb-room-input button:nth-of-type(2),
.ksjb-room-input button:nth-of-type(3) {
  color: #627087;
  background: #f4f8ff;
  box-shadow: none;
}

.ksjb-mobile-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--m-line);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--m-shadow);
  backdrop-filter: blur(16px);
}

.ksjb-tab-btn {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  height: 50px;
  border: 0;
  border-radius: 8px;
  color: #9fb0c6;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.ksjb-tab-btn b {
  font-size: 16px;
  line-height: 1;
}

.ksjb-tab-btn.is-active {
  color: #5797f5;
  background: transparent;
}

.ksjb-tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #9fb0c6;
  background: #eef6ff;
  box-shadow: inset 0 -2px 4px rgba(103, 155, 221, .12);
}

.ksjb-tab-btn.is-active .ksjb-tab-icon {
  color: #fff;
  background: linear-gradient(180deg, #8dbbff, #5a96f4);
  box-shadow: 0 6px 12px rgba(76, 142, 243, .2);
}

.ksjb-tab-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 0 4px;
  color: #fff;
  background: #ff375f;
  box-shadow: 0 4px 10px rgba(255, 55, 95, .28);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.ksjb-room-mode .ksjb-mobile-tabbar {
  display: none;
}

.ksjb-empty,
.ksjb-loading,
.ksjb-api-alert {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 118px;
  border: 1px dashed var(--m-line);
  border-radius: 8px;
  padding: 18px;
  color: var(--m-sub);
  background: #fff;
  text-align: center;
}

.ksjb-api-alert {
  min-height: auto;
  place-items: start;
  justify-items: start;
  color: #7a4f00;
  background: #fff8e8;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
}

.ksjb-api-alert .ksjb-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.ksjb-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  border-radius: 8px;
  background: #edf0f4;
}

.ksjb-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: ksjbShimmer 1.3s infinite;
}

.ksjb-toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 9100;
  max-width: min(320px, calc(100vw - 36px));
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: rgba(20, 24, 33, .92);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: .18s ease;
  pointer-events: none;
}

.ksjb-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Componentized 5-page visual system: home, score, room, anchor, profile. */
.ksjb-mobile-spa-root {
  --m-bg: #edf5ff;
  --m-card-soft: #f9fcff;
  --m-line: #e5eef8;
  --m-sky: #86b7ff;
  --m-blue: #4d8ffc;
  --m-shadow: 0 14px 30px rgba(76, 120, 188, .16);
  background: #dfe8f3;
}

.ksjb-mobile-shell {
  background: linear-gradient(180deg, #f7fbff 0, #eaf4ff 42%, #eef6ff 100%);
}

.ksjb-mobile-topbar {
  padding-top: 0;
  background: #fff;
  box-shadow: 0 1px 0 rgba(96, 130, 180, .12);
}

.ksjb-app-banner {
  display: grid;
}

.ksjb-top-links {
  justify-content: space-between;
  height: 54px;
  padding: 0 20px;
}

.ksjb-top-links button {
  position: relative;
  height: 54px;
  padding: 0 4px;
  font-size: 16px;
}

.ksjb-top-links button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 17px;
  height: 3px;
  border-radius: 99px;
  background: #4f91ff;
  transform: translateX(-50%);
}

.ksjb-brand-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 148px;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background: #172033;
  box-shadow: var(--m-shadow);
}

.ksjb-brand-hero-mosaic {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 18, 31, .26), rgba(12, 18, 31, .72)),
    url("/static/images/live-covers/live-01.jpg") 0 0/33.4% 50%,
    url("/static/images/live-covers/live-02.jpg") 50% 0/33.4% 50%,
    url("/static/images/live-covers/live-03.jpg") 100% 0/33.4% 50%,
    url("/static/images/live-covers/live-04.jpg") 0 100%/33.4% 50%,
    url("/static/images/live-covers/live-05.jpg") 50% 100%/33.4% 50%,
    url("/static/images/live-covers/live-05.jpg") 100% 100%/33.4% 50%;
  filter: saturate(.95);
}

.ksjb-brand-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 180px;
  height: 54px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .32));
}

.ksjb-brand-mark img {
  display: block;
  width: 166px;
  max-height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.ksjb-score-board {
  position: relative;
  display: grid;
  gap: 7px;
}

.ksjb-score-sports,
.ksjb-score-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 8px;
}

.ksjb-score-sports {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ksjb-score-sports button,
.ksjb-score-tabs button {
  height: 40px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #4d5a72;
  background: transparent;
  font-weight: 900;
}

.ksjb-score-sports button.is-active,
.ksjb-score-tabs button.is-active {
  color: #4f91ff;
}

.ksjb-score-tabs button.is-active {
  border-radius: 999px;
  background: #dff0ff;
}

.ksjb-schedule-row {
  display: grid;
  gap: 8px;
  min-height: 88px;
  padding: 8px 10px 12px;
  border: 1px solid rgba(132, 169, 224, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(76, 120, 188, .08);
}

.ksjb-schedule-top,
.ksjb-schedule-main,
.ksjb-schedule-meta {
  display: grid;
  align-items: center;
  gap: 8px;
}

.ksjb-schedule-top {
  grid-template-columns: auto auto minmax(0, 1fr);
  color: #8a98b0;
  font-size: 12px;
}

.ksjb-schedule-top span {
  min-width: 54px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #fff;
  background: #4e88ff;
  text-align: center;
  font-weight: 900;
}

.ksjb-schedule-top em {
  font-style: normal;
}

.ksjb-schedule-top b {
  justify-self: end;
  color: #ff5a64;
}

.ksjb-schedule-main {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  text-align: center;
}

.ksjb-schedule-main strong {
  overflow: hidden;
  color: #4d5a72;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-schedule-main b {
  color: #ff4f58;
  font-size: 17px;
}

.ksjb-schedule-meta {
  grid-template-columns: auto auto minmax(0, 1fr);
  color: #8a98b0;
  font-size: 12px;
}

.ksjb-schedule-meta button {
  justify-self: end;
  height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: #42c778;
  font-size: 11px;
  font-weight: 900;
}

.ksjb-score-float {
  position: sticky;
  right: 12px;
  bottom: 14px;
  justify-self: end;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #a8cdff, #5e9bff);
  box-shadow: 0 10px 22px rgba(75, 135, 235, .32);
  font-weight: 950;
}

.ksjb-me-hero {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 176px;
  margin: -14px -14px 0;
  padding: 44px 24px 28px;
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .75), transparent 26%),
    linear-gradient(135deg, #f8fcff, #deedff 70%, #edf6ff);
}

.ksjb-me-avatar {
  width: 72px;
  height: 72px;
  font-size: 30px;
}

.ksjb-me-title {
  min-width: 0;
}

.ksjb-me-title strong {
  display: block;
  overflow: hidden;
  color: #151b28;
  font-size: 23px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-me-title span {
  color: #67758e;
  font-size: 14px;
  font-weight: 700;
}

.ksjb-me-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  border: 1px solid rgba(112, 154, 218, .32);
  border-radius: 999px;
  padding: 0 13px;
  color: #60718c;
  background: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ksjb-me-edit svg {
  width: 17px;
  height: 17px;
}

.ksjb-wallet-card,
.ksjb-neo-card {
  border: 1px solid rgba(139, 177, 228, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(82, 120, 176, .14), inset 0 1px 0 rgba(255, 255, 255, .88);
}

.ksjb-wallet-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  min-height: 142px;
  padding: 24px 18px 18px;
}

.ksjb-wallet-charge {
  position: absolute;
  top: 0;
  right: 0;
  height: 36px;
  border: 0;
  border-radius: 0 18px 0 18px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(180deg, #8abbff, #4f91ff);
  font-size: 15px;
  font-weight: 950;
}

.ksjb-wallet-item {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.ksjb-soft-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .36), transparent 38%),
    linear-gradient(180deg, #9fcbff, #5d9af7);
  box-shadow: 0 9px 18px rgba(70, 139, 237, .28);
  font-size: 25px;
  font-weight: 950;
}

.ksjb-soft-icon svg {
  width: 24px;
  height: 24px;
}

.ksjb-wallet-item strong {
  color: #101827;
  font-size: 34px;
  line-height: 1;
}

.ksjb-wallet-item small {
  margin-left: 4px;
  color: #8a98ad;
  font-size: 15px;
}

.ksjb-wallet-item span {
  color: #66758f;
  font-size: 14px;
  font-weight: 800;
}

.ksjb-wallet-divider {
  width: 1px;
  height: 56px;
  background: #e7edf6;
}

.ksjb-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 20px 12px 16px;
}

.ksjb-quick-grid button {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 88px;
  border: 0;
  color: #54647c;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.ksjb-auth-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ksjb-auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-radius: 14px;
  padding: 5px;
  background: #edf5ff;
}

.ksjb-auth-tabs button {
  height: 38px;
  border: 0;
  border-radius: 11px;
  color: #61718b;
  background: transparent;
  font-weight: 900;
}

.ksjb-auth-tabs button.is-active {
  color: #fff;
  background: linear-gradient(180deg, #82b7ff, #4f91ff);
  box-shadow: 0 8px 16px rgba(79, 145, 255, .26);
}

.ksjb-auth-card .ksjb-btn {
  height: 48px;
  border-radius: 14px;
}

.ksjb-auth-card .ksjb-input {
  height: 48px;
  border-radius: 14px;
  background: #fff;
}

.ksjb-auth-link {
  justify-self: center;
  border: 0;
  color: #4f8fff;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.ksjb-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 18px;
}

.ksjb-auth-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18, 29, 48, .46);
  backdrop-filter: blur(8px);
}

.ksjb-auth-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(100%, 420px);
  max-height: min(86dvh, 720px);
  margin: 0 auto;
  overflow-y: auto;
  border: 1px solid rgba(221, 232, 246, .92);
  border-radius: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 60px rgba(38, 72, 125, .28);
}

.ksjb-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ksjb-auth-head strong {
  display: block;
  color: #172033;
  font-size: 20px;
  font-weight: 950;
}

.ksjb-auth-head span {
  color: #718099;
  font-size: 13px;
  font-weight: 800;
}

.ksjb-auth-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #66758f;
  background: #edf5ff;
  font-size: 22px;
}

.ksjb-anchor-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .7), transparent 28%),
    linear-gradient(135deg, #f8fbff, #ddebff 68%, #eef7ff);
}

.ksjb-anchor-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  padding: 0;
}

.ksjb-anchor-status-grid div {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 16px 8px;
  background: rgba(255, 255, 255, .58);
  text-align: center;
}

.ksjb-anchor-status-grid span {
  color: #718099;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-anchor-status-grid strong {
  overflow: hidden;
  color: #172033;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-anchor-tools {
  margin-top: 0;
}

.ksjb-anchor-console,
.ksjb-stream-box,
.ksjb-anchor-guest-card,
.ksjb-anchor-apply-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ksjb-anchor-form {
  gap: 12px;
}

.ksjb-anchor-form .ksjb-input {
  height: 48px;
  border-radius: 14px;
  background: #fff;
}

.ksjb-anchor-upload {
  border: 1px dashed #c8d9f1;
  border-radius: 16px;
  padding: 12px;
  background: #f8fbff;
}

.ksjb-anchor-upload em {
  color: #8b98ae;
  font-size: 12px;
  font-style: normal;
}

.ksjb-stream-box {
  gap: 10px;
}

.ksjb-anchor-provider-picker {
  display: grid;
  gap: 8px;
}

.ksjb-anchor-provider-picker>div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ksjb-anchor-provider {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px 8px;
  border: 1px solid #dce7f6;
  border-radius: 8px;
  color: #26364e;
  background: #fff;
  text-align: left;
}

.ksjb-anchor-provider strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-anchor-provider span,
.ksjb-anchor-provider-picker em {
  min-width: 0;
  overflow: hidden;
  color: #75849a;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-anchor-provider.is-active {
  border-color: #f25555;
  color: #fff;
  background: linear-gradient(180deg, #ff6666, #db1f2f);
  box-shadow: 0 10px 18px rgba(219, 31, 47, .22);
}

.ksjb-anchor-provider.is-active span {
  color: rgba(255, 255, 255, .82);
}

.ksjb-anchor-provider-action {
  display: grid;
  grid-template-columns: minmax(130px, .75fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.ksjb-anchor-provider-action .ksjb-btn {
  min-height: 42px;
  border-radius: 8px;
}

.ksjb-anchor-provider-action span {
  min-width: 0;
  color: #75849a;
  font-size: 11px;
  line-height: 1.4;
}

.ksjb-anchor-provider-action .ksjb-btn:disabled,
.ksjb-stream-line .ksjb-copy:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.ksjb-stream-line {
  min-height: 50px;
  border: 1px solid #e7eef8;
  border-radius: 14px;
  background: #f8fbff;
}

.ksjb-stream-line code {
  font-size: 13px;
}

.ksjb-stream-line .ksjb-copy,
.ksjb-copy {
  min-width: 48px;
  height: 34px;
  border-radius: 10px;
}

.ksjb-anchor-guest-card,
.ksjb-anchor-apply-card {
  justify-items: start;
}

.ksjb-anchor-guest-card strong,
.ksjb-anchor-apply-card strong {
  color: #172033;
  font-size: 18px;
  font-weight: 950;
}

.ksjb-anchor-guest-card span,
.ksjb-anchor-apply-card span {
  color: #718099;
  font-size: 14px;
  line-height: 1.45;
}

.ksjb-anchor-guest-card .ksjb-btn,
.ksjb-anchor-apply-card .ksjb-btn {
  width: 100%;
  height: 46px;
  border-radius: 14px;
}

.ksjb-settings-list {
  display: grid;
  overflow: hidden;
  padding: 8px 18px;
}

.ksjb-settings-list button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  color: #1f2937;
  background: transparent;
  text-align: left;
}

.ksjb-settings-list button:last-child {
  border-bottom: 0;
}

.ksjb-row-icon svg {
  display: block;
  width: 25px;
  height: 25px;
}

.ksjb-settings-list strong {
  position: relative;
  font-size: 16px;
  font-weight: 800;
}

.ksjb-settings-list strong i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-radius: 999px;
  background: #f0525e;
}

.ksjb-settings-list em {
  color: #8e9bb0;
  font-size: 28px;
  font-style: normal;
}

.ksjb-settings-list button.is-danger strong,
.ksjb-settings-list button.is-danger .ksjb-row-icon,
.ksjb-settings-list button.is-danger em {
  color: #e93548;
}

.ksjb-room-page {
  gap: 0;
  padding-right: 0;
  padding-left: 0;
}

.ksjb-room-player {
  margin: 0 -14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ksjb-room-player.ksjb-site-player:fullscreen,
.ksjb-room-player.ksjb-site-player.is-web-fullscreen {
  inset: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
}

.ksjb-room-tabs-wide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 84px;
  align-items: stretch;
  overflow: hidden;
  margin: 10px 0 0;
  border: 1px solid rgba(132, 169, 222, .2);
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow: 0 10px 24px rgba(76, 120, 188, .08);
}

.ksjb-room-tabs-wide button {
  min-height: 50px;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: 15px;
}

.ksjb-room-input.is-hidden {
  display: none;
}

.ksjb-room-private-peers {
  display: flex;
  gap: 8px;
  overflow-x: hidden;
  padding: 10px 11px 0;
}

.ksjb-room-private-peers span,
.ksjb-room-private-peers button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid #dce8fa;
  border-radius: 999px;
  padding: 0 12px;
  color: #6f7f98;
  background: #f7fbff;
  font-size: 13px;
  font-weight: 900;
}

.ksjb-room-private-peers span {
  display: inline-flex;
  align-items: center;
}

.ksjb-room-private-peers button.is-active {
  border-color: #76aafa;
  color: #fff;
  background: linear-gradient(180deg, #8dbbff, #4d8dff);
  box-shadow: 0 8px 16px rgba(77, 141, 255, .2);
}

.ksjb-room-private-head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  margin: 12px 12px 4px;
  padding: 12px;
  border-radius: 12px;
  background: #f7fbff;
  box-shadow: inset 0 0 0 1px #e1ebfa;
}

.ksjb-room-private-head .ksjb-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
}

.ksjb-room-private-head strong {
  display: block;
  color: #172842;
  font-size: 15px;
  font-weight: 950;
}

.ksjb-room-private-head em {
  display: block;
  margin-top: 2px;
  color: #8493aa;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.ksjb-room-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 999px;
  color: #fff;
  background: #ff4058;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-private-chat-list .ksjb-private-msg {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 8px;
  align-items: start;
  min-width: 0;
}

.ksjb-private-msg-avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #8dbbff, #4d8dff);
  font-size: 12px;
  font-weight: 950;
}

.ksjb-private-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-private-chat-list .ksjb-private-msg.mine {
  grid-template-columns: 1fr 28px;
}

.ksjb-private-chat-list .ksjb-private-msg.mine .ksjb-private-msg-avatar {
  grid-column: 2;
}

.ksjb-private-float-notice {
  position: fixed;
  right: calc(50% - 282px);
  bottom: 96px;
  z-index: 80;
  display: grid;
  gap: 2px;
  max-width: 260px;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  text-align: left;
  color: #fff;
  background: rgba(40, 92, 190, .94);
  box-shadow: 0 16px 34px rgba(18, 65, 150, .28);
}

.ksjb-private-float-notice b {
  font-size: 13px;
  font-weight: 950;
}

.ksjb-private-float-notice span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .ksjb-private-float-notice {
    right: 14px;
    left: 14px;
    bottom: 94px;
    max-width: none;
  }
}

.ksjb-follow-wide {
  border: 0 !important;
  color: #fff !important;
  background: #80b2ff !important;
  font-weight: 950;
}

.ksjb-follow-wide.is-followed {
  color: #4d8dff !important;
  background: #edf4ff !important;
}

.ksjb-room-ad {
  min-height: 58px;
  margin: 0;
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, #ff8a42, #ff5f36);
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}

.ksjb-room-notice {
  margin: 0 0 10px;
  padding: 8px 14px;
  color: #5b9ff7;
  background: #dcefff;
  font-size: 13px;
  font-weight: 800;
}

.ksjb-anchor-profile-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 70px;
  gap: 12px;
  align-items: center;
  min-height: 116px;
  margin-bottom: 12px;
  border-left: 5px solid #62a6ff;
  border-radius: 18px;
  padding: 18px;
  background: #f1f5fb;
}

.ksjb-anchor-profile-card .ksjb-avatar {
  width: 58px;
  height: 58px;
}

.ksjb-anchor-profile-card strong {
  font-size: 18px;
}

.ksjb-anchor-profile-card em {
  display: inline-block;
  margin-left: 6px;
  border-radius: 6px;
  padding: 1px 6px;
  color: #fff;
  background: #ff9a3d;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-anchor-profile-card p {
  margin: 5px 0 0;
  color: #93a0b4;
  font-size: 13px;
}

.ksjb-anchor-profile-card button {
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #80b2ff;
  font-weight: 900;
}

.ksjb-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ksjb-related-grid button {
  display: grid;
  gap: 6px;
  min-height: 92px;
  border: 0;
  border-radius: 14px;
  padding: 14px;
  color: #fff;
  background: linear-gradient(135deg, #7fb5ff, #5c95f2);
  text-align: left;
}

.ksjb-related-grid b {
  font-size: 16px;
}

@keyframes ksjbPulse {
  0%, 100% {
    opacity: .45;
    transform: scale(.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes ksjbShimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 374px) {
  .ksjb-mobile-main {
    padding-right: 10px;
    padding-left: 10px;
  }

  .ksjb-live-grid {
    gap: 8px;
  }

  .ksjb-live-body {
    padding: 8px;
  }

  .ksjb-score-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px minmax(0, 1fr) 40px;
    gap: 4px;
    padding-right: 7px;
    padding-left: 7px;
  }
}

@media (min-width: 760px) {
  .ksjb-mobile-shell {
    border-right: 1px solid rgba(0, 0, 0, .08);
    border-left: 1px solid rgba(0, 0, 0, .08);
  }
}

/* KSJB mobile visual refinement: light header, real icons, denser home cards. */
.ksjb-mobile-topbar {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 rgba(107, 139, 188, .12);
  backdrop-filter: blur(14px);
}

.ksjb-app-banner {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 52px;
  height: 52px;
  padding: 8px 14px 6px;
  color: #1a1f2c;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.ksjb-app-brand {
  border: 0;
  height: 38px;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  touch-action: manipulation;
}

.ksjb-app-brand img {
  width: min(132px, 44vw);
  max-height: 34px;
  filter: none;
}

.ksjb-app-banner button:not(.ksjb-app-brand) {
  gap: 5px;
  height: 32px;
  border: 1px solid rgba(77, 141, 255, .34);
  padding: 0 13px;
  color: #4d8dff;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 14px rgba(77, 141, 255, .12);
  font-size: 13px;
}

.ksjb-app-banner button:not(.ksjb-app-brand) img {
  width: 16px;
  height: 16px;
}

.ksjb-app-banner button:not(.ksjb-app-brand) svg {
  display: none;
}

.ksjb-top-links {
  height: 44px;
  padding: 0 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(84, 122, 180, .07), inset 0 -1px 0 rgba(96, 130, 180, .1);
}

.ksjb-top-links button {
  height: 44px;
  color: #31405a;
  font-size: 14px;
  font-weight: 850;
}

.ksjb-top-links button.is-active,
.ksjb-top-links button.is-live {
  color: #4d8dff;
}

.ksjb-top-links button.is-active::after {
  bottom: 3px;
  width: 18px;
  height: 3px;
  background: #4d8dff;
}

.ksjb-mobile-main {
  padding-top: 12px;
}

.ksjb-reserve-strip {
  gap: 9px;
  margin: 0 -14px;
  padding: 0 14px 5px;
  scroll-padding: 14px;
}

.ksjb-reserve-card {
  flex-basis: 108px;
  min-height: 148px;
  gap: 8px;
  border: 1px solid rgba(154, 174, 210, .22);
  border-radius: 12px;
  padding: 10px 7px 9px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 18px rgba(76, 120, 188, .1);
}

.ksjb-reserve-card div,
.ksjb-reserve-card p {
  display: initial;
}

.ksjb-reserve-teams {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: start;
  gap: 3px;
}

.ksjb-reserve-team {
  display: grid !important;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.ksjb-team-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e7eef8;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f1f7ff);
}

.ksjb-team-logo img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.ksjb-team-logo b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #7fb2ff, #4d8dff);
  font-size: 13px;
  font-weight: 950;
}

.ksjb-reserve-team strong {
  max-width: 38px;
  color: #1a1f2c;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.ksjb-reserve-vs {
  align-self: center;
  justify-self: center;
  color: #a4afc2;
  font-size: 10px;
  font-weight: 900;
}

.ksjb-reserve-meta {
  display: grid !important;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.ksjb-reserve-meta span,
.ksjb-reserve-meta em {
  max-width: 100%;
  padding: 0;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
}

.ksjb-reserve-meta em {
  color: #1f2a3d;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-reserve-card button {
  position: static;
  width: 76px;
  height: 28px;
  justify-self: center;
  background: linear-gradient(180deg, #6aa2ff, #4d8dff);
  box-shadow: 0 6px 13px rgba(77, 141, 255, .24);
  font-size: 12px;
}

.ksjb-live-grid {
  gap: 9px;
}

.ksjb-live-card {
  border: 1px solid rgba(154, 174, 210, .2);
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(76, 120, 188, .1);
}

.ksjb-live-cover {
  background: #dce8f7;
}

.ksjb-live-cover img {
  object-fit: cover;
}

.ksjb-live-cover::after {
  height: 44%;
  background: linear-gradient(0deg, rgba(16, 23, 38, .54), transparent);
}

.ksjb-live-ribbon {
  top: 6px;
  left: 6px;
  height: 20px;
  border-radius: 5px;
  padding: 0 7px;
  background: #ff2f3e;
  font-size: 10px;
}

.ksjb-live-heat {
  right: 6px;
  bottom: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(17, 24, 39, .62);
  font-size: 10px;
}

.ksjb-live-body {
  gap: 7px;
  padding: 8px 8px 9px;
}

.ksjb-live-title {
  min-height: 32px;
  color: #1a1f2c;
  font-size: 13px;
  line-height: 1.25;
}

.ksjb-anchor-line {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.ksjb-anchor-line::after {
  display: none;
}

.ksjb-anchor-line .ksjb-avatar {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.ksjb-mobile-tabbar {
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(202, 214, 232, .72);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 22px rgba(72, 102, 150, .08);
}

.ksjb-tab-btn {
  gap: 1px;
  height: 56px;
  color: #94a3b8;
  font-size: 11px;
}

.ksjb-tab-btn span {
  line-height: 16px;
}

.ksjb-tab-btn.is-active {
  color: #4d8dff;
}

.ksjb-tab-icon {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.ksjb-tab-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.ksjb-tab-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.ksjb-tab-btn.is-active .ksjb-tab-icon {
  background: #eaf3ff;
  box-shadow: inset 0 0 0 1px rgba(77, 141, 255, .1);
}

/* Score module refinement: segmented filters and lightweight match cards. */
.ksjb-page[data-view="scores"] {
  min-height: 100%;
  margin: -12px -12px 0;
  padding: 0 12px calc(92px + env(safe-area-inset-bottom));
  background: #f3f7ff;
}

.ksjb-page[data-view="scores"] .ksjb-score-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  gap: 10px;
  margin: 0 -12px 8px;
  padding: 10px 14px 10px;
  background: rgba(243, 247, 255, .96);
  box-shadow: 0 1px 0 rgba(184, 203, 232, .48);
}

.ksjb-score-sport-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  height: 36px;
  padding: 2px;
  border: 1px solid #e4ecf8;
  border-radius: 999px;
  background: #fff;
}

.ksjb-score-sport-tabs button,
.ksjb-score-status-tabs button {
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3f4d68;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ksjb-score-sport-tabs button.is-active,
.ksjb-score-status-tabs button.is-active {
  color: #fff;
  background: linear-gradient(180deg, #73a8ff 0%, #3f7df4 100%);
  box-shadow: 0 5px 12px rgba(63, 125, 244, .22);
}

.ksjb-score-status-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ksjb-score-status-tabs button {
  height: 32px;
  border: 1px solid #e4ecf8;
  background: #fff;
  color: #64748b;
  font-size: 12px;
}

.ksjb-page[data-view="scores"] .ksjb-api-alert {
  margin: 0 2px 8px;
  padding: 7px 10px;
  border: 1px solid #e5edf8;
  border-radius: 8px;
  color: #7a8aa6;
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
}

.ksjb-score-list {
  display: grid;
  gap: 10px;
}

.ksjb-score-match-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 38px;
  grid-template-areas:
    "league minute status status"
    "home score away video"
    "extra extra extra extra";
  align-items: center;
  gap: 9px 8px;
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border: 1px solid #e7eef8;
  border-radius: 10px;
  color: #1f2f4d;
  background: #fff;
  box-shadow: 0 5px 14px rgba(31, 71, 140, .06);
  text-align: left;
}

.ksjb-score-match-card .ksjb-score-league {
  grid-area: league;
  min-width: 0;
  overflow: hidden;
  color: #7c8aa2;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-match-card .ksjb-score-minute {
  grid-area: minute;
  justify-self: center;
  color: #ff3b4a;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.ksjb-score-match-card .ksjb-status-pill {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 48px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
}

.ksjb-score-match-card .ksjb-score-home {
  grid-area: home;
  justify-content: flex-end;
  text-align: right;
}

.ksjb-score-match-card .ksjb-score-away {
  grid-area: away;
  justify-content: flex-start;
  text-align: left;
}

.ksjb-score-match-card .ksjb-score-team {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: #24324c;
  font-size: 14px;
  font-weight: 900;
}

.ksjb-score-match-card .ksjb-score-team em {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-match-card .ksjb-score-home .ksjb-team-logo {
  order: 2;
}

.ksjb-team-logo.is-score {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-width: 2px;
  box-shadow: 0 4px 10px rgba(67, 132, 244, .16);
}

.ksjb-team-logo.is-score b {
  font-size: 15px;
}

.ksjb-score-match-card .ksjb-score-num {
  grid-area: score;
  justify-self: center;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 40px;
  border-radius: 999px;
  color: #334155;
  background: #f6f9ff;
  box-shadow: inset 0 0 0 1px #e4ecfa;
  font-size: 17px;
  font-weight: 950;
  text-align: center;
}

.ksjb-score-match-card .ksjb-score-num.is-live {
  color: #ff3b4a;
  background: rgba(255, 59, 74, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 59, 74, .18);
}

.ksjb-score-match-card.is-done {
  opacity: .78;
}

.ksjb-score-video {
  grid-area: video;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ff3b4a;
  box-shadow: 0 5px 11px rgba(255, 59, 74, .22);
}

.ksjb-score-video.is-detail {
  width: 38px;
  border: 1px solid #d8e6fb;
  color: #4f86f4;
  background: #f6f9ff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 950;
}

.ksjb-changliao-page {
  display: grid;
  gap: 12px;
}

.ksjb-changliao-page.is-chat {
  display: flex;
  min-height: calc(100dvh - 112px);
  flex-direction: column;
}

.ksjb-changliao-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  min-height: 46px;
}

.ksjb-changliao-head strong {
  color: #21304a;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
}

.ksjb-changliao-head button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #4f86f4;
  background: #f4f8ff;
}

.ksjb-changliao-head svg {
  width: 20px;
  height: 20px;
}

.ksjb-changliao-back {
  font-size: 30px;
  line-height: 1;
}

.ksjb-changliao-hero,
.ksjb-changliao-provider,
.ksjb-changliao-actions,
.ksjb-changliao-card,
.ksjb-changliao-session-meta,
.ksjb-changliao-admin {
  border: 1px solid #e0eafb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(68, 112, 178, .08);
}

.ksjb-changliao-hero {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.ksjb-changliao-hero b,
.ksjb-changliao-avatar,
.ksjb-changliao-group b {
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, #9bc6ff, #4f86f4);
  box-shadow: 0 10px 22px rgba(79, 134, 244, .24);
}

.ksjb-changliao-hero b {
  width: 54px;
  height: 54px;
}

.ksjb-changliao-hero svg,
.ksjb-changliao-avatar svg,
.ksjb-changliao-group svg {
  width: 24px;
  height: 24px;
}

.ksjb-changliao-hero div,
.ksjb-changliao-row span,
.ksjb-changliao-group span,
.ksjb-changliao-provider div {
  min-width: 0;
}

.ksjb-changliao-hero strong,
.ksjb-changliao-provider strong,
.ksjb-changliao-card > strong {
  display: block;
  color: #21304a;
  font-size: 17px;
  font-weight: 950;
}

.ksjb-changliao-hero span,
.ksjb-changliao-provider span,
.ksjb-changliao-row em,
.ksjb-changliao-group em,
.ksjb-changliao-session-meta span,
.ksjb-changliao-session-meta em {
  display: block;
  overflow: hidden;
  color: #8291aa;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-changliao-hero em,
.ksjb-changliao-hero button {
  justify-self: end;
  border: 1px solid #d6e4fb;
  border-radius: 999px;
  padding: 7px 12px;
  color: #4f86f4;
  background: #f7fbff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-changliao-provider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.ksjb-changliao-provider p {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
  background: #eef5ff;
}

.ksjb-changliao-provider button,
.ksjb-changliao-tabs button,
.ksjb-changliao-actions button,
.ksjb-changliao-group footer button,
.ksjb-changliao-request button {
  border: 0;
  border-radius: 999px;
  font-weight: 950;
}

.ksjb-changliao-provider button {
  height: 30px;
  padding: 0 10px;
  color: #64748b;
  background: transparent;
}

.ksjb-changliao-provider button.is-active {
  color: #fff;
  background: #4f86f4;
}

.ksjb-changliao-actions {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ksjb-changliao-actions form {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 8px;
}

.ksjb-changliao-actions strong {
  color: #253550;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-changliao-actions input,
.ksjb-changliao-send input {
  min-width: 0;
  height: 38px;
  border: 1px solid #dfeafa;
  border-radius: 999px;
  padding: 0 13px;
  color: #263650;
  background: #f8fbff;
  font-size: 13px;
  outline: none;
}

.ksjb-changliao-actions button,
.ksjb-changliao-group footer button {
  height: 36px;
  color: #fff;
  background: #4f86f4;
  font-size: 12px;
}

.ksjb-changliao-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: #eef5ff;
}

.ksjb-changliao-tabs button {
  height: 38px;
  color: #63728d;
  background: transparent;
  font-size: 14px;
}

.ksjb-changliao-tabs button.is-active {
  color: #fff;
  background: linear-gradient(180deg, #79adff, #4f86f4);
}

.ksjb-changliao-refreshing {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 12px;
  color: #6f7f98;
  background: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 850;
}

.ksjb-changliao-list {
  display: grid;
  gap: 9px;
}

.ksjb-changliao-row,
.ksjb-changliao-group {
  border: 1px solid #e0eafb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(68, 112, 178, .07);
}

.ksjb-changliao-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  text-align: left;
}

.ksjb-changliao-avatar {
  width: 46px;
  height: 46px;
}

.ksjb-changliao-row strong,
.ksjb-changliao-group strong {
  display: block;
  overflow: hidden;
  color: #253550;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-changliao-row i,
.ksjb-changliao-row small {
  justify-self: end;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-changliao-row i {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: #ff4b5f;
}

.ksjb-changliao-row small {
  color: #8a98b0;
}

.ksjb-changliao-group {
  overflow: hidden;
}

.ksjb-changliao-group > button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 12px;
  background: transparent;
  text-align: left;
}

.ksjb-changliao-group b {
  width: 48px;
  height: 48px;
}

.ksjb-changliao-group footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid #eef3fb;
}

.ksjb-changliao-group footer span {
  color: #8291aa;
  font-size: 12px;
  font-weight: 850;
}

.ksjb-changliao-group footer button {
  min-width: 58px;
  padding: 0 12px;
}

.ksjb-changliao-card {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ksjb-changliao-card p {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  color: #8291aa;
  font-size: 13px;
  font-weight: 850;
}

.ksjb-changliao-card p span {
  color: #8a98b0;
}

.ksjb-changliao-card p em {
  overflow: hidden;
  color: #253550;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-changliao-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  gap: 6px;
  color: #8291aa;
  text-align: center;
}

.ksjb-changliao-empty.is-compact {
  min-height: 82px;
}

.ksjb-changliao-empty strong {
  color: #253550;
  font-size: 16px;
  font-weight: 950;
}

.ksjb-changliao-empty span {
  color: #8291aa;
  font-size: 13px;
  font-weight: 850;
}

.ksjb-changliao-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 52px;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #5f6c83;
  font-size: 12px;
  font-weight: 850;
}

.ksjb-changliao-request button {
  height: 28px;
  color: #fff;
  background: #4f86f4;
  font-size: 12px;
}

.ksjb-changliao-session-meta,
.ksjb-changliao-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}

.ksjb-changliao-admin button {
  height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #4f86f4;
  background: #edf5ff;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-changliao-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 360px;
  border-radius: 10px;
  padding: 12px;
  background: #f5f9ff;
}

.ksjb-changliao-history {
  justify-self: center;
  height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: #4f86f4;
  background: #eaf3ff;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-changliao-page.is-chat .ksjb-changliao-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ksjb-changliao-messages p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  gap: 4px;
  margin: 0;
}

.ksjb-changliao-messages p.is-mine {
  align-items: flex-end;
}

.ksjb-changliao-messages b {
  color: #8a98b0;
  font-size: 11px;
}

.ksjb-changliao-messages span {
  display: inline-block;
  width: fit-content;
  max-width: 78%;
  border-radius: 12px 12px 12px 3px;
  padding: 9px 11px;
  color: #253550;
  background: #fff;
  box-shadow: 0 6px 14px rgba(68, 112, 178, .08);
  font-size: 13px;
  line-height: 1.45;
}

.ksjb-changliao-messages .is-mine span {
  border-radius: 12px 12px 3px 12px;
  color: #fff;
  background: #4f86f4;
}

.ksjb-changliao-messages .is-failed span {
  background: #ffedf1;
  color: #ff4056;
}

.ksjb-changliao-detail {
  display: grid;
  gap: 10px;
}

.ksjb-changliao-profile-card {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
}

.ksjb-changliao-profile-card > b {
  width: 52px;
  height: 52px;
}

.ksjb-changliao-profile-card div {
  min-width: 0;
}

.ksjb-changliao-profile-card span {
  display: block;
  overflow: hidden;
  color: #8291aa;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-changliao-settings label {
  display: grid;
  gap: 6px;
  color: #5f6c83;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-changliao-settings input,
.ksjb-changliao-settings textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dfeafa;
  border-radius: 10px;
  padding: 10px 12px;
  color: #263650;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 800;
  outline: none;
  resize: vertical;
}

.ksjb-changliao-settings button {
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #4f86f4;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-changliao-settings button.is-danger {
  color: #ff4056;
  background: #ffedf1;
}

.ksjb-changliao-members article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #eef3fb;
}

.ksjb-changliao-members article:first-of-type {
  border-top: 0;
}

.ksjb-changliao-members article span {
  min-width: 0;
}

.ksjb-changliao-members article b,
.ksjb-changliao-members article em {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-changliao-members article b {
  color: #253550;
  font-size: 14px;
  font-weight: 950;
}

.ksjb-changliao-members article em {
  color: #8a98b0;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.ksjb-changliao-members article p {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

.ksjb-changliao-members article button {
  height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 9px;
  color: #4f86f4;
  background: #edf5ff;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-changliao-send {
  position: sticky;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0eafb;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(68, 112, 178, .12);
}

.ksjb-changliao-page.is-chat .ksjb-changliao-send {
  position: static;
  flex: 0 0 auto;
  margin-top: 10px;
}

.ksjb-changliao-send button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #4f86f4;
}

.ksjb-changliao-send.is-disabled {
  opacity: .72;
}

.ksjb-changliao-send.is-disabled input,
.ksjb-changliao-send.is-disabled button {
  cursor: not-allowed;
}

.ksjb-score-video i {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}

.ksjb-score-extra {
  grid-area: extra;
  min-width: 0;
  overflow: hidden;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-float-filter {
  position: fixed;
  right: max(16px, calc((100vw - 480px) / 2 + 16px));
  bottom: calc(72px + env(safe-area-inset-bottom) + 16px);
  z-index: 30;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #73a8ff 0%, #3f7df4 100%);
  box-shadow: 0 9px 18px rgba(61, 123, 244, .32);
  font-size: 13px;
  font-weight: 950;
}

.ksjb-score-detail-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 12px;
  color: #1f2f4d;
}

.ksjb-score-detail-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #31557f;
  background: #edf5ff;
  font-size: 28px;
  line-height: 1;
}

.ksjb-score-detail-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-detail-head span {
  color: #8a98b0;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-score-detail-card {
  display: grid;
  gap: 16px;
  padding: 16px 14px;
  border: 1px solid #e4edf8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(66, 107, 170, .08);
}

.ksjb-score-detail-league,
.ksjb-score-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #8492aa;
  font-size: 12px;
  font-weight: 850;
}

.ksjb-score-detail-league span {
  max-width: 70%;
  overflow: hidden;
  color: #4f86f4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-detail-league em {
  font-style: normal;
}

.ksjb-score-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.ksjb-score-detail-main > b {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 999px;
  color: #334155;
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px #e0eafa;
  font-size: 22px;
  font-weight: 950;
}

.ksjb-score-detail-main > b.is-live {
  color: #ff3b4a;
  background: rgba(255, 59, 74, .08);
}

.ksjb-score-detail-team {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  color: #24324c;
}

.ksjb-score-detail-team strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-detail-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.ksjb-score-detail-meta span,
.ksjb-score-detail-grid article {
  border-radius: 8px;
  background: #f7fbff;
}

.ksjb-score-detail-meta span {
  padding: 5px 8px;
}

.ksjb-score-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ksjb-score-detail-grid article {
  display: grid;
  gap: 5px;
  min-height: 58px;
  padding: 10px;
}

.ksjb-score-detail-grid span,
.ksjb-score-detail-panel p {
  color: #8a98b0;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-score-detail-grid strong {
  min-width: 0;
  overflow: hidden;
  color: #263650;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-detail-panel {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(66, 107, 170, .06);
}

.ksjb-score-detail-panel strong {
  color: #24324c;
  font-size: 14px;
  font-weight: 950;
}

.ksjb-score-detail-panel p {
  margin: 0;
  line-height: 1.45;
}

.ksjb-score-detail-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ksjb-score-detail-board-team {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: center;
}

.ksjb-score-detail-board-team em {
  color: #8a98b0;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ksjb-score-detail-board-score {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.ksjb-score-detail-board-score span {
  color: #4f86f4;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-score-detail-board-score strong {
  display: grid;
  place-items: center;
  min-width: 82px;
  min-height: 46px;
  border-radius: 8px;
  color: #263650;
  background: #f3f8ff;
  box-shadow: inset 0 0 0 1px #dfeafa;
  font-size: 26px;
  font-weight: 950;
}

.ksjb-score-detail-board-score strong.is-live {
  color: #ff3b4a;
  background: #fff0f2;
}

.ksjb-score-detail-board-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: #71819d;
  font-size: 12px;
  font-weight: 850;
}

.ksjb-score-detail-board-meta span,
.ksjb-score-detail-meta b {
  font-weight: 950;
}

.ksjb-score-detail-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  gap: 8px;
  margin: 10px -2px 0;
  padding: 8px 2px;
  overflow-x: auto;
  border-bottom: 1px solid #dbe6f5;
  background: rgba(236, 244, 255, .96);
  scrollbar-width: none;
}

.ksjb-score-detail-tabs::-webkit-scrollbar {
  display: none;
}

.ksjb-score-detail-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-width: 76px;
  height: 34px;
  border: 0;
  border-radius: 0;
  color: #61708c;
  background: transparent;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-score-detail-tabs button.is-active {
  color: #4f86f4;
}

.ksjb-score-detail-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #5c91ff;
}

.ksjb-score-detail-tabs i {
  position: absolute;
  top: -6px;
  right: 2px;
  padding: 1px 4px;
  border-radius: 4px 4px 4px 0;
  color: #fff;
  background: #ff4b5f;
  font-size: 8px;
  font-style: normal;
  line-height: 1.2;
}

.ksjb-score-detail-live-panel {
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: #15181d;
  box-shadow: 0 8px 20px rgba(28, 44, 70, .14);
}

.ksjb-score-detail-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  color: #aeb8c9;
  font-size: 12px;
  font-weight: 850;
}

.ksjb-score-detail-live-head span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-score-detail-live-head div {
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}

.ksjb-score-detail-live-head button {
  min-width: 72px;
  height: 30px;
  border: 0;
  color: #c7cfdb;
  background: transparent;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-score-detail-live-head button.is-active {
  color: #6fb2ff;
  background: rgba(255, 255, 255, .08);
}

.ksjb-score-detail-live-panel iframe,
.ksjb-score-detail-animation-empty {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  background: #111722;
}

.ksjb-score-detail-animation-empty {
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 22px;
  color: #fff;
  text-align: center;
}

.ksjb-score-detail-animation-empty strong {
  font-size: 18px;
  font-weight: 950;
}

.ksjb-score-detail-animation-empty p {
  max-width: 320px;
  margin: 0;
  color: #aeb8c9;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

@media (max-width: 420px) {
  .ksjb-score-detail-live-panel iframe,
  .ksjb-score-detail-animation-empty {
    height: 330px;
  }
}

.ksjb-score-detail-stats {
  gap: 10px;
}

.ksjb-score-detail-stat {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  color: #7f8ea8;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-score-detail-stat > span:last-child {
  text-align: right;
}

.ksjb-score-detail-stat div {
  display: grid;
  gap: 5px;
}

.ksjb-score-detail-stat strong {
  color: #5b6a84;
  font-size: 12px;
  text-align: center;
}

.ksjb-score-detail-stat i {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3fb;
}

.ksjb-score-detail-stat em {
  display: block;
  min-width: 4px;
  height: 100%;
  background: #4f86f4;
}

.ksjb-score-detail-stat em:first-child {
  justify-self: end;
}

.ksjb-score-detail-events div {
  display: grid;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  overflow: hidden;
}

.ksjb-score-detail-events p {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border-bottom: 1px solid #edf2f8;
}

.ksjb-score-detail-events p:last-child {
  border-bottom: 0;
}

.ksjb-score-detail-events span {
  color: #8a98b0;
  font-weight: 900;
}

.ksjb-score-detail-events em {
  color: #24324c;
  font-style: normal;
  font-weight: 900;
}

.ksjb-score-detail-lineup div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #263650;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-score-detail-lineup em {
  padding: 5px 8px;
  border-radius: 999px;
  color: #6b7c99;
  background: #f2f7ff;
  font-style: normal;
  font-size: 12px;
}

.ksjb-score-detail-grid.is-inner {
  margin-top: 0;
}

/* Home, room and profile visual pass. Logo/header asset is intentionally untouched. */
.ksjb-mobile-topbar.is-profile {
  box-shadow: 0 1px 0 rgba(107, 139, 188, .12);
}

.ksjb-mobile-topbar.is-profile .ksjb-top-links {
  display: none;
}

.ksjb-home-section-head {
  margin-top: 14px;
  margin-bottom: 10px;
}

.ksjb-home-section-head button {
  border: 0;
  color: #8b9ab2;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-brand-hero {
  min-height: 136px;
  border-radius: 9px;
  touch-action: pan-y;
  user-select: none;
}

.ksjb-brand-hero-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(calc(var(--hero-index, 0) * -100%));
  transition: transform .28s ease;
  will-change: transform;
}

.ksjb-brand-hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.ksjb-brand-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.ksjb-worldcup-countdown-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 17px 72px 15px 16px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .35), transparent 14%),
    radial-gradient(circle at 52% 14%, rgba(255, 218, 74, .28), transparent 18%),
    linear-gradient(112deg, #2068ff 0%, #7b16ff 42%, #e5164f 71%, #fa3630 100%);
}

.ksjb-worldcup-countdown-bg,
.ksjb-worldcup-countdown-bg i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ksjb-worldcup-countdown-bg i:nth-child(1) {
  inset: auto auto -32px -30px;
  width: 124px;
  height: 124px;
  border: 18px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
}

.ksjb-worldcup-countdown-bg i:nth-child(2) {
  left: 43%;
  top: -26px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 24px;
  transform: rotate(24deg);
}

.ksjb-worldcup-countdown-bg i:nth-child(3) {
  right: 58px;
  bottom: -26px;
  width: 148px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transform: rotate(-16deg);
}

.ksjb-worldcup-countdown-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ksjb-worldcup-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  background: rgba(8, 18, 47, .22);
  color: rgba(255, 255, 255, .86);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
}

.ksjb-worldcup-countdown-copy strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(21px, 5.8vw, 32px);
  line-height: 1.02;
  font-weight: 1000;
  text-shadow: 0 4px 14px rgba(20, 20, 60, .28);
  white-space: nowrap;
}

.ksjb-worldcup-countdown-copy em {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, .82);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-worldcup-countdown-units {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ksjb-worldcup-countdown-units span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  height: 48px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 38, 114, .74), rgba(81, 18, 112, .66));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 22px rgba(14, 25, 80, .22);
}

.ksjb-worldcup-countdown-units b {
  font-size: clamp(21px, 5.6vw, 30px);
  line-height: 1;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.ksjb-worldcup-countdown-units i {
  color: rgba(255, 255, 255, .88);
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.ksjb-worldcup-trophy {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 68px;
  border-radius: 22px 22px 8px 8px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 22px rgba(35, 18, 65, .26);
}

.ksjb-worldcup-trophy::before {
  content: "2026";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  color: #ef1f45;
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
}

.ksjb-worldcup-trophy::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 24%, transparent 25%),
    conic-gradient(from 18deg, #101928 0 18%, #fff 18% 32%, #101928 32% 50%, #fff 50% 64%, #101928 64% 82%, #fff 82% 100%);
  border: 2px solid #e9eef7;
}

.ksjb-worldcup-trophy i {
  width: 18px;
  height: 36px;
  margin-top: 16px;
  border-radius: 14px 14px 7px 7px;
  background: linear-gradient(180deg, #ffdf70, #c6871f 62%, #8c5a17);
  box-shadow:
    -9px -4px 0 -4px #f3c858,
    9px -4px 0 -4px #f3c858,
    0 22px 0 -6px #a56d22;
}

.ksjb-brand-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 12, 25, .55), transparent 38%),
    linear-gradient(180deg, rgba(5, 12, 25, .06), rgba(5, 12, 25, .22));
}

.ksjb-brand-hero-mosaic {
  display: none;
}

.ksjb-brand-hero-mosaic i {
  min-width: 0;
  min-height: 0;
  background-position: center;
  background-size: cover;
  filter: saturate(1.04) contrast(1.02);
}

.ksjb-brand-hero-mosaic i:nth-child(1) { background-image: url("/static/images/live-covers/live-02.jpg"); }
.ksjb-brand-hero-mosaic i:nth-child(2) { background-image: url("/static/images/live-covers/live-01.jpg"); }
.ksjb-brand-hero-mosaic i:nth-child(3) { background-image: url("/static/images/live-covers/live-03.jpg"); }
.ksjb-brand-hero-mosaic i:nth-child(4) { background-image: url("/static/images/live-covers/live-04.jpg"); }
.ksjb-brand-hero-mosaic i:nth-child(5) { background-image: url("/static/images/live-covers/live-05.jpg"); }
.ksjb-brand-hero-mosaic i:nth-child(6) { background-image: url("/static/images/live-covers/live-02.jpg"); }

.ksjb-brand-hero-mosaic::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(10, 18, 31, .18), rgba(10, 18, 31, .64));
}

.ksjb-brand-hero .ksjb-brand-mark {
  display: none;
}

.ksjb-brand-hero .ksjb-brand-mark img {
  width: 112px;
  max-height: 30px;
  filter: none;
}

.ksjb-reserve-card {
  flex: 0 0 clamp(112px, 30vw, 124px);
  min-height: 150px;
}

.ksjb-reserve-strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.ksjb-team-logo.has-logo b {
  display: none;
}

.ksjb-reserve-team strong {
  max-width: 46px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-live-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ksjb-room-tabs-wide {
  grid-template-columns: repeat(5, minmax(0, 1fr)) 70px;
}

.ksjb-room-tabs-wide button {
  min-width: 0;
  padding: 0 4px;
  font-size: 14px;
  white-space: nowrap;
}

.ksjb-follow-wide {
  font-size: 14px;
  white-space: nowrap;
}

.ksjb-player-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
}

.ksjb-player-match,
.ksjb-player-heat {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  color: rgba(255, 255, 255, .95);
  background: rgba(5, 8, 14, .46);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.ksjb-player-match {
  justify-self: start;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.ksjb-player-heat {
  justify-self: end;
}

.ksjb-player-center-actions {
  bottom: 66px;
}

.ksjb-player-orb.is-gold {
  min-width: 134px;
  height: 38px;
  padding: 0 13px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.ksjb-player-orb.is-gold em {
  font-size: 14px;
}

.ksjb-room-benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 12px;
  color: #fff;
  background: linear-gradient(135deg, #ff9c3d, #ff6b35);
  font-size: 15px;
  font-weight: 950;
}

.ksjb-room-benefit strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-room-benefit button {
  height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 11px;
  color: #ff7339;
  background: #fff;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-room-panel {
  min-height: clamp(238px, 42dvh, 360px);
}

.ksjb-room-feed {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ksjb-room-feed-head,
.ksjb-room-feed-lines {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ksjb-room-feed-head strong {
  color: #17243d;
  font-size: 17px;
  font-weight: 950;
}

.ksjb-room-feed-head em {
  color: #8a9ab6;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.ksjb-room-feed-lines {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.ksjb-room-feed-lines span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  color: #4d8dff;
  background: #edf5ff;
  font-size: 12px;
  font-weight: 900;
}

.ksjb-room-feed-list,
.ksjb-room-analysis-list {
  display: grid;
  gap: 8px;
}

.ksjb-room-feed-list p,
.ksjb-room-analysis-list article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  border: 1px solid #e2ecfb;
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
}

.ksjb-room-feed-list b,
.ksjb-room-analysis-list strong {
  color: #7d8ca8;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-room-feed-list span,
.ksjb-room-analysis-list span {
  min-width: 0;
  color: #1d2b45;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.ksjb-room-lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ksjb-room-lineup-grid section {
  min-width: 0;
  border: 1px solid #e2ecfb;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.ksjb-room-lineup-grid strong {
  display: block;
  min-width: 0;
  margin-bottom: 8px;
  overflow: hidden;
  color: #17243d;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-lineup-grid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksjb-room-lineup-grid li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #596983;
  font-size: 13px;
  font-weight: 800;
}

.ksjb-room-lineup-grid li b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #4d8dff;
  background: #eef5ff;
  font-size: 11px;
}

.ksjb-room-lineup-grid li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-lineup-grid li.is-empty {
  grid-template-columns: minmax(0, 1fr);
}

.ksjb-room-feed-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  padding: 20px;
  color: #8a9ab6;
  text-align: center;
  font-weight: 850;
}

.ksjb-room-feed-state strong {
  color: #17243d;
  font-size: 17px;
}

.ksjb-room-feed-state button {
  height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  background: #4d8dff;
  font-weight: 900;
}

.ksjb-chat-list {
  align-content: start;
  min-height: 196px;
}

.ksjb-chat-msg {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 9px 10px;
  background: transparent;
}

.ksjb-chat-msg b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4d8dff;
  white-space: nowrap;
}

.ksjb-chat-msg b em {
  display: inline-flex;
  align-items: center;
  height: 18px;
  border-radius: 999px;
  padding: 0 6px;
  color: #fff;
  background: linear-gradient(180deg, #8dbbff, #4d8dff);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-chat-msg span {
  min-width: 0;
  overflow: visible;
  color: #45546c;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ksjb-chat-msg.is-empty {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.ksjb-chat-msg.is-empty span {
  white-space: normal;
  text-align: center;
}

.ksjb-page[data-view="me"] {
  margin-top: -12px;
}

.ksjb-page[data-view="me"] .ksjb-me-hero {
  min-height: 152px;
  margin-top: 0;
  padding-top: 30px;
}

.ksjb-page[data-view="me"] .ksjb-me-edit {
  min-width: 72px;
  justify-content: center;
  white-space: nowrap;
}

.ksjb-page[data-view="me"] .ksjb-wallet-card,
.ksjb-page[data-view="me"] .ksjb-neo-card {
  border-radius: 14px;
}

.ksjb-page[data-view="me"] .ksjb-soft-icon {
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .44), transparent 40%),
    linear-gradient(180deg, #9fcaff, #4f8ff4);
}

.ksjb-settings-list button {
  min-height: 48px;
}

.ksjb-wallet-item {
  border: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
}

.ksjb-profile-subpage {
  gap: 12px;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.ksjb-subpage-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 44px;
}

.ksjb-subpage-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: #315fbd;
  background: rgba(255, 255, 255, .84);
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(69, 113, 180, .12);
}

.ksjb-subpage-head strong {
  overflow: hidden;
  color: #14223a;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-sub-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 4px;
  border: 1px solid rgba(121, 160, 220, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.ksjb-sub-tabs button {
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #697996;
  background: transparent;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.ksjb-sub-tabs button.is-active {
  color: #fff;
  background: linear-gradient(180deg, #80b2ff, #4a87f5);
  box-shadow: 0 8px 16px rgba(75, 135, 245, .28);
}

.ksjb-sub-list {
  display: grid;
  gap: 10px;
}

.ksjb-sub-empty,
.ksjb-sub-preview,
.ksjb-help-list,
.ksjb-sub-menu,
.ksjb-recharge-grid,
.ksjb-wallet-records {
  padding: 16px;
}

.ksjb-sub-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.ksjb-sub-empty > b {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, #9fcaff, #4f8ff4);
}

.ksjb-sub-empty svg {
  width: 26px;
  height: 26px;
}

.ksjb-sub-empty strong,
.ksjb-sub-preview strong,
.ksjb-wallet-records strong {
  color: #14223a;
  font-size: 16px;
  font-weight: 950;
}

.ksjb-sub-empty span,
.ksjb-sub-preview span,
.ksjb-wallet-records p {
  color: #73829a;
  font-size: 13px;
  line-height: 1.55;
}

.ksjb-sub-preview {
  display: grid;
  gap: 8px;
  border: 1px dashed rgba(86, 139, 231, .34);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
}

.ksjb-app-download-hero,
.ksjb-app-download-metrics,
.ksjb-app-download-features article,
.ksjb-app-download-guide {
  border: 1px solid rgba(113, 163, 229, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(82, 120, 176, .14), inset 0 1px 0 rgba(255, 255, 255, .88);
}

.ksjb-app-download-hero {
  display: grid;
  gap: 13px;
  padding: 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 4%, rgba(23, 214, 238, .2), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 250, 255, .92));
}

.ksjb-app-download-head {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.ksjb-app-download-head img {
  width: 82px;
  height: 82px;
  border-radius: 8px;
  object-fit: cover;
  filter: drop-shadow(0 10px 18px rgba(27, 101, 204, .22));
}

.ksjb-app-download-head strong {
  display: block;
  margin-bottom: 5px;
  color: #14223a;
  font-size: 20px;
  font-weight: 950;
}

.ksjb-app-download-head span,
.ksjb-app-download-hero small,
.ksjb-app-download-features span,
.ksjb-app-download-guide li {
  color: #71829b;
  font-size: 13px;
  line-height: 1.55;
}

.ksjb-app-download-head em {
  display: inline-flex;
  margin-top: 9px;
  border: 1px solid rgba(78, 146, 245, .18);
  border-radius: 999px;
  padding: 5px 9px;
  color: #326ac3;
  background: #f2f8ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ksjb-app-download-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.ksjb-app-download-actions .ksjb-btn.secondary {
  color: #fff;
  background: linear-gradient(180deg, #17d6ee, #0b83f5);
  box-shadow: 0 12px 24px rgba(11, 131, 245, .22);
}

.ksjb-app-download-web {
  height: 38px;
  border: 1px solid rgba(102, 151, 220, .24);
  border-radius: 8px;
  color: #315fbd;
  background: #f7fbff;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-app-download-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.ksjb-app-download-metrics span {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px 4px;
  border-right: 1px solid rgba(103, 153, 221, .14);
  text-align: center;
}

.ksjb-app-download-metrics span:last-child {
  border-right: 0;
}

.ksjb-app-download-metrics strong {
  color: #14223a;
  font-size: 15px;
  font-weight: 950;
}

.ksjb-app-download-metrics em {
  color: #71829b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.ksjb-app-download-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ksjb-app-download-features article,
.ksjb-app-download-guide {
  padding: 14px;
}

.ksjb-app-download-features b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #15d7ee, #0b83f5);
  font-size: 18px;
  font-weight: 950;
}

.ksjb-app-download-features strong,
.ksjb-app-download-guide strong {
  display: block;
  margin-bottom: 7px;
  color: #14223a;
  font-size: 14px;
  font-weight: 950;
}

.ksjb-app-download-guide ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.ksjb-app-download-guide li {
  list-style: none;
  border: 1px solid rgba(103, 153, 221, .18);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f6faff;
}

.ksjb-support-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  background: rgba(9, 18, 35, .42);
}

.ksjb-support-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.ksjb-support-sheet {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto;
  width: min(100%, 480px);
  max-height: 82vh;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: #eef5ff;
  box-shadow: 0 -18px 38px rgba(14, 35, 72, .28);
}

.ksjb-support-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(100, 151, 221, .18);
  background: #fff;
}

.ksjb-support-head strong {
  display: block;
  color: #13213a;
  font-size: 16px;
  font-weight: 950;
}

.ksjb-support-head span {
  color: #71829b;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-support-head button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(102, 151, 220, .22);
  border-radius: 8px;
  color: #315fbd;
  background: #f7fbff;
  font-size: 20px;
  font-weight: 900;
}

.ksjb-support-messages {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 260px;
  padding: 12px;
  overflow-y: auto;
}

.ksjb-support-msg {
  display: flex;
  margin: 0;
}

.ksjb-support-msg.is-mine {
  justify-content: flex-end;
}

.ksjb-support-msg span,
.ksjb-support-empty {
  max-width: 78%;
  border-radius: 8px;
  padding: 9px 11px;
  color: #24334d;
  background: #fff;
  box-shadow: 0 8px 18px rgba(82, 120, 176, .12);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.ksjb-support-msg.is-mine span {
  color: #fff;
  background: linear-gradient(180deg, #ff3c62, #ec1d34);
}

.ksjb-support-empty {
  align-self: center;
  color: #71829b;
  text-align: center;
}

.ksjb-support-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(100, 151, 221, .18);
  background: #fff;
  touch-action: manipulation;
}

.ksjb-support-form input {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(102, 151, 220, .24);
  border-radius: 8px;
  padding: 0 12px;
  color: #14223a;
  background: #f7fbff;
  font-size: 16px;
  line-height: 20px;
  outline: none;
  -webkit-text-size-adjust: 100%;
}

.ksjb-support-form button {
  height: 42px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #ff3c62, #ec1d34);
  font-size: 16px;
  line-height: 20px;
  font-weight: 950;
  touch-action: manipulation;
}

.ksjb-support-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  min-height: 320px;
  padding: 22px 18px;
  text-align: center;
}

.ksjb-support-state b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #15d7ee, #0b83f5);
}

.ksjb-support-state strong {
  color: #14223a;
  font-size: 16px;
  font-weight: 950;
}

.ksjb-support-state span {
  color: #71829b;
  font-size: 13px;
  line-height: 1.55;
}

.ksjb-sub-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px 16px;
  border-radius: 8px;
  text-align: center;
}

.ksjb-sub-state > b,
.ksjb-mini-spinner {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.ksjb-sub-state > b {
  color: #fff;
  background: linear-gradient(180deg, #ff8a7e, #ef4454);
}

.ksjb-sub-state.is-error > b {
  background: linear-gradient(180deg, #2f3b52, #111827);
}

.ksjb-sub-state svg {
  width: 22px;
  height: 22px;
}

.ksjb-sub-state strong {
  color: #172238;
  font-size: 15px;
  font-weight: 950;
}

.ksjb-sub-state span {
  color: #73829a;
  font-size: 13px;
  line-height: 1.55;
}

.ksjb-mini-spinner {
  border: 2px solid rgba(239, 68, 84, .16);
  border-top-color: #ef4454;
  animation: ksjb-spin .78s linear infinite;
}

.ksjb-inline-alert {
  border: 1px solid rgba(239, 68, 84, .22);
  border-radius: 8px;
  padding: 9px 11px;
  color: #b72d3e;
  background: rgba(255, 245, 246, .92);
  font-size: 12px;
  font-weight: 800;
}

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

.ksjb-follow-card,
.ksjb-follow-match,
.ksjb-favorite-card,
.ksjb-activity-card,
.ksjb-notice-item,
.ksjb-coupon-card {
  display: grid;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(139, 177, 228, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(82, 120, 176, .12);
}

.ksjb-follow-card {
  grid-template-columns: 46px minmax(0, 1fr) 58px;
  padding: 12px;
}

.ksjb-follow-card div,
.ksjb-favorite-card div,
.ksjb-activity-card div,
.ksjb-notice-item div,
.ksjb-coupon-card div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ksjb-follow-card strong,
.ksjb-favorite-card strong,
.ksjb-activity-card strong,
.ksjb-notice-item strong,
.ksjb-coupon-card strong,
.ksjb-follow-match strong {
  overflow: hidden;
  color: #172238;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-follow-card em,
.ksjb-follow-card small,
.ksjb-favorite-card span,
.ksjb-favorite-card small,
.ksjb-activity-card span,
.ksjb-activity-card small,
.ksjb-notice-item span,
.ksjb-coupon-card span,
.ksjb-coupon-card small {
  overflow: hidden;
  color: #77869d;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-follow-card button,
.ksjb-follow-match button,
.ksjb-favorite-card button,
.ksjb-activity-card button,
.ksjb-coupon-card button {
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #ff7d72, #ef4454);
  font-size: 12px;
  font-weight: 950;
}

.ksjb-follow-match {
  padding: 12px;
}

.ksjb-follow-match header,
.ksjb-follow-match div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ksjb-follow-match header span {
  color: #4e8df8;
  font-size: 12px;
  font-weight: 950;
}

.ksjb-follow-match div {
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  text-align: center;
}

.ksjb-follow-match div b {
  overflow: hidden;
  color: #233048;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-follow-match div em {
  color: #ef4454;
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-favorite-card {
  grid-template-columns: 88px minmax(0, 1fr) 48px;
  padding: 10px;
}

.ksjb-activity-card {
  grid-template-columns: 96px minmax(0, 1fr) 52px;
  padding: 10px;
}

.ksjb-favorite-card img,
.ksjb-activity-card img {
  width: 88px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  object-fit: cover;
  background: #eaf2ff;
}

.ksjb-activity-card img {
  width: 96px;
}

.ksjb-notice-item {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  padding: 12px;
}

.ksjb-notice-item > b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #4b86f4;
  background: #eef5ff;
}

.ksjb-notice-item > b.is-unread {
  color: #fff;
  background: linear-gradient(180deg, #ff9b83, #ef4454);
}

.ksjb-notice-item svg {
  width: 21px;
  height: 21px;
}

.ksjb-notice-item strong i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #ef4454;
}

.ksjb-notice-item em {
  color: #8e9bb0;
  font-style: normal;
  font-size: 24px;
}

.ksjb-text-action {
  justify-self: end;
  height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  color: #4b86f4;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 950;
}

.ksjb-sub-menu {
  display: grid;
}

.ksjb-sub-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  color: inherit;
  background: transparent;
  text-align: left;
}

.ksjb-sub-menu button:last-child {
  border-bottom: 0;
}

.ksjb-sub-menu span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ksjb-sub-menu small {
  overflow: hidden;
  color: #8492a9;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-sub-menu em {
  color: #8e9bb0;
  font-size: 24px;
  font-style: normal;
}

.ksjb-help-list {
  display: grid;
  gap: 8px;
}

.ksjb-help-list details {
  border-bottom: 1px solid #edf1f7;
  padding-bottom: 8px;
}

.ksjb-help-list details:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ksjb-help-list summary {
  color: #172238;
  font-size: 15px;
  font-weight: 950;
}

.ksjb-help-list p {
  margin: 8px 0 0;
  color: #73829a;
  font-size: 13px;
  line-height: 1.55;
}

.ksjb-recharge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ksjb-recharge-grid button {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border: 1px solid rgba(78, 141, 248, .24);
  border-radius: 8px;
  color: #315fbd;
  background: linear-gradient(180deg, #f9fcff, #eef5ff);
  font-weight: 950;
}

.ksjb-recharge-grid span {
  color: #76859b;
  font-size: 12px;
}

.ksjb-wallet-records {
  display: grid;
  gap: 6px;
}

.ksjb-coupon-card {
  grid-template-columns: 70px minmax(0, 1fr) 58px;
  padding: 12px;
  overflow: hidden;
}

.ksjb-coupon-card > b {
  color: #fff;
  border-radius: 8px;
  padding: 16px 0;
  background: linear-gradient(180deg, #76aaff, #4b86f4);
  text-align: center;
  font-size: 22px;
}

.ksjb-user-badge {
  flex: 0 0 auto;
}

.ksjb-chat-msg b .ksjb-user-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  border-radius: 999px;
  padding: 0 6px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-chat-msg b .ksjb-user-badge.is-guest {
  color: #66809f;
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px rgba(105, 143, 192, .22);
}

.ksjb-chat-msg b .ksjb-user-badge.is-level {
  background: linear-gradient(180deg, #8dbbff, #4d8dff);
}

.ksjb-chat-msg b .ksjb-user-badge.is-anchor {
  background: linear-gradient(180deg, #ffc86f, #ff8b35);
}

.ksjb-chat-msg b .ksjb-user-badge.is-mod,
.ksjb-chat-msg b .ksjb-user-badge.is-system {
  background: linear-gradient(180deg, #7ee0d3, #33a7c7);
}

.ksjb-room-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(121, 160, 220, .16);
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.ksjb-room-admin strong {
  display: block;
  color: #24466f;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-room-admin span {
  display: block;
  margin-top: 2px;
  color: #71839d;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-room-admin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
}

.ksjb-room-admin-form input {
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(124, 159, 210, .28);
  border-radius: 999px;
  padding: 0 12px;
  color: #243247;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ksjb-room-admin-form button,
.ksjb-chat-actions button {
  height: 30px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #78aaff, #4a86f4);
  font-size: 12px;
  font-weight: 950;
}

.ksjb-chat-actions {
  grid-column: 2;
  display: inline-flex;
  gap: 6px;
  margin-top: 3px;
  font-style: normal;
}

.ksjb-chat-actions button {
  height: 24px;
  padding: 0 9px;
  background: #edf4ff;
  color: #4f7fcb;
}

.ksjb-chat-actions button:first-child {
  color: #ef4454;
  background: #fff0f2;
}

.ksjb-anchor-ops-panel {
  display: grid;
  gap: 12px;
}

.ksjb-anchor-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ksjb-anchor-metric-grid div {
  min-width: 0;
  padding: 10px 8px;
  border-radius: 8px;
  background: #f6f9ff;
}

.ksjb-anchor-metric-grid span,
.ksjb-anchor-mini-list span {
  display: block;
  overflow: hidden;
  color: #77869d;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-anchor-metric-grid strong {
  display: block;
  margin-top: 4px;
  color: #172238;
  font-size: 18px;
  font-weight: 950;
}

.ksjb-anchor-mini-list {
  display: grid;
  gap: 5px;
  padding-top: 2px;
}

.ksjb-anchor-mini-list strong {
  color: #172238;
  font-size: 14px;
  font-weight: 950;
}

@media (max-width: 374px) {
  .ksjb-top-links {
    padding: 0 10px;
  }

  .ksjb-top-links button {
    font-size: 13px;
  }

  .ksjb-reserve-strip {
    margin-right: -10px;
    margin-left: -10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .ksjb-reserve-card {
    flex-basis: 102px;
  }

  .ksjb-score-match-card {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 30px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .ksjb-score-match-card .ksjb-score-team {
    font-size: 13px;
  }

  .ksjb-team-logo.is-score {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .ksjb-room-tabs-wide {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 64px;
  }

  .ksjb-room-tabs-wide button,
  .ksjb-follow-wide {
    font-size: 13px;
  }
}

/* Final protected overrides from b602e6f after operations styles. */
.ksjb-mobile-lock {
  overscroll-behavior-y: none;
}

body.ksjb-mobile-lock {
  overflow: hidden;
  overscroll-behavior: none;
}

.ksjb-mobile-spa-root,
.ksjb-mobile-shell {
  overscroll-behavior-y: none;
}

.ksjb-mobile-topbar {
  position: relative;
  z-index: 45;
}

.ksjb-mobile-main {
  overscroll-behavior-y: contain;
}

.ksjb-player-controls {
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
}

.ksjb-player-controls .ksjb-player-landscape-btn {
  display: none;
  grid-template-columns: 18px auto;
  gap: 4px;
  width: auto;
  min-width: 56px;
  padding: 0 8px;
  color: #10151f;
  background: linear-gradient(135deg, #d8ecff, #72adff);
}

.ksjb-site-player:fullscreen .ksjb-player-landscape-btn,
.ksjb-site-player.is-web-fullscreen .ksjb-player-landscape-btn {
  display: inline-grid;
}

.ksjb-site-player.is-landscape-animating::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, #172033 0 20%, transparent 21%),
    radial-gradient(circle at 26% 26%, #172033 0 12%, transparent 13%),
    radial-gradient(circle at 74% 26%, #172033 0 12%, transparent 13%),
    radial-gradient(circle at 27% 76%, #172033 0 12%, transparent 13%),
    radial-gradient(circle at 74% 76%, #172033 0 12%, transparent 13%),
    #fff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
  transform: translate(-50%, -50%) rotate(0deg) scale(.84);
  animation: ksjbLandscapeBall .78s cubic-bezier(.2, .82, .22, 1) both;
  pointer-events: none;
}

.ksjb-site-player.is-landscape-animating::after {
  content: "正在切换横屏";
  position: absolute;
  left: 50%;
  top: calc(50% + 64px);
  z-index: 12;
  border-radius: 999px;
  padding: 7px 14px;
  color: #fff;
  background: rgba(5, 10, 20, .62);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: ksjbLandscapeText .78s ease both;
  pointer-events: none;
}

/* 20260605-chat-ui1: IM-style group chat layout */
.ksjb-changliao-page {
  gap: 14px;
  min-height: calc(100dvh - 88px);
  padding: 10px 16px 92px;
  background: #fff;
}

.ksjb-changliao-page.is-home {
  gap: 14px;
  padding: 18px 18px 92px;
  align-content: start;
  grid-auto-rows: max-content;
  background: #fff;
}

.ksjb-changliao-page.is-chat {
  min-height: calc(100dvh - 88px);
  padding-bottom: 18px;
  background: #f7f7f7;
}

.ksjb-changliao-head {
  min-height: 52px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.ksjb-changliao-head strong {
  color: #111827;
  font-size: 24px;
  letter-spacing: 0;
}

.ksjb-changliao-page.is-chat .ksjb-changliao-head strong {
  font-size: 18px;
}

.ksjb-changliao-head button {
  width: 40px;
  height: 40px;
  border-radius: 0;
  color: #111827;
  background: transparent;
  box-shadow: none;
}

.ksjb-changliao-back {
  font-size: 34px;
}

.ksjb-changliao-mini {
  color: #111827;
  font-size: 22px;
  font-weight: 900;
}

.ksjb-changliao-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin: 0;
}

.ksjb-changliao-tabs {
  display: flex;
  gap: 24px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.ksjb-changliao-tabs button {
  position: relative;
  width: auto;
  height: 38px;
  padding: 0;
  border-radius: 0;
  color: #8a8f99;
  background: transparent;
  font-size: 21px;
  font-weight: 900;
}

.ksjb-changliao-tabs button.is-active {
  color: #111827;
  background: transparent;
}

.ksjb-changliao-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 1px;
  height: 4px;
  border-radius: 999px;
  background: #19df62;
}

.ksjb-changliao-home-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.ksjb-changliao-home-actions button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 38px;
  border: 0;
  padding: 0;
  color: #111827;
  background: transparent;
  box-shadow: none;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.ksjb-changliao-home-actions svg {
  width: 23px;
  height: 23px;
}

.ksjb-changliao-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 42px;
  border-radius: 16px;
  padding: 0 13px;
  color: #6b7280;
  background: #f5f6fa;
}

.ksjb-changliao-page.is-home .ksjb-changliao-search {
  margin: 0 0 8px;
}

.ksjb-changliao-page.is-home .ksjb-changliao-topbar,
.ksjb-changliao-page.is-home .ksjb-changliao-search,
.ksjb-changliao-page.is-home .ksjb-changliao-list {
  align-self: start;
}

.ksjb-changliao-page.is-home .ksjb-changliao-list {
  align-content: start;
  grid-auto-rows: max-content;
}

.ksjb-changliao-page.is-home .ksjb-changliao-row {
  align-self: start;
  height: auto;
}

.ksjb-changliao-search > i {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.ksjb-changliao-search > i::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid #7b8494;
  border-radius: 999px;
}

.ksjb-changliao-search > i::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #7b8494;
  transform: rotate(45deg);
  transform-origin: center;
}

.ksjb-changliao-search input {
  min-width: 0;
  border: 0;
  color: #111827;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.ksjb-changliao-search input::placeholder {
  color: #a1a8b3;
}

.ksjb-changliao-actions,
.ksjb-changliao-card,
.ksjb-changliao-session-meta,
.ksjb-changliao-admin {
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.ksjb-changliao-actions {
  border: 1px solid #edf0f5;
}

.ksjb-changliao-list {
  gap: 0;
  border-radius: 0;
  background: #fff;
}

.ksjb-changliao-feature-list {
  margin-bottom: 10px;
  border-radius: 16px;
  overflow: hidden;
}

.ksjb-changliao-row,
.ksjb-changliao-group {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.ksjb-changliao-row {
  grid-template-columns: 56px minmax(0, 1fr) 48px;
  min-height: 74px;
  padding: 11px 0;
  border-bottom: 1px solid #f0f1f4;
}

.ksjb-changliao-row:last-child {
  border-bottom: 0;
}

.ksjb-changliao-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: #111827;
  background: #eef3fb;
  box-shadow: none;
  overflow: hidden;
}

.ksjb-changliao-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ksjb-changliao-avatar.guest img,
.ksjb-private-msg-avatar img,
.ksjb-guest-hero .ksjb-me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ksjb-changliao-avatar em {
  color: #6b7280;
  font-size: 18px;
  font-style: normal;
  font-weight: 950;
}

.ksjb-changliao-avatar.is-green {
  color: #fff;
  background: #26ee66;
}

.ksjb-changliao-avatar.is-blue,
.ksjb-changliao-avatar.group {
  color: #fff;
  background: #69c9ff;
}

.ksjb-changliao-avatar.support {
  color: #fff;
  background:
    radial-gradient(circle at 50% 22%, #fff 0 12%, transparent 13%),
    linear-gradient(145deg, #69ee55 0 46%, #f7f8fa 47% 100%);
}

.ksjb-changliao-avatar.support svg {
  display: none;
}

.ksjb-changliao-avatar.private_anchor,
.ksjb-changliao-avatar.friend {
  color: #111827;
  background:
    radial-gradient(circle at 50% 33%, #ffe3d0 0 22%, transparent 23%),
    radial-gradient(circle at 50% 80%, #f5c0a3 0 28%, transparent 29%),
    linear-gradient(145deg, #263449, #111827);
}

.ksjb-changliao-row strong,
.ksjb-changliao-group strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.ksjb-changliao-row em,
.ksjb-changliao-group em {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 700;
}

.ksjb-changliao-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  place-items: center;
  min-width: 28px;
  height: 18px;
  border-radius: 999px;
  padding: 0 7px;
  color: #fff;
  background: linear-gradient(180deg, #45a3ff, #1677ff);
  box-shadow: 0 2px 5px rgba(22, 119, 255, .18);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 18px;
  white-space: nowrap;
  transform: translateY(0);
}

.ksjb-changliao-badge.is-official {
  background: linear-gradient(180deg, #45a3ff, #1677ff);
}

.ksjb-changliao-row .ksjb-changliao-badge,
.ksjb-changliao-group .ksjb-changliao-badge {
  margin-top: 0;
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  line-height: 18px;
}

.ksjb-changliao-row i {
  min-width: 22px;
  height: 22px;
  color: #fff;
  background: #ff4b5f;
}

.ksjb-changliao-row small {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 800;
}

.ksjb-changliao-alpha {
  margin: 6px 0 2px;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.ksjb-changliao-refreshing {
  justify-self: start;
  color: #9ca3af;
  background: transparent;
}

.ksjb-changliao-empty {
  min-height: 240px;
  color: #9ca3af;
  background: #fff;
}

.ksjb-changliao-page.is-chat .ksjb-changliao-empty {
  min-height: 180px;
  background: transparent;
}

.ksjb-changliao-session-status {
  display: grid;
  place-items: center;
  min-height: 20px;
  color: #1677ff;
  font-size: 13px;
  font-weight: 800;
}

.ksjb-changliao-session-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ksjb-changliao-session-status i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #19df62;
}

.ksjb-changliao-messages {
  gap: 13px;
  min-height: 0;
  border-radius: 0;
  padding: 8px 6px 14px;
  background: #f7f7f7;
}

.ksjb-changliao-page.is-chat .ksjb-changliao-messages {
  flex: 1 1 auto;
}

.ksjb-changliao-messages p {
  gap: 3px;
}

.ksjb-changliao-messages p.is-mine {
  position: relative;
}

.ksjb-changliao-messages b {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
}

.ksjb-changliao-messages span {
  max-width: 78%;
  border-radius: 6px;
  padding: 9px 12px;
  color: #111827;
  background: #ececec;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.45;
}

.ksjb-changliao-messages .is-mine span {
  color: #fff;
  background: #0b8cff;
}

.ksjb-changliao-receipt {
  display: inline-block;
  margin-top: -2px;
  margin-right: 6px;
  color: #1f8cff;
  background: transparent;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: -2px;
  line-height: 1;
}

.ksjb-changliao-receipt.is-sent {
  opacity: .75;
}

.ksjb-changliao-receipt.is-read {
  opacity: 1;
}

.ksjb-changliao-send {
  position: sticky;
  bottom: calc(70px + env(safe-area-inset-bottom));
  grid-template-columns: 34px minmax(0, 1fr) 34px 42px;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.ksjb-changliao-page.is-chat .ksjb-changliao-send {
  position: static;
  margin: 0 -16px -18px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.ksjb-changliao-send input {
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  line-height: 20px;
}

.ksjb-room-input input,
.ksjb-support-modal input,
.ksjb-support-modal textarea {
  font-size: 16px;
}

.ksjb-changliao-session-mode .ksjb-mobile-tabbar {
  display: none;
}

.ksjb-mobile-spa-root.ksjb-changliao-session-mode {
  top: var(--ksjb-visual-offset-top, 0);
  bottom: auto;
  height: var(--ksjb-app-height, 100vh);
}

.ksjb-changliao-session-mode .ksjb-mobile-shell,
.ksjb-changliao-session-mode .ksjb-mobile-main {
  height: var(--ksjb-app-height, 100vh);
  max-height: var(--ksjb-app-height, 100vh);
}

.ksjb-changliao-session-mode .ksjb-mobile-main {
  padding: 0;
  overflow: hidden;
}

.ksjb-changliao-session-mode .ksjb-changliao-page.is-chat {
  box-sizing: border-box;
  height: calc(var(--ksjb-app-height, 100vh) - 12px);
  min-height: 0;
  padding: 8px 16px 0;
  overflow: hidden;
}

.ksjb-changliao-session-mode .ksjb-changliao-page.is-chat .ksjb-changliao-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.ksjb-changliao-session-mode .ksjb-changliao-page.is-chat .ksjb-changliao-send {
  flex: 0 0 auto;
  margin: 0 -16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.ksjb-changliao-send button {
  width: 42px;
  height: 36px;
  color: #fff;
  background: #0b8cff;
}

.ksjb-changliao-send .ksjb-chat-tool {
  width: 34px;
  color: #111827;
  background: transparent;
  font-size: 22px;
  font-weight: 800;
}

.ksjb-changliao-send .ksjb-chat-tool svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.ksjb-changliao-send .ksjb-chat-tool.is-active {
  color: #0b8cff;
  background: #eef6ff;
}

.ksjb-changliao-emoji-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 2px 2px;
  border-top: 1px solid #edf2f7;
}

.ksjb-changliao-emoji-panel button {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 8px;
  color: #111827;
  background: #f8fafc;
  font-size: 20px;
}

.ksjb-changliao-detail {
  gap: 14px;
  min-height: calc(100dvh - 150px);
  background: #f7f7f7;
}

.ksjb-changliao-profile-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 14px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.ksjb-changliao-profile-card .ksjb-changliao-avatar.is-large {
  width: 86px;
  height: 86px;
}

.ksjb-changliao-profile-card .ksjb-changliao-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a8f99;
  font-size: 14px;
  font-weight: 800;
}

.ksjb-changliao-profile-card .ksjb-changliao-online i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #19df62;
}

.ksjb-changliao-profile-card strong {
  color: #111827;
  font-size: 22px;
  font-weight: 950;
}

.ksjb-changliao-profile-card em,
.ksjb-changliao-profile-card p {
  margin: 0;
  color: #8a8f99;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.ksjb-changliao-profile-card button {
  width: min(100%, 310px);
  height: 54px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #09d84f;
  font-size: 17px;
  font-weight: 900;
}

.ksjb-changliao-settings-list {
  display: grid;
  gap: 12px;
}

.ksjb-changliao-settings-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  color: #111827;
  background: #fff;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
}

.ksjb-changliao-settings-list em {
  color: #c0c4cc;
  font-style: normal;
}

.ksjb-changliao-settings-list i {
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: #e5e5e5;
}

/* 20260608 KSJB live-room pro UI: video-first blue sports room. */
.ksjb-room-mode {
  --live-primary: #1677ff;
  --live-primary-light: #68b6ff;
  --live-primary-dark: #0b5eea;
  --live-bg: #f5f9ff;
  --live-card: rgba(255, 255, 255, .88);
  --live-text: #1f2d3d;
  --live-text-secondary: #6b7280;
  --live-border: rgba(80, 150, 255, .18);
  --live-orange: #ff8a00;
  --live-radius-card: 16px;
  --live-radius-lg: 22px;
  --live-radius-pill: 999px;
  --live-shadow: 0 8px 24px rgba(40, 115, 220, .12);
}

.ksjb-mobile-spa-root.ksjb-room-mode {
  inset: 0;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow-x: hidden;
}

.ksjb-room-mode .ksjb-mobile-shell {
  width: min(100vw, 430px);
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
  background: #f5f9ff url("/static/images/live-room/live-page-bg.webp?v=20260608-live-room-ui106-pinned-readability") top center / 100% auto no-repeat;
}

.ksjb-room-mode .ksjb-mobile-main {
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
}

.ksjb-room-page {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 14px 12px calc(78px + env(safe-area-inset-bottom));
  color: var(--live-text);
}

.ksjb-live-room-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(74px, auto) 24px;
  gap: 8px;
  align-items: center;
  min-height: 76px;
  max-width: 100%;
  overflow: hidden;
}

.ksjb-live-anchor-avatar,
.ksjb-live-anchor-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.ksjb-live-anchor-avatar {
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(22, 119, 255, .18);
}

.ksjb-live-anchor-info {
  min-width: 0;
}

.ksjb-live-anchor-info strong,
.ksjb-live-anchor-info span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-live-anchor-info strong {
  color: #111827;
  font-size: 20px;
  font-weight: 950;
}

.ksjb-live-anchor-info span {
  margin-top: 3px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 800;
}

.ksjb-live-follow {
  height: 40px;
  min-width: 74px;
  border: 0;
  border-radius: var(--live-radius-pill);
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--live-primary-light), var(--live-primary));
  box-shadow: 0 10px 20px rgba(22, 119, 255, .22);
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
}

.ksjb-live-follow.is-followed {
  color: var(--live-primary);
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, .18);
}

.ksjb-live-online {
  display: none;
  place-items: center;
  min-width: 62px;
  height: 54px;
  border-radius: var(--live-radius-pill);
  color: #17243d;
  background: rgba(235, 243, 255, .94);
  font-size: 17px;
  font-weight: 950;
}

.ksjb-live-online small {
  display: block;
  color: #50617c;
  font-size: 12px;
  line-height: 1;
}

.ksjb-live-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  flex: 0 0 auto;
}

.ksjb-live-quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.ksjb-live-quick-actions button {
  display: inline-grid;
  grid-template-columns: 22px minmax(0, auto) auto 14px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 34px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-pill);
  min-width: 0;
  padding: 0 9px;
  color: #1b3760;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--live-shadow);
  backdrop-filter: blur(12px);
  font-size: 14px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ksjb-live-quick-actions button span,
.ksjb-live-quick-actions button b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-live-quick-actions button:active,
.ksjb-room-tabs-wide button:active,
.ksjb-live-icon-btn:active,
.ksjb-live-send-btn:active {
  transform: scale(.97);
}

.ksjb-live-quick-actions b {
  color: #111827;
  font-weight: 950;
}

.ksjb-room-player.ksjb-live-player-card {
  position: relative;
  width: 100%;
  height: 195px;
  min-height: 195px;
  margin: 0;
  border: 0;
  border-radius: var(--live-radius-card);
  overflow: hidden;
  background: #eaf4ff url("/static/images/live-room/live-football-banner-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / cover no-repeat;
  box-shadow: 0 14px 30px rgba(20, 80, 160, .16);
}

.ksjb-live-player-card .ksjb-live-player-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/static/images/live-room/stadium-light-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / cover no-repeat;
}

.ksjb-live-player-card .ksjb-live-player-art img {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 130px;
  height: 130px;
  transform: translateX(-50%);
}

.ksjb-live-player-card video,
.ksjb-live-player-card .ksjb-aliplayer-container,
.ksjb-live-player-card .ksjb-player-poster,
.ksjb-live-player-card .prism-player {
  position: absolute;
  z-index: 1;
}

.ksjb-live-player-card .ksjb-player-shade,
.ksjb-live-player-card .ksjb-player-top,
.ksjb-live-player-card .ksjb-player-loading,
.ksjb-live-player-card .ksjb-danmaku-layer,
.ksjb-live-player-card .ksjb-player-center-actions,
.ksjb-live-player-card .ksjb-player-status,
.ksjb-live-player-card .ksjb-ali-controls,
.ksjb-live-player-card .ksjb-player-controls,
.ksjb-live-player-card .ksjb-ali-unmute {
  z-index: 3;
}

.ksjb-live-player-card .ksjb-player-top {
  top: auto;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.ksjb-live-player-card .ksjb-room-live,
.ksjb-live-player-card .ksjb-player-match,
.ksjb-live-player-card .ksjb-player-heat {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 30px;
  border-radius: var(--live-radius-pill);
  padding: 0 11px;
  color: #fff;
  background: rgba(0, 0, 0, .52);
  font-size: 13px;
  font-weight: 950;
  backdrop-filter: blur(10px);
}

.ksjb-live-player-card .ksjb-room-live img {
  width: 10px;
  height: 10px;
  margin-right: 6px;
}

.ksjb-live-player-card .ksjb-player-match {
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-live-player-card .ksjb-ali-controls {
  right: 10px;
  bottom: 48px;
  left: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(4, 13, 30, .06), rgba(4, 13, 30, .78));
}

.ksjb-room-tabs-wide {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  border: 0;
  border-radius: var(--live-radius-card);
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--live-shadow);
  scrollbar-width: none;
}

.ksjb-room-tabs-wide::-webkit-scrollbar {
  display: none;
}

.ksjb-room-tabs-wide button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  color: #263447;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 950;
  transition: color .18s ease, background .18s ease;
}

.ksjb-room-tabs-wide button.is-active {
  color: var(--live-primary);
  background: transparent;
  box-shadow: none;
}

.ksjb-room-tabs-wide button.is-active::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 5px;
  left: 20px;
  height: 3px;
  border-radius: var(--live-radius-pill);
  background: var(--live-primary);
}

.ksjb-room-panel {
  min-height: clamp(300px, 46dvh, 430px);
  border: 0;
  border-radius: var(--live-radius-card);
  overflow: hidden;
  background: rgba(247, 251, 255, .78);
  box-shadow: var(--live-shadow);
}

.ksjb-live-notice {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  margin: 0;
  border: 1px solid rgba(112, 171, 255, .18);
  border-radius: 14px;
  padding: 0 8px;
  color: var(--live-primary);
  background: rgba(230, 242, 255, .96);
  font-size: 12px;
  font-weight: 900;
}

.ksjb-live-notice span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.ksjb-live-notice img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ksjb-live-promo {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  margin: 10px 0;
  border-radius: var(--live-radius-card);
  padding: 8px 10px;
  color: #fff;
  background: #ff8a00 url("/static/images/live-room/promo-banner-orange-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / cover no-repeat;
  box-shadow: 0 14px 28px rgba(255, 128, 0, .22);
}

.ksjb-live-promo-gift {
  width: 54px;
  height: 54px;
}

.ksjb-live-promo strong,
.ksjb-live-promo span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-live-promo strong {
  font-size: 17px;
  font-weight: 950;
}

.ksjb-live-promo span {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 850;
}

.ksjb-live-promo button {
  min-width: 78px;
  height: 36px;
  border: 0;
  border-radius: var(--live-radius-pill);
  color: #f06d00;
  background: #fff url("/static/images/live-room/button-white-claim-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / 100% 100% no-repeat;
  font-size: 14px;
  font-weight: 950;
}

.ksjb-live-chat-card {
  gap: 10px;
  max-height: min(420px, calc(100dvh - 456px));
  min-height: 230px;
  padding: 12px;
  background: rgba(244, 249, 255, .82) url("/static/images/live-room/chat-area-bg.webp?v=20260608-live-room-ui106-pinned-readability") top center / cover no-repeat;
}

.ksjb-live-chat-msg {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.ksjb-live-chat-msg.mine {
  justify-self: stretch;
  background: transparent;
}

.ksjb-live-chat-avatar {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.ksjb-live-chat-avatar img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.ksjb-live-chat-msg b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--live-primary);
  font-size: 13px;
  font-weight: 950;
}

.ksjb-live-chat-msg > span {
  justify-self: start;
  max-width: 100%;
  border-radius: 12px;
  padding: 8px 12px;
  color: #263447;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 14px rgba(56, 112, 190, .08);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.45;
}

.ksjb-live-official-card,
.ksjb-live-system-card {
  position: relative;
  display: grid;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(80, 150, 255, .2);
  border-radius: 14px;
  padding: 7px 8px;
  background: rgba(242, 248, 255, .96) center / cover no-repeat;
}

.ksjb-live-official-card {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  background-image: url("/static/images/live-room/official-card-deco-bg.webp?v=20260608-live-room-ui106-pinned-readability");
}

.ksjb-live-official-card .ksjb-live-card-deco {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  opacity: .48;
  pointer-events: none;
}

.ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  background-image: url("/static/images/live-room/system-card-deco-bg.webp?v=20260608-live-room-ui106-pinned-readability");
}

.ksjb-live-official-card i,
.ksjb-live-official-card i img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.ksjb-live-official-card div,
.ksjb-live-system-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ksjb-live-official-card strong,
.ksjb-live-system-card b {
  color: var(--live-primary);
  font-size: 13px;
  font-weight: 950;
}

.ksjb-live-official-card span,
.ksjb-live-system-card span {
  display: -webkit-box;
  overflow: hidden;
  color: #213047;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ksjb-live-card-deco {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.ksjb-live-room-input {
  left: 50%;
  right: auto;
  grid-template-columns: minmax(0, 1fr) 42px 42px 64px;
  width: min(100vw, 430px);
  max-width: 100vw;
  margin: 0;
  gap: 6px;
  border-top: 1px solid rgba(80, 150, 255, .16);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
}

.ksjb-room-mode .ksjb-live-room-input {
  transform: translateX(-50%);
}

.ksjb-live-room-input input {
  height: 44px;
  border: 1px solid rgba(80, 150, 255, .18);
  border-radius: var(--live-radius-pill);
  padding: 0 16px;
  color: var(--live-text);
  background: #fff url("/static/images/live-room/chat-input-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.ksjb-live-room-input button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #f4f8ff;
  box-shadow: 0 6px 16px rgba(70, 118, 188, .12);
}

.ksjb-live-room-input button img {
  width: 42px;
  height: 42px;
}

.ksjb-live-room-input .ksjb-live-send-btn {
  width: 64px;
  border-radius: var(--live-radius-pill);
  color: #fff;
  background: linear-gradient(135deg, #68b6ff, #1677ff), url("/static/images/live-room/button-send-blue-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / 100% 100% no-repeat;
  box-shadow: 0 10px 20px rgba(22, 119, 255, .2);
  font-size: 16px;
  font-weight: 950;
}

@media (max-width: 380px) {
  .ksjb-live-room-header {
    grid-template-columns: 52px minmax(0, 1fr) 68px 22px;
    gap: 7px;
  }

  .ksjb-live-anchor-avatar,
  .ksjb-live-anchor-avatar img {
    width: 52px;
    height: 52px;
  }

  .ksjb-live-follow {
    min-width: 68px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
  }

  .ksjb-live-close {
    width: 22px;
    height: 22px;
  }

  .ksjb-live-quick-actions {
    gap: 8px;
  }

  .ksjb-live-quick-actions button {
    grid-template-columns: 20px minmax(0, auto) 14px;
    gap: 5px;
    padding: 0 8px;
  }

  .ksjb-live-quick-actions button b {
    display: none;
  }

  .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 40px 40px 58px;
    gap: 5px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .ksjb-live-room-input button,
  .ksjb-live-room-input button img {
    width: 40px;
    height: 40px;
  }

  .ksjb-live-room-input .ksjb-live-send-btn {
    width: 58px;
    font-size: 14px;
  }

  .ksjb-live-chat-card {
    max-height: min(390px, calc(100dvh - 448px));
  }
}

/* 20260608 live-room-ui4: closer to the provided sports live-room mock. */
.ksjb-room-mode .ksjb-mobile-shell {
  background: #fff;
}

.ksjb-room-page {
  gap: 10px;
  padding: 18px 12px calc(76px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #fff 0, #fff 34%, #eef7ff 100%);
}

.ksjb-live-room-header {
  grid-template-columns: 52px minmax(0, 1fr) 82px 52px 22px;
  min-height: 66px;
  gap: 6px;
}

.ksjb-live-anchor-avatar,
.ksjb-live-anchor-avatar img {
  width: 52px;
  height: 52px;
}

.ksjb-live-anchor-avatar {
  grid-column: 1;
  border: 3px solid rgba(255, 255, 255, .95);
  box-shadow: 0 8px 22px rgba(22, 119, 255, .12);
}

.ksjb-live-anchor-info {
  grid-column: 2;
}

.ksjb-live-follow {
  grid-column: 3;
}

.ksjb-live-anchor-info strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
  font-size: 21px;
  line-height: 1.1;
}

.ksjb-live-anchor-info strong em {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 24px;
  border-radius: 9px;
  color: #1677ff;
  background: rgba(22, 119, 255, .12);
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
}

.ksjb-live-anchor-info span {
  margin-top: 6px;
  color: #65758e;
  font-size: 16px;
  font-weight: 850;
}

.ksjb-live-follow {
  min-width: 82px;
  height: 40px;
  padding: 0 12px;
  box-shadow: 0 10px 20px rgba(22, 119, 255, .24);
}

.ksjb-live-vips {
  grid-column: 4;
  display: flex;
  align-items: center;
  width: 58px;
  min-width: 0;
}

.ksjb-live-vips img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 6px 12px rgba(47, 92, 150, .12);
}

.ksjb-live-vips img + img {
  margin-left: -14px;
}

.ksjb-live-online {
  grid-column: 4;
  display: grid;
  min-width: 50px;
  height: 50px;
  padding-top: 4px;
  text-align: center;
  line-height: 1.05;
  background: #edf4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ksjb-live-close,
.ksjb-live-close img {
  grid-column: 5;
  width: 22px;
  height: 22px;
}

.ksjb-live-close img {
  width: 24px;
  height: 24px;
}

.ksjb-live-close {
  grid-column: 6;
}

.ksjb-live-quick-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 2px;
}

.ksjb-live-quick-actions button {
  height: 38px;
  background: rgba(248, 252, 255, .94);
  box-shadow: 0 8px 18px rgba(32, 101, 180, .08);
}

.ksjb-room-player.ksjb-live-player-card {
  height: 206px;
  min-height: 206px;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(25, 82, 155, .14);
}

.ksjb-live-player-card .ksjb-live-player-art {
  z-index: 2;
  opacity: .92;
}

.ksjb-live-player-card .ksjb-live-player-art img {
  right: auto;
  bottom: -11px;
  left: 50%;
  width: 154px;
  height: 154px;
  transform: translateX(-50%);
}

.ksjb-live-player-card .ksjb-player-shade {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, .04) 48%, rgba(5, 18, 42, .20) 100%),
    radial-gradient(circle at 50% 78%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 32%);
}

.ksjb-live-player-brand {
  position: absolute;
  z-index: 2;
  top: 27px;
  right: 0;
  left: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  pointer-events: none;
  color: rgba(12, 72, 150, .95);
  text-align: center;
  text-shadow: 0 2px 14px rgba(255, 255, 255, .72);
}

.ksjb-live-player-brand strong {
  font-size: 30px;
  font-weight: 950;
}

.ksjb-room-player .ksjb-live-player-logo {
  display: block;
  width: 156px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, .62));
}

.ksjb-live-player-brand span {
  font-size: 14px;
  font-weight: 850;
}

.ksjb-live-player-card .ksjb-player-top {
  bottom: 9px;
}

.ksjb-live-player-card .ksjb-ali-controls {
  right: 10px;
  bottom: 40px;
  left: 10px;
  border-radius: 22px;
  background: rgba(10, 25, 52, .42);
  box-shadow: 0 10px 24px rgba(5, 24, 62, .16);
  backdrop-filter: blur(14px);
}

.ksjb-live-player-card .ksjb-player-controls {
  bottom: 40px;
  border-radius: 22px;
  background: rgba(10, 25, 52, .42);
  box-shadow: 0 10px 24px rgba(5, 24, 62, .16);
  backdrop-filter: blur(14px);
}

.ksjb-room-tabs-wide {
  min-height: 50px;
  border-radius: 0;
  box-shadow: none;
}

.ksjb-room-tabs-wide button {
  min-width: 0;
  font-size: 16px;
}

.ksjb-room-tabs-wide button.is-active::after {
  right: 24px;
  bottom: 4px;
  left: 24px;
  height: 4px;
}

.ksjb-room-panel {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(239, 248, 255, .92), rgba(245, 250, 255, .96));
  box-shadow: none;
}

.ksjb-live-notice {
  min-height: 42px;
  margin: 0 0 10px;
  border: 0;
  border-radius: 14px;
  background: #eaf4ff;
}

.ksjb-live-promo {
  min-height: 54px;
  margin: 0 0 10px;
  border-radius: 14px;
  grid-template-columns: 46px minmax(0, 1fr) 76px;
  gap: 8px;
  padding: 6px 9px;
  box-shadow: 0 10px 20px rgba(255, 128, 0, .2);
}

.ksjb-live-promo-gift {
  width: 46px;
  height: 46px;
}

.ksjb-live-promo strong {
  font-size: 15px;
  line-height: 1.2;
}

.ksjb-live-promo span {
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.25;
}

.ksjb-live-promo button {
  min-width: 76px;
  height: 34px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-room-admin {
  display: none;
}

.ksjb-live-chat-card {
  max-height: min(510px, calc(100dvh - 448px));
  min-height: 300px;
  border-radius: 16px;
  padding: 12px 12px 18px;
}

.ksjb-live-chat-msg b {
  color: #1677ff;
}

.ksjb-live-flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.ksjb-live-chat-msg > span {
  color: #1f2d3d;
  background: rgba(255, 255, 255, .94);
}

.ksjb-live-official-card,
.ksjb-live-system-card {
  border-radius: 14px;
  background-color: rgba(237, 247, 255, .96);
  box-shadow: inset 0 0 0 1px rgba(80, 150, 255, .1);
}

.ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 40px 40px 66px;
  gap: 6px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.ksjb-live-room-input button,
.ksjb-live-room-input button img {
  width: 40px;
  height: 40px;
}

.ksjb-live-room-input .ksjb-live-send-btn {
  width: 66px;
  height: 40px;
}

.ksjb-live-room-input input {
  height: 40px;
  font-size: 16px;
}

@media (max-width: 420px) {
  .ksjb-live-room-header {
    grid-template-columns: 48px minmax(0, 1fr) 78px 46px 20px;
    gap: 5px;
  }

  .ksjb-live-anchor-avatar,
  .ksjb-live-anchor-avatar img {
    width: 48px;
    height: 48px;
  }

  .ksjb-live-anchor-info strong {
    font-size: 18px;
  }

  .ksjb-live-anchor-info strong em {
    min-width: 32px;
    height: 20px;
    font-size: 11px;
  }

  .ksjb-live-follow {
    min-width: 78px;
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
  }

  .ksjb-live-vips {
    width: 46px;
  }

  .ksjb-live-vips img {
    width: 28px;
    height: 28px;
  }

  .ksjb-live-vips img + img {
    margin-left: -15px;
  }

  .ksjb-live-online {
    min-width: 46px;
    height: 46px;
    font-size: 14px;
  }

  .ksjb-live-online small {
    font-size: 11px;
  }

  .ksjb-live-close,
  .ksjb-live-close img {
    width: 20px;
    height: 20px;
  }

  .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 38px 38px 62px;
    gap: 5px;
  }

  .ksjb-live-room-input button,
  .ksjb-live-room-input button img {
    width: 38px;
    height: 38px;
  }

  .ksjb-live-room-input .ksjb-live-send-btn {
    width: 62px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .ksjb-live-room-header {
    grid-template-columns: 46px minmax(0, 1fr) 74px 44px 20px;
  }

  .ksjb-live-anchor-avatar,
  .ksjb-live-anchor-avatar img {
    width: 46px;
    height: 46px;
  }

  .ksjb-live-vips {
    width: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .ksjb-live-anchor-info span {
    font-size: 12px;
  }

  .ksjb-live-follow {
    min-width: 74px;
  }

  .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 36px 36px 56px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .ksjb-live-room-input button,
  .ksjb-live-room-input button img {
    width: 36px;
    height: 36px;
  }

  .ksjb-live-room-input .ksjb-live-send-btn {
    width: 56px;
  }

  .ksjb-room-tabs-wide button {
    min-width: 0;
    font-size: 15px;
  }
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  border-radius: var(--live-radius-pill);
  color: #fff;
  background: linear-gradient(135deg, #68b6ff, #1677ff), url("/static/images/live-room/button-send-blue-bg.webp?v=20260608-live-room-ui106-pinned-readability") center / 100% 100% no-repeat;
  box-shadow: 0 10px 20px rgba(22, 119, 255, .2);
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-player .ksjb-room-live {
  font-size: 0;
  line-height: 0;
}

.ksjb-room-mode .ksjb-room-player .ksjb-room-live img,
.ksjb-room-mode .ksjb-room-player .ksjb-room-live i {
  margin-right: 0;
}

.ksjb-room-mode .ksjb-live-chat-msg .ksjb-chat-actions {
  display: none;
}

.ksjb-room-mode .ksjb-live-chat-card,
.ksjb-room-mode .ksjb-live-room-input {
  touch-action: manipulation;
}

.ksjb-room-mode .ksjb-live-chat-card {
  touch-action: pan-y;
}

.ksjb-room-mode .ksjb-live-room-input input {
  font-size: 16px;
  line-height: 20px;
}

.ksjb-room-mode .ksjb-room-panel {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

.ksjb-room-mode .ksjb-live-chat-card {
  min-height: 0;
  height: auto;
  max-height: var(--ksjb-room-chat-max, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 6px;
  scroll-padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ksjb-room-mode .ksjb-live-chat-card::-webkit-scrollbar {
  display: none;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  position: relative;
  overflow: hidden;
  color: #64748b;
  background: rgba(246, 250, 255, .96);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  opacity: 0;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.ksjb-room-mode .ksjb-live-room-input [data-action="toggle-room-emoji"]::before {
  content: "☺";
}

.ksjb-room-mode .ksjb-live-room-input [data-room-tab="private"]::before {
  content: "⋯";
  font-size: 26px;
}

.ksjb-live-player-card .ksjb-ali-controls,
.ksjb-live-player-card .ksjb-player-controls {
  min-height: 38px;
  height: 38px;
  right: 14px;
  bottom: 39px;
  left: 14px;
  gap: 8px;
  border-radius: 20px;
  padding: 5px 10px;
  background: rgba(8, 24, 50, .28);
  box-shadow: 0 8px 18px rgba(5, 24, 62, .12);
  backdrop-filter: blur(10px) saturate(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
}

.ksjb-live-player-card .ksjb-ali-controls button,
.ksjb-live-player-card .ksjb-player-controls button {
  width: 28px;
  height: 28px;
}

.ksjb-live-player-card .ksjb-ali-controls svg,
.ksjb-live-player-card .ksjb-player-controls svg {
  width: 18px;
  height: 18px;
}

.ksjb-live-player-card .ksjb-room-live,
.ksjb-live-player-card .ksjb-player-match,
.ksjb-live-player-card .ksjb-player-heat {
  height: 28px;
  background: rgba(8, 24, 50, .42);
  box-shadow: 0 6px 14px rgba(5, 24, 62, .12);
}

.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 56px minmax(0, 1fr) 84px 54px 36px;
  min-height: 76px;
  gap: 6px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 56px;
  height: 56px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  font-size: 21px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 5px;
  font-size: 14px;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 84px;
  height: 40px;
  font-size: 15px;
}

.ksjb-room-mode .ksjb-live-online {
  min-width: 54px;
  height: 50px;
  font-size: 15px;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  min-height: 34px;
}

.ksjb-room-mode .ksjb-live-quick-actions button {
  height: 34px;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(32, 101, 180, .08);
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  right: 16px;
  left: 16px;
}

.ksjb-room-mode .ksjb-live-close {
  grid-column: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(80, 150, 255, .16);
  border-radius: 50%;
  background: rgba(239, 246, 255, .94);
  box-shadow: 0 8px 18px rgba(32, 101, 180, .10);
}

.ksjb-room-mode .ksjb-live-close img {
  display: none;
}

.ksjb-room-mode .ksjb-live-close span {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after {
  position: absolute;
  top: 7px;
  left: 1px;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: #50627d;
  content: "";
}

.ksjb-room-mode .ksjb-live-close span::before {
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-close span::after {
  transform: rotate(-45deg);
}

@media (max-width: 420px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 52px minmax(0, 1fr) 80px 48px 34px;
    min-height: 72px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 52px;
    height: 52px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 20px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info span {
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 80px;
    height: 38px;
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 50px;
    height: 48px;
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-close {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 50px minmax(0, 1fr) 74px 44px 32px;
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 50px;
    height: 50px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 18px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 74px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 46px;
    height: 46px;
  }

  .ksjb-room-mode .ksjb-live-close {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button {
    grid-template-columns: 20px minmax(0, auto) auto 14px;
    gap: 4px;
    padding: 0 7px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button b {
    display: block;
  }
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 20260608 live-room-ui43: compact the area above the player and use a top-left back button. */
.ksjb-room-page {
  gap: 8px;
  padding-top: 8px;
}

.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 34px 42px minmax(0, 1fr) 68px 42px;
  gap: 6px;
  min-height: 52px;
}

.ksjb-room-mode .ksjb-live-close,
.ksjb-room-mode .ksjb-live-back {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(80, 150, 255, .16);
  border-radius: 50%;
  background: rgba(239, 246, 255, .94);
  box-shadow: 0 8px 18px rgba(32, 101, 180, .10);
}

.ksjb-room-mode .ksjb-live-close span,
.ksjb-room-mode .ksjb-live-back span {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after,
.ksjb-room-mode .ksjb-live-back span::before,
.ksjb-room-mode .ksjb-live-back span::after {
  position: absolute;
  left: 3px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: #50627d;
  content: "";
  transform-origin: 2px 1px;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-back span::before {
  top: 4px;
  transform: rotate(-45deg);
}

.ksjb-room-mode .ksjb-live-close span::after,
.ksjb-room-mode .ksjb-live-back span::after {
  top: 10px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  grid-column: 2;
  border-width: 2px;
  box-shadow: 0 6px 16px rgba(22, 119, 255, .12);
}

.ksjb-room-mode .ksjb-live-anchor-info {
  grid-column: 3;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  gap: 5px;
  font-size: 17px;
  line-height: 1.05;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  min-width: 32px;
  height: 20px;
  border-radius: 8px;
  font-size: 11px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 3px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-follow {
  grid-column: 4;
  min-width: 68px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-online {
  grid-column: 5;
  min-width: 42px;
  height: 36px;
  padding-top: 3px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-online small {
  font-size: 10px;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  min-height: 30px;
  margin-top: 0;
  gap: 8px;
}

.ksjb-room-mode .ksjb-live-quick-actions button {
  height: 30px;
  gap: 5px;
  padding: 0 8px;
  font-size: 13px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 32px 40px minmax(0, 1fr) 64px 38px;
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-close,
  .ksjb-room-mode .ksjb-live-back {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 16px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 64px;
    height: 30px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 38px;
    height: 34px;
    font-size: 12px;
  }
}

/* 20260608 live-room-ui44: make the tab strip visually continue from the preserved player. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  width: calc(100% + 24px);
  margin-right: -12px;
  margin-left: -12px;
  border-radius: 0;
  box-shadow: 0 6px 16px rgba(32, 101, 180, .08);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  min-height: 48px;
  font-size: 16px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    width: calc(100% + 20px);
    margin-right: -10px;
    margin-left: -10px;
  }
}

/* 20260608 live-room-ui45: tighten chat rhythm to match the reference live-room feed density. */
.ksjb-room-mode .ksjb-live-chat-msg {
  row-gap: 2px;
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 17px;
  font-size: 12px;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  border-radius: 11px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.35;
}

/* 20260608 live-room-ui46: keep the promo CTA text from inheriting subtitle styles. */
.ksjb-room-mode .ksjb-live-promo button {
  height: 36px;
  min-width: 80px;
  font-size: 14px;
}

.ksjb-room-mode .ksjb-live-promo button span {
  display: inline;
  margin-top: 0;
  overflow: visible;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

/* 20260608 live-room-ui47: make quick actions lightweight independent chips. */
.ksjb-room-mode .ksjb-live-quick-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ksjb-room-mode .ksjb-live-quick-actions button {
  flex: 0 0 auto;
  width: auto;
  min-width: 122px;
  padding: 0 10px;
  background: rgba(248, 252, 255, .88);
}

.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  min-width: 136px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-quick-actions button {
    min-width: 116px;
    padding: 0 8px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    min-width: 130px;
  }
}

/* 20260608 live-room-ui48: strengthen the pinned official and anchor marketing cards. */
.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  border-color: rgba(80, 150, 255, .24);
  box-shadow: inset 0 0 0 1px rgba(80, 150, 255, .08), 0 8px 18px rgba(40, 115, 220, .08);
}

.ksjb-room-mode .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-system-card b {
  font-size: 14px;
  line-height: 1.25;
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  font-size: 12px;
  line-height: 1.38;
}

/* 20260608 live-room-ui49: restore fuller app-like controls in the chat input bar. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 42px 42px 66px;
  gap: 6px;
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 42px;
}

.ksjb-room-mode .ksjb-live-room-input button,
.ksjb-room-mode .ksjb-live-room-input button img {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 66px;
  height: 42px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 40px 40px 60px;
    gap: 6px;
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input button,
  .ksjb-room-mode .ksjb-live-room-input button img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 60px;
    height: 40px;
  }
}

/* 20260608 live-room-ui50: reduce header footprint above the preserved player. */
.ksjb-room-page {
  gap: 6px;
  padding-top: 6px;
}

.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 32px 38px minmax(0, 1fr) 64px 40px;
  gap: 5px;
  min-height: 44px;
}

.ksjb-room-mode .ksjb-live-close,
.ksjb-room-mode .ksjb-live-back {
  width: 32px;
  height: 32px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  font-size: 16px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  min-width: 30px;
  height: 18px;
  font-size: 10px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 2px;
  font-size: 11px;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 64px;
  height: 30px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-online {
  min-width: 40px;
  height: 32px;
  padding-top: 2px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-online small {
  font-size: 9px;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  min-height: 26px;
  gap: 7px;
}

.ksjb-room-mode .ksjb-live-quick-actions button {
  height: 26px;
  min-width: 112px;
  padding: 0 8px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  min-width: 126px;
}

.ksjb-room-mode .ksjb-live-quick-actions img {
  width: 18px;
  height: 18px;
}

@media (max-width: 380px) {
  .ksjb-room-page {
    gap: 5px;
    padding-top: 5px;
  }

  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 30px 36px minmax(0, 1fr) 60px 38px;
    gap: 5px;
    min-height: 42px;
  }

  .ksjb-room-mode .ksjb-live-close,
  .ksjb-room-mode .ksjb-live-back {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 60px;
    height: 28px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 38px;
    height: 30px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button {
    min-width: 108px;
    height: 25px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    min-width: 120px;
  }
}

/* 20260608 live-room-ui50: clarify compact chat identity badges. */
.ksjb-room-mode .ksjb-live-chat-msg b {
  gap: 6px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  display: inline-grid;
  place-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-guest {
  color: #1677ff;
  background: linear-gradient(135deg, rgba(232, 243, 255, .98), rgba(209, 231, 255, .98));
  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, .16);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-level {
  color: #fff;
  background: linear-gradient(135deg, #68b6ff, #1677ff);
  box-shadow: 0 4px 10px rgba(22, 119, 255, .18);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  flex: 0 0 16px;
}

/* 20260608 live-room-ui51: make the chat feed read as one glass panel. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 9px;
  margin-top: 2px;
  border: 1px solid rgba(80, 150, 255, .16);
  border-radius: 18px;
  padding: 12px;
  padding-bottom: 10px;
  background:
    linear-gradient(180deg, rgba(248, 252, 255, .92), rgba(236, 246, 255, .88)),
    url("/static/images/live-room/chat-area-bg.webp?v=20260608-live-room-ui106-pinned-readability") top center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 24px rgba(40, 115, 220, .10);
}

.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  width: 100%;
  border-radius: 15px;
  background-color: rgba(247, 252, 255, .98);
}

.ksjb-room-mode .ksjb-live-chat-msg {
  width: 100%;
  padding-top: 1px;
}

.ksjb-room-mode .ksjb-live-chat-msg + .ksjb-live-chat-msg {
  margin-top: 1px;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 38px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 16px rgba(56, 112, 190, .07);
}

/* 20260608 live-room-ui52: sharpen the app-style tab bar under the player. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  height: 52px;
  min-height: 52px;
  gap: 0;
  border-top: 1px solid rgba(80, 150, 255, .10);
  border-bottom: 1px solid rgba(80, 150, 255, .12);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 18px rgba(32, 101, 180, .07);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 0;
  color: #25344a;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  right: calc(50% - 14px);
  bottom: 4px;
  left: calc(50% - 14px);
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #68b6ff, #1677ff);
  box-shadow: 0 4px 8px rgba(22, 119, 255, .18);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    height: 50px;
    min-height: 50px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    min-height: 50px;
    font-size: 16px;
  }
}

/* 20260608 live-room-ui53: make notice and promo modules match the app-like live room hierarchy. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(80, 150, 255, .14);
  border-radius: 16px;
  padding: 0 12px;
  color: #1677ff;
  background: linear-gradient(180deg, rgba(236, 246, 255, .98), rgba(224, 240, 255, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 7px 16px rgba(40, 115, 220, .07);
  font-size: 13px;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-notice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 20px;
  height: 20px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 14px;
  height: 14px;
  opacity: .9;
}

.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 50px minmax(0, 1fr) 86px;
  gap: 9px;
  min-height: 62px;
  margin: 8px 0 4px;
  border-radius: 18px;
  padding: 7px 10px;
  box-shadow: 0 12px 26px rgba(255, 128, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 50px;
  height: 50px;
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 15px;
  line-height: 1.18;
}

.ksjb-room-mode .ksjb-live-promo span {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.2;
}

.ksjb-room-mode .ksjb-live-promo button {
  min-width: 86px;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  box-shadow: 0 5px 12px rgba(178, 84, 0, .16);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 18px minmax(0, 1fr) 12px;
    gap: 6px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 18px;
    height: 18px;
  }

  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 44px minmax(0, 1fr) 76px;
    min-height: 58px;
    gap: 8px;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 44px;
    height: 44px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    min-width: 76px;
    height: 34px;
    padding: 0 9px;
    font-size: 13px;
  }
}

/* 20260608 live-room-ui54: polish the bottom chat input as a floating app toolbar. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 44px 44px 72px;
  gap: 7px;
  min-height: 68px;
  border-top: 1px solid rgba(80, 150, 255, .13);
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 252, 255, .96));
  box-shadow: 0 -10px 24px rgba(33, 83, 150, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px);
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 44px;
  border-color: rgba(80, 150, 255, .20);
  padding: 0 17px;
  color: #1f2d3d;
  background-color: rgba(255, 255, 255, .98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 5px 14px rgba(56, 112, 190, .06);
  font-size: 15px;
  font-weight: 760;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #9aa8bc;
  font-weight: 760;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(80, 150, 255, .14);
  background: rgba(246, 250, 255, .98);
  box-shadow: 0 7px 18px rgba(70, 118, 188, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 44px;
  height: 44px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 72px;
  height: 44px;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(22, 119, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .24);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 40px 40px 64px;
    gap: 6px;
    min-height: 64px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 64px;
    height: 40px;
    font-size: 15px;
  }
}

/* 20260608 live-room-ui55: refine the compact anchor header without pushing the player down. */
.ksjb-room-mode .ksjb-live-back,
.ksjb-room-mode .ksjb-live-close {
  border-color: rgba(80, 150, 255, .20);
  background: linear-gradient(180deg, rgba(246, 251, 255, .98), rgba(230, 242, 255, .96));
  box-shadow: 0 7px 16px rgba(32, 101, 180, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  border: 2px solid rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 1px rgba(104, 182, 255, .22), 0 7px 18px rgba(22, 119, 255, .14);
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  color: #0f172a;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  min-width: 32px;
  border: 1px solid rgba(22, 119, 255, .18);
  border-radius: 9px;
  color: #1677ff;
  background: linear-gradient(180deg, rgba(232, 244, 255, .98), rgba(211, 231, 255, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  color: #65758e;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 66px;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 8px 18px rgba(22, 119, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ksjb-room-mode .ksjb-live-online {
  min-width: 40px;
  border: 1px solid rgba(80, 150, 255, .12);
  background: linear-gradient(180deg, rgba(241, 247, 255, .98), rgba(226, 239, 255, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 12px rgba(32, 101, 180, .07);
}

.ksjb-room-mode .ksjb-live-online small {
  color: #4d617d;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-anchor-info strong em {
    min-width: 30px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 61px;
  }
}

/* 20260608 live-room-ui56: polish quick action chips without increasing vertical footprint. */
.ksjb-room-mode .ksjb-live-quick-actions {
  min-height: 26px;
}

.ksjb-room-mode .ksjb-live-quick-actions button {
  height: 26px;
  border-color: rgba(80, 150, 255, .16);
  color: #183d70;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(237, 246, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 7px 16px rgba(32, 101, 180, .08);
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-quick-actions button span {
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-quick-actions button b {
  color: #25344a;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:first-child {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  filter: saturate(1.08);
}

.ksjb-room-mode .ksjb-live-quick-actions button img:last-child {
  width: 14px;
  height: 14px;
  opacity: .72;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-quick-actions button {
    height: 25px;
  }
}

/* 20260608 live-room-ui57: refine chat card internals and message bubbles. */
.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  gap: 8px;
  border-color: rgba(80, 150, 255, .26);
  padding: 8px 9px;
  background-color: rgba(248, 252, 255, .98);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .66), 0 8px 18px rgba(40, 115, 220, .08);
}

.ksjb-room-mode .ksjb-live-official-card {
  grid-template-columns: 34px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.ksjb-room-mode .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-official-card i img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-official-card i {
  box-shadow: 0 5px 12px rgba(22, 119, 255, .12);
}

.ksjb-room-mode .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-system-card b {
  font-size: 14px;
  line-height: 1.22;
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  color: #263b59;
  font-size: 12px;
  line-height: 1.42;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 3px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  border: 2px solid rgba(255, 255, 255, .92);
  background: #eaf4ff;
  box-shadow: 0 5px 14px rgba(56, 112, 190, .10);
}

.ksjb-room-mode .ksjb-live-chat-avatar img {
  display: block;
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  color: #1677ff;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  border: 1px solid rgba(80, 150, 255, .08);
  border-radius: 13px;
  color: #263447;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 16px rgba(56, 112, 190, .08);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-system-card {
    padding: 8px;
  }
}

/* 20260608 live-room-ui58: add breathing room between promo and chat feed. */
.ksjb-room-mode .ksjb-live-promo {
  margin-bottom: 8px;
}

/* 20260608 live-room-ui65: keep the live chat feed vertical-only. */
.ksjb-room-mode .ksjb-live-chat-card {
  overflow-x: hidden;
}

/* 20260608 live-room-ui65: keep the player video-first by floating quick actions. */
.ksjb-room-mode .ksjb-room-page {
  position: relative;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  position: absolute;
  z-index: 8;
  top: 48px;
  right: 12px;
  left: 54px;
  min-height: 24px;
  justify-content: flex-start;
  gap: 6px;
  pointer-events: none;
}

.ksjb-room-mode .ksjb-live-quick-actions button,
.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  height: 24px;
  min-width: 0;
  max-width: calc(50% - 3px);
  padding: 0 8px;
  border-color: rgba(80, 150, 255, .18);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 14px rgba(20, 80, 160, .10), inset 0 1px 0 rgba(255, 255, 255, .86);
  font-size: 11px;
  pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ksjb-room-mode .ksjb-live-quick-actions button img:first-child {
  width: 16px;
  height: 16px;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:last-child {
  width: 12px;
  height: 12px;
}

.ksjb-room-mode .ksjb-room-player.ksjb-live-player-card {
  margin-top: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 45px;
    right: 10px;
    left: 49px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button,
  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    height: 23px;
    padding: 0 7px;
    font-size: 10px;
  }
}

/* 20260608 live-room-ui65: overlay the compact anchor bar on the player. */
.ksjb-room-mode .ksjb-live-room-header {
  position: absolute;
  z-index: 12;
  top: 8px;
  right: 12px;
  left: 12px;
  width: auto;
  grid-template-columns: 34px 38px minmax(0, 1fr) 66px;
  min-height: 38px;
  pointer-events: none;
}

.ksjb-room-mode .ksjb-live-room-header > * {
  pointer-events: auto;
}

.ksjb-room-mode .ksjb-live-back,
.ksjb-room-mode .ksjb-live-close {
  width: 34px;
  height: 34px;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(15, 23, 42, .34);
  box-shadow: 0 8px 18px rgba(5, 12, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ksjb-room-mode .ksjb-live-back span::before,
.ksjb-room-mode .ksjb-live-back span::after,
.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after {
  background: #fff;
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 18px rgba(5, 12, 28, .20);
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .42);
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  color: #1677ff;
  background: rgba(232, 244, 255, .94);
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 2px;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .38);
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 66px;
  height: 30px;
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  background: linear-gradient(135deg, #34d399, #16a34a);
  box-shadow: 0 8px 18px rgba(22, 163, 74, .24), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.ksjb-room-mode .ksjb-live-online {
  display: none;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  top: 50px;
  right: 12px;
  left: 52px;
}

.ksjb-room-mode .ksjb-room-player.ksjb-live-player-card {
  margin-top: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    top: 7px;
    right: 10px;
    left: 10px;
    grid-template-columns: 32px 36px minmax(0, 1fr) 61px;
    min-height: 36px;
  }

  .ksjb-room-mode .ksjb-live-back,
  .ksjb-room-mode .ksjb-live-close {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 61px;
    height: 28px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 47px;
    right: 10px;
    left: 48px;
  }
}

/* 20260608 live-room-ui65: match the reference dark glass chips over video. */
.ksjb-room-mode .ksjb-live-quick-actions {
  top: 52px;
  left: 52px;
  width: auto;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
}

.ksjb-room-mode .ksjb-live-quick-actions button,
.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  grid-template-columns: 15px minmax(0, auto) auto 10px;
  max-width: none;
  height: 24px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 0 9px;
  color: rgba(255, 255, 255, .92);
  background: rgba(15, 23, 42, .46);
  box-shadow: 0 8px 18px rgba(5, 12, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 11px;
  line-height: 1;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  min-width: 112px;
}

.ksjb-room-mode .ksjb-live-quick-actions button:last-child {
  min-width: 98px;
}

.ksjb-room-mode .ksjb-live-quick-actions button span,
.ksjb-room-mode .ksjb-live-quick-actions button b {
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}

.ksjb-room-mode .ksjb-live-quick-actions button b {
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:first-child {
  width: 15px;
  height: 15px;
  filter: saturate(1.18) drop-shadow(0 1px 3px rgba(0, 0, 0, .16));
}

.ksjb-room-mode .ksjb-live-quick-actions button img:last-child {
  width: 10px;
  height: 10px;
  opacity: .82;
  filter: brightness(0) invert(1);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 48px;
    left: 48px;
    gap: 6px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button,
  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    height: 23px;
    padding: 0 8px;
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    min-width: 106px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button:last-child {
    min-width: 90px;
  }
}

/* 20260608 live-room-ui65: let the chat feed fill the space above the input bar. */
.ksjb-room-mode .ksjb-live-chat-card {
  height: var(--ksjb-room-chat-max, 128px);
  max-height: var(--ksjb-room-chat-max, 128px);
}

/* 20260608 live-room-ui65: tighten normal chat rows into a live-feed rhythm. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 8px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  padding-top: 0;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  box-shadow: 0 4px 12px rgba(56, 112, 190, .09);
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 17px;
  gap: 5px;
  font-size: 12px;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  height: 17px;
  padding: 0 6px;
  font-size: 9px;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 28px;
  border-radius: 12px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 13px rgba(56, 112, 190, .06);
  font-size: 13px;
  line-height: 1.32;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 27px;
    padding: 5px 9px;
  }
}

/* 20260608 live-room-ui65: rebalance the bottom input bar for a longer composer. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 40px 40px 64px;
  gap: 6px;
  min-height: 66px;
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 64px;
  height: 40px;
  background-color: #1677ff;
  font-size: 15px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 38px 38px 60px;
    gap: 6px;
    min-height: 64px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 60px;
    height: 38px;
  }
}

/* 20260608 live-room-ui66: compact the player overlay header and remove the wide player top strip. */
.ksjb-room-mode .ksjb-live-room-header {
  right: auto;
  left: 12px;
  width: min(302px, calc(100% - 88px));
  grid-template-columns: 34px 38px minmax(0, 1fr) 62px;
  gap: 6px;
}

.ksjb-room-mode .ksjb-live-back,
.ksjb-room-mode .ksjb-live-close {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(15, 23, 42, .40);
  box-shadow: 0 8px 18px rgba(5, 12, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.ksjb-room-mode .ksjb-live-anchor-info {
  max-width: 132px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  font-size: 15px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  font-size: 10px;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 62px;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  top: 48px;
  left: 52px;
  right: auto;
  max-width: calc(100% - 64px);
}

.ksjb-room-mode .ksjb-live-quick-actions button,
.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
}

.ksjb-room-mode .ksjb-live-quick-actions button:first-child {
  min-width: 102px;
}

.ksjb-room-mode .ksjb-live-quick-actions button:last-child {
  min-width: 86px;
}

.ksjb-room-mode .ksjb-room-player .ksjb-player-top,
.ksjb-live-player-card .ksjb-player-top {
  top: auto;
  right: 10px;
  bottom: 10px;
  left: auto;
  display: flex;
  width: auto;
  max-width: 44%;
  gap: 0;
  justify-content: flex-end;
}

.ksjb-room-mode .ksjb-room-player .ksjb-room-live,
.ksjb-room-mode .ksjb-room-player .ksjb-player-match,
.ksjb-live-player-card .ksjb-room-live,
.ksjb-live-player-card .ksjb-player-match {
  display: none;
}

.ksjb-room-mode .ksjb-room-player .ksjb-player-heat,
.ksjb-live-player-card .ksjb-player-heat {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
  background: rgba(8, 24, 50, .48);
}

.ksjb-room-mode .ksjb-room-player .ksjb-player-top {
  display: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    left: 10px;
    width: min(286px, calc(100% - 78px));
    grid-template-columns: 32px 36px minmax(0, 1fr) 58px;
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info {
    max-width: 118px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 58px;
    height: 26px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 45px;
    left: 48px;
    max-width: calc(100% - 58px);
  }

  .ksjb-room-mode .ksjb-live-quick-actions button,
  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    height: 21px;
    padding: 0 7px;
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button:first-child {
    min-width: 96px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button:last-child {
    min-width: 82px;
  }
}

/* 20260608 live-room-ui68: make player-top chips describe the room context like the reference UI. */
.ksjb-room-mode .ksjb-live-quick-actions {
  left: 52px;
  gap: 8px;
  max-width: calc(100% - 64px);
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(210px, calc(100vw - 150px));
  min-width: 0;
  height: 24px;
  border-color: rgba(255, 255, 255, .12);
  padding: 0 12px;
  color: rgba(255, 255, 255, .94);
  background: rgba(15, 23, 42, .50);
  box-shadow: 0 8px 18px rgba(5, 12, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .10);
  font-size: 11px;
  font-weight: 900;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
  max-width: 96px;
  padding-right: 13px;
  padding-left: 13px;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip span,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  white-space: nowrap;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-quick-actions {
    left: 48px;
    gap: 6px;
    max-width: calc(100% - 58px);
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
    height: 22px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
    max-width: min(188px, calc(100vw - 132px));
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
    max-width: 82px;
  }
}

/* 20260608 live-room-ui69: tune the orange promo banner to the reference app-bar proportion. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 44px minmax(0, 1fr) 78px;
  gap: 8px;
  min-height: 56px;
  margin-top: 8px;
  margin-bottom: 6px;
  border-radius: 17px;
  padding: 6px 9px;
  box-shadow: 0 10px 22px rgba(255, 128, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 44px;
  height: 44px;
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 15px;
  line-height: 1.15;
}

.ksjb-room-mode .ksjb-live-promo span {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.18;
}

.ksjb-room-mode .ksjb-live-promo button {
  min-width: 78px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 40px minmax(0, 1fr) 70px;
    min-height: 52px;
    gap: 7px;
    padding: 6px 8px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    min-width: 70px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
}

/* 20260609 live-room-ui129: improve fixed official/room cards readability while keeping the feed visible. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 7px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 56px;
  padding: 7px 10px;
  border-color: rgba(104, 182, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 7px 16px rgba(50, 112, 190, .08);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 32px;
  height: 32px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  gap: 3px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 12.5px;
  line-height: 15px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  font-size: 11.2px;
  line-height: 1.22;
  -webkit-line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
    margin-bottom: 6px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 52px;
    padding: 6px 8px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 29px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 12px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.5px;
    line-height: 1.16;
  }
}

/* 20260609 live-room-ui134: rebalance the bottom composer so the text field is the primary control. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 36px 36px 62px;
  gap: 5px;
  height: 62px;
  padding: 10px 6px max(10px, env(safe-area-inset-bottom));
}

.ksjb-room-mode .ksjb-live-room-input input {
  width: auto;
  min-width: 0;
  height: 40px;
  padding: 0 18px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  width: 36px;
  min-width: 36px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 62px;
  min-width: 62px;
  height: 40px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 34px 34px 58px;
    gap: 4px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 38px;
    padding: 0 15px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 58px;
    min-width: 58px;
    height: 38px;
  }
}

/* 20260608 live-room-ui70: make fixed marketing cards denser so the chat feed starts earlier. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 7px;
  padding-top: 10px;
}

.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  min-height: 60px;
  gap: 7px;
  border-radius: 14px;
  padding: 7px 8px;
}

.ksjb-room-mode .ksjb-live-official-card {
  grid-template-columns: 32px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.ksjb-room-mode .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-official-card i img {
  width: 32px;
  height: 32px;
}

.ksjb-room-mode .ksjb-live-card-deco {
  width: 32px;
  height: 32px;
}

.ksjb-room-mode .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-system-card b {
  font-size: 13px;
  line-height: 1.16;
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  font-size: 11px;
  line-height: 1.32;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 6px;
    padding-top: 9px;
  }

  .ksjb-room-mode .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-system-card {
    min-height: 56px;
    padding: 7px;
  }

  .ksjb-room-mode .ksjb-live-official-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .ksjb-room-mode .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }
}

/* 20260608 live-room-ui71: shrink the player overlay header to a left-top back bar. */
.ksjb-room-mode .ksjb-live-room-header {
  top: 8px;
  left: 10px;
  width: min(264px, calc(100% - 20px));
  grid-template-columns: 34px 34px minmax(0, 102px) 52px;
  gap: 5px;
}

.ksjb-room-mode .ksjb-live-back,
.ksjb-room-mode .ksjb-live-close {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-anchor-info {
  max-width: 102px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  font-size: 14px;
  line-height: 1.05;
}

.ksjb-room-mode .ksjb-live-anchor-info em {
  margin-left: 4px;
  padding: 1px 4px;
  font-size: 9px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 52px;
  height: 26px;
  padding: 0 7px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  top: 44px;
  left: 50px;
  gap: 6px;
  max-width: calc(100% - 60px);
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
  height: 22px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 10px;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
  max-width: min(168px, calc(100vw - 132px));
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
  max-width: 78px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    top: 7px;
    left: 9px;
    width: min(248px, calc(100% - 18px));
    grid-template-columns: 32px 32px minmax(0, 96px) 50px;
    gap: 4px;
  }

  .ksjb-room-mode .ksjb-live-back,
  .ksjb-room-mode .ksjb-live-close,
  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info {
    max-width: 96px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 50px;
    height: 25px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 41px;
    left: 47px;
    max-width: calc(100% - 55px);
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
    max-width: min(154px, calc(100vw - 122px));
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
    max-width: 74px;
  }
}

/* 20260608 live-room-ui72: make the tab bar lighter and closer to the reference app rhythm. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  height: 48px;
  min-height: 48px;
  border-top-color: rgba(80, 150, 255, .08);
  border-bottom-color: rgba(80, 150, 255, .10);
  box-shadow: 0 6px 14px rgba(32, 101, 180, .055);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  min-height: 48px;
  font-size: 16px;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  right: calc(50% - 12px);
  bottom: 3px;
  left: calc(50% - 12px);
  width: 24px;
  height: 3px;
  box-shadow: 0 3px 7px rgba(22, 119, 255, .16);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    height: 46px;
    min-height: 46px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    min-height: 46px;
    font-size: 15px;
  }
}

/* 20260608 live-room-ui73: polish normal chat rows so avatars, badges, and bubbles read like the design mock. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 9px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 3px;
  min-height: 54px;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  border: 2px solid rgba(255, 255, 255, .96);
  background: linear-gradient(180deg, #eaf4ff, #d9ecff);
  box-shadow: 0 6px 15px rgba(56, 112, 190, .12);
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 18px;
  gap: 6px;
  color: #1677ff;
  font-size: 13px;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-guest {
  color: #fff;
  background: linear-gradient(135deg, #68b6ff, #1677ff);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-level {
  color: #fff;
  background: linear-gradient(135deg, #8ab9ff, #5a8eff);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 17px;
  height: 17px;
  margin-left: 1px;
  box-shadow: 0 2px 5px rgba(24, 80, 160, .10);
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 32px;
  border: 1px solid rgba(80, 150, 255, .09);
  border-radius: 13px;
  padding: 6px 12px;
  color: #263447;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 16px rgba(56, 112, 190, .08);
  font-size: 14px;
  line-height: 1.36;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 8px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 8px;
    min-height: 52px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* 20260608 live-room-ui74: soften notice hierarchy and tighten the promo transition. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 18px minmax(0, 1fr) 13px;
  gap: 7px;
  min-height: 40px;
  margin-bottom: 8px;
  border-color: rgba(80, 150, 255, .12);
  border-radius: 15px;
  padding: 0 11px;
  color: #1677ff;
  background: linear-gradient(180deg, rgba(241, 248, 255, .98), rgba(229, 242, 255, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 5px 13px rgba(40, 115, 220, .055);
  font-size: 12px;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 13px;
  height: 13px;
  opacity: .82;
}

.ksjb-room-mode .ksjb-live-promo {
  margin-top: 6px;
  margin-bottom: 6px;
  box-shadow: 0 9px 20px rgba(255, 128, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .30);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 17px minmax(0, 1fr) 12px;
    min-height: 38px;
    gap: 6px;
    margin-bottom: 7px;
    padding: 0 10px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 17px;
    height: 17px;
  }

  .ksjb-room-mode .ksjb-live-promo {
    margin-top: 6px;
    margin-bottom: 5px;
  }
}

/* 20260608 live-room-ui75: make the bottom composer slimmer without reducing tap targets too far. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 40px 40px 62px;
  gap: 6px;
  min-height: 64px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -7px 18px rgba(33, 83, 150, .065), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 40px;
  padding: 0 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 4px 12px rgba(56, 112, 190, .055);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  box-shadow: 0 5px 14px rgba(70, 118, 188, .10), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 62px;
  height: 40px;
  box-shadow: 0 8px 18px rgba(22, 119, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .24);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 38px 38px 58px;
    min-height: 62px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 38px;
    padding: 0 13px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 58px;
    height: 38px;
  }
}

/* 20260608 live-room-ui76: separate the top overlay chips from the anchor row for a cleaner player overlay. */
.ksjb-room-mode .ksjb-live-quick-actions {
  top: 48px;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
  background: rgba(15, 23, 42, .46);
  box-shadow: 0 6px 14px rgba(5, 12, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.ksjb-room-mode .ksjb-live-back,
.ksjb-room-mode .ksjb-live-close {
  background: rgba(15, 23, 42, .46);
  box-shadow: 0 7px 16px rgba(5, 12, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .20);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 44px;
  }
}

/* 20260608 live-room-ui77: use the real anchor avatar and keep the player-top overlay tighter. */
.ksjb-room-mode .ksjb-live-room-header {
  width: min(252px, calc(100% - 18px));
  grid-template-columns: 34px 34px minmax(0, 96px) 50px;
  gap: 5px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar img {
  object-fit: cover;
  background: #eaf4ff;
}

.ksjb-room-mode .ksjb-live-anchor-info {
  max-width: 96px;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 50px;
  padding: 0 7px;
}

.ksjb-room-mode .ksjb-live-online {
  display: none !important;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  top: 46px;
  left: 49px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    width: min(238px, calc(100% - 18px));
    grid-template-columns: 32px 32px minmax(0, 92px) 48px;
    gap: 4px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info {
    max-width: 92px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 48px;
    padding: 0 6px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    top: 42px;
    left: 46px;
  }
}

/* 20260608 live-room-ui79: make fixed official/anchor promotion cards read like priority content. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 9px;
  padding-top: 12px;
}

.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  min-height: 74px;
  padding: 10px 10px;
  border-radius: 15px;
  border-color: rgba(80, 150, 255, .24);
  box-shadow: 0 8px 20px rgba(40, 115, 220, .11), inset 0 1px 0 rgba(255, 255, 255, .88);
}

.ksjb-room-mode .ksjb-live-official-card {
  background-color: rgba(232, 244, 255, .96);
}

.ksjb-room-mode .ksjb-live-system-card {
  background-color: rgba(245, 250, 255, .97);
}

.ksjb-room-mode .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-official-card i img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-official-card .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-system-card .ksjb-live-card-deco {
  width: 36px;
  height: 36px;
  opacity: .92;
}

.ksjb-room-mode .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-system-card b {
  font-size: 14px;
  line-height: 1.15;
}

.ksjb-room-mode .ksjb-live-official-card strong::after,
.ksjb-room-mode .ksjb-live-system-card b::after {
  display: inline-grid;
  place-items: center;
  height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  padding: 0 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  vertical-align: 1px;
}

.ksjb-room-mode .ksjb-live-official-card strong::after {
  content: "官方";
  background: linear-gradient(135deg, #ff6b6b, #ff3b5f);
}

.ksjb-room-mode .ksjb-live-system-card b::after {
  content: "本房间";
  background: linear-gradient(135deg, #68b6ff, #1677ff);
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  margin-top: 3px;
  color: #31425f;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 8px;
    padding-top: 11px;
  }

  .ksjb-room-mode .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-system-card {
    min-height: 70px;
    padding: 9px 9px;
  }

  .ksjb-room-mode .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-system-card b {
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-system-card span {
    font-size: 11px;
  }
}

/* 20260608 live-room-ui80: soften the bottom composer to match the mobile app style. */
.ksjb-room-mode .ksjb-live-room-input {
  min-height: 66px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(80, 150, 255, .10);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -8px 20px rgba(33, 83, 150, .07), inset 0 1px 0 rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ksjb-room-mode .ksjb-live-room-input input {
  border-color: rgba(80, 150, 255, .18);
  color: #1f2d3d;
  background: rgba(248, 252, 255, .98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 4px 12px rgba(56, 112, 190, .07);
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #95a3b8;
  font-weight: 750;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  border-color: rgba(80, 150, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 249, 255, .98));
  box-shadow: 0 6px 16px rgba(70, 118, 188, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn:active,
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn:active {
  transform: translateY(1px) scale(.98);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  font-weight: 900;
  letter-spacing: 0;
  background: linear-gradient(135deg, #68b6ff, #1677ff);
  box-shadow: 0 9px 20px rgba(22, 119, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .28);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    min-height: 64px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }
}

/* 20260608 live-room-ui81: move the anchor area out of the player and match the white reference header. */
.ksjb-room-mode .ksjb-live-room-header {
  position: relative;
  z-index: 8;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  min-height: 72px;
  grid-template-columns: 52px minmax(0, 1fr) 66px 62px 34px;
  gap: 8px;
  align-items: center;
  border-radius: 0;
  padding: 10px 14px 5px;
  pointer-events: auto;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 5px 16px rgba(40, 115, 220, .06);
}

.ksjb-room-mode .ksjb-live-room-header > * {
  pointer-events: auto;
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 52px;
  height: 52px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  grid-column: 1;
  grid-row: 1;
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 4px 14px rgba(44, 111, 210, .14);
}

.ksjb-room-mode .ksjb-live-anchor-info {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  min-width: 0;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  color: #172033;
  font-size: 17px;
  line-height: 1.1;
  text-shadow: none;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  margin-left: 6px;
  border-color: rgba(22, 119, 255, .20);
  color: #1677ff;
  background: linear-gradient(180deg, #eef7ff, #dbeeff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 5px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.1;
  text-shadow: none;
}

.ksjb-room-mode .ksjb-live-follow {
  grid-column: 3;
  grid-row: 1;
  min-width: 66px;
  height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(135deg, #34d399, #16a34a);
  box-shadow: 0 8px 18px rgba(22, 163, 74, .22), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.ksjb-room-mode .ksjb-live-online {
  grid-column: 4;
  grid-row: 1;
  display: inline-grid !important;
  min-width: 62px;
  height: 38px;
  border: 0;
  padding: 0 8px;
  color: #1f2d3d;
  background: #eef4fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ksjb-room-mode .ksjb-live-online small {
  color: #4d5b70;
}

.ksjb-room-mode .ksjb-live-close {
  grid-column: 5;
  grid-row: 1;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after {
  background: #172033;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 7;
  width: 100%;
  max-width: none;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(80, 150, 255, .10);
  padding: 4px 14px 12px;
  background: rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
  flex: 1 1 0;
  max-width: none;
  height: 34px;
  border-color: rgba(80, 150, 255, .14);
  padding: 0 13px;
  color: #1f2d3d;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  box-shadow: 0 4px 12px rgba(40, 115, 220, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
  font-size: 13px;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
  max-width: 220px;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
  max-width: 150px;
}

.ksjb-room-mode .ksjb-room-player.ksjb-live-player-card,
.ksjb-room-mode .ksjb-room-player {
  margin-top: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    min-height: 68px;
    grid-template-columns: 48px minmax(0, 1fr) 60px 54px 30px;
    gap: 6px;
    padding: 9px 10px 4px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 48px;
    height: 48px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 16px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info span {
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 60px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 54px;
    height: 34px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-close {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    gap: 9px;
    padding: 4px 10px 10px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* 20260608 live-room-ui82: tighten header details against the supplied white reference. */
.ksjb-room-mode .ksjb-live-room-header {
  min-height: 76px;
  grid-template-columns: 56px minmax(0, 1fr) 70px 62px 38px;
  gap: 8px;
  padding: 12px 14px 6px;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 6px 18px rgba(43, 112, 210, .07);
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 56px;
  height: 56px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  border-width: 3px;
  box-shadow: 0 6px 16px rgba(44, 111, 210, .16);
}

.ksjb-room-mode .ksjb-live-anchor-info {
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  gap: 6px;
  max-width: 100%;
  color: #101827;
  font-size: 18px;
  line-height: 1.08;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  min-width: 34px;
  height: 22px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 22px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 5px;
  color: #637083;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 70px;
  height: 36px;
  padding: 0 13px;
  font-size: 15px;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-online {
  min-width: 62px;
  height: 40px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 950;
  background: #eef4fb;
}

.ksjb-room-mode .ksjb-live-online small {
  margin-top: 1px;
  font-size: 10px;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-live-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(40, 72, 120, .08);
  border-radius: 50%;
  background: rgba(244, 248, 253, .95);
  box-shadow: 0 6px 14px rgba(33, 67, 120, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-close span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 14px;
  height: 2.5px;
  border-radius: 999px;
  background: #101827;
  content: "";
  transform-origin: 50% 50%;
}

.ksjb-room-mode .ksjb-live-close span::before {
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-close span::after {
  transform: rotate(-45deg);
}

.ksjb-room-mode .ksjb-live-quick-actions {
  gap: 0;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px 12px;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
  flex: 0 0 auto;
  width: auto;
  height: 34px;
  border: 1px solid rgba(80, 150, 255, .14);
  border-radius: 17px;
  padding: 0 12px;
  color: #203047;
  background: linear-gradient(180deg, #fbfdff, #f0f6ff);
  box-shadow: 0 5px 14px rgba(40, 115, 220, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
  min-width: 142px;
  max-width: 168px;
  justify-content: flex-start;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
  min-width: 120px;
  max-width: 140px;
  justify-content: flex-start;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:first-child {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:last-child {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-left: auto;
  opacity: .72;
}

.ksjb-room-mode .ksjb-live-quick-actions button span,
.ksjb-room-mode .ksjb-live-quick-actions button b {
  min-width: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-quick-actions button b {
  margin-left: 4px;
  font-weight: 850;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    min-height: 70px;
    grid-template-columns: 50px minmax(0, 1fr) 60px 52px 34px;
    gap: 6px;
    padding: 10px 10px 5px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 50px;
    height: 50px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 16px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong em {
    min-width: 30px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info span {
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 60px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 52px;
    height: 34px;
    font-size: 13px;
  }

  .ksjb-room-mode .ksjb-live-close {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    padding: 6px 10px 10px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
    min-width: 130px;
    max-width: 150px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
    min-width: 112px;
    max-width: 126px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions button span,
  .ksjb-room-mode .ksjb-live-quick-actions button b {
    font-size: 12px;
  }
}

/* 20260608 live-room-ui83: make the primary header action match the reference follow pill. */
.ksjb-room-mode .ksjb-live-follow {
  min-width: 82px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  background: linear-gradient(135deg, #4aa3ff, #1677ff);
  box-shadow: 0 10px 22px rgba(22, 119, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ksjb-room-mode .ksjb-live-follow:active {
  transform: translateY(1px) scale(.98);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-follow {
    min-width: 68px;
    height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }
}

/* 20260608 live-room-ui84: compact the header block so it does not dominate the player. */
.ksjb-room-mode .ksjb-live-room-header {
  min-height: 60px;
  grid-template-columns: 44px minmax(0, 1fr) 68px 50px 32px;
  gap: 7px;
  padding: 8px 12px 3px;
  box-shadow: 0 4px 14px rgba(43, 112, 210, .055);
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 44px;
  height: 44px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  border-width: 2px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  font-size: 16px;
  line-height: 1.05;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  min-width: 30px;
  height: 20px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 20px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 4px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 68px;
  height: 32px;
  padding: 0 11px;
  font-size: 13px;
  box-shadow: 0 7px 16px rgba(22, 119, 255, .23), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.ksjb-room-mode .ksjb-live-online {
  min-width: 50px;
  height: 32px;
  border-radius: 16px;
  padding: 0 6px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-online small {
  margin-top: 0;
  font-size: 9px;
}

.ksjb-room-mode .ksjb-live-close {
  width: 32px;
  height: 32px;
}

.ksjb-room-mode .ksjb-live-close span {
  width: 16px;
  height: 16px;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after {
  top: 7px;
  left: 2px;
  width: 12px;
  height: 2.2px;
}

.ksjb-room-mode .ksjb-live-quick-actions {
  min-height: 38px;
  padding: 4px 12px 8px;
  border-bottom-color: rgba(80, 150, 255, .08);
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip,
.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip:first-child {
  height: 28px;
  border-radius: 14px;
  padding: 0 9px;
  box-shadow: 0 3px 10px rgba(40, 115, 220, .06), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
  min-width: 116px;
  max-width: 132px;
}

.ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
  min-width: 106px;
  max-width: 118px;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:first-child {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.ksjb-room-mode .ksjb-live-quick-actions button img:last-child {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
}

.ksjb-room-mode .ksjb-live-quick-actions button span,
.ksjb-room-mode .ksjb-live-quick-actions button b {
  font-size: 11px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    min-height: 56px;
    grid-template-columns: 40px minmax(0, 1fr) 62px 46px 30px;
    gap: 5px;
    padding: 7px 10px 3px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong em {
    min-width: 28px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info span {
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 62px;
    height: 30px;
    padding: 0 9px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 46px;
    height: 30px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-close {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions {
    min-height: 36px;
    padding: 4px 10px 7px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-match-chip {
    min-width: 112px;
    max-width: 124px;
  }

  .ksjb-room-mode .ksjb-live-quick-actions .ksjb-live-hot-chip {
    min-width: 100px;
    max-width: 112px;
  }
}

/* 20260608 live-room-ui85: tighten the feed modules below the player without changing player internals. */
.ksjb-room-mode .ksjb-room-panel {
  padding-top: 8px;
}

.ksjb-room-mode .ksjb-live-notice {
  min-height: 38px;
  border-radius: 14px;
  padding: 0 11px;
}

.ksjb-room-mode .ksjb-live-promo {
  min-height: 52px;
  margin: 7px 0;
  padding: 7px 10px;
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 48px;
  height: 48px;
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 15px;
}

.ksjb-room-mode .ksjb-live-promo span {
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-promo button {
  min-width: 74px;
  height: 34px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-chat-card {
  gap: 7px;
  margin-top: 0;
  padding: 10px;
}

.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  min-height: 66px;
  padding: 8px 9px;
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  margin-top: 2px;
  line-height: 1.38;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-panel {
    padding-top: 7px;
  }

  .ksjb-room-mode .ksjb-live-notice {
    min-height: 36px;
    padding: 0 10px;
  }

  .ksjb-room-mode .ksjb-live-promo {
    min-height: 50px;
    margin: 6px 0;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 44px;
    height: 44px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    min-width: 68px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 7px;
    padding: 9px;
  }

  .ksjb-room-mode .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-system-card {
    min-height: 64px;
    padding: 8px;
  }
}

/* 20260608 live-room-ui87: keep the quick row hidden and make the remaining header compact but balanced. */
.ksjb-room-page {
  gap: 6px;
  padding-top: 5px;
}

.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 42px minmax(0, 1fr) 72px 48px 34px;
  gap: 6px;
  min-height: 52px;
  padding: 5px 12px 3px;
  border-bottom: 1px solid rgba(80, 150, 255, .06);
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 3px 12px rgba(43, 112, 210, .045);
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  border-width: 2px;
  box-shadow: 0 5px 14px rgba(44, 111, 210, .13);
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  gap: 4px;
  font-size: 17px;
  line-height: 1.05;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  min-width: 30px;
  height: 18px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.08;
}

.ksjb-room-mode .ksjb-live-follow {
  min-width: 72px;
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  box-shadow: 0 7px 16px rgba(22, 119, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.ksjb-room-mode .ksjb-live-online {
  min-width: 48px;
  height: 32px;
  border-radius: 16px;
  padding: 0 6px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-online small {
  margin-top: 0;
  font-size: 9px;
}

.ksjb-room-mode .ksjb-live-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(40, 72, 120, .08);
  background: rgba(244, 248, 253, .96);
  box-shadow: 0 5px 12px rgba(33, 67, 120, .075), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-close span {
  width: 16px;
  height: 16px;
}

.ksjb-room-mode .ksjb-live-close span::before,
.ksjb-room-mode .ksjb-live-close span::after {
  top: 7px;
  left: 2px;
  width: 12px;
  height: 2.2px;
}

@media (max-width: 380px) {
  .ksjb-room-page {
    gap: 5px;
    padding-top: 4px;
  }

  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 40px minmax(0, 1fr) 64px 44px 32px;
    gap: 5px;
    min-height: 50px;
    padding: 5px 10px 3px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong em {
    min-width: 28px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info span {
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 64px;
    height: 30px;
    padding: 0 9px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 44px;
    height: 30px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-close {
    width: 32px;
    height: 32px;
  }
}

/* 20260608 live-room-ui88: fit the notice copy like the reference without adding height. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 15px minmax(0, 1fr) 12px;
  gap: 5px;
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
}

.ksjb-room-mode .ksjb-live-notice span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 15px;
  height: 15px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 12px;
  height: 12px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 14px minmax(0, 1fr) 10px;
    gap: 4px;
    min-height: 36px;
    padding: 0 7px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 14px;
    height: 14px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 10px;
    height: 10px;
  }
}

/* 20260608 live-room-ui89: make ordinary chat rows read closer to the reference feed. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 9px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  min-height: 60px;
  align-items: start;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  border: 2px solid rgba(255, 255, 255, .98);
  background: linear-gradient(180deg, #edf6ff, #dceeff);
  box-shadow: 0 7px 16px rgba(56, 112, 190, .13);
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 20px;
  gap: 6px;
  color: #1677ff;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 17px;
  height: 17px;
  margin-left: 1px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 34px;
  border: 1px solid rgba(80, 150, 255, .09);
  border-radius: 14px;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.38;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 8px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 9px;
    min-height: 56px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 19px;
    gap: 5px;
    font-size: 12px;
    line-height: 19px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 17px;
    padding: 0 6px;
    font-size: 9px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 16px;
    height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 13px;
  }
}

/* 20260608 live-room-ui90: give pinned marketing cards the stronger hierarchy from the mock. */
.ksjb-room-mode .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-system-card {
  gap: 10px;
  min-height: 88px;
  border-color: rgba(80, 150, 255, .20);
  border-radius: 16px;
  padding: 10px 12px;
  background-color: rgba(238, 248, 255, .98);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .74), 0 8px 18px rgba(40, 115, 220, .08);
}

.ksjb-room-mode .ksjb-live-official-card {
  grid-template-columns: 44px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.ksjb-room-mode .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-official-card i img {
  width: 44px;
  height: 44px;
}

.ksjb-room-mode .ksjb-live-official-card i {
  align-self: center;
  border: 2px solid rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 6px 14px rgba(40, 115, 220, .10);
}

.ksjb-room-mode .ksjb-live-official-card .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-system-card .ksjb-live-card-deco {
  right: 11px;
  bottom: 9px;
  width: 42px;
  height: 42px;
  opacity: .70;
}

.ksjb-room-mode .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-system-card div {
  gap: 4px;
  padding-right: 28px;
}

.ksjb-room-mode .ksjb-live-system-card div {
  padding-right: 0;
}

.ksjb-room-mode .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-system-card b {
  font-size: 15px;
  line-height: 1.22;
}

.ksjb-room-mode .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-system-card span {
  margin-top: 1px;
  color: #24324a;
  font-size: 13px;
  line-height: 1.36;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-system-card {
    gap: 8px;
    min-height: 84px;
    padding: 9px 10px;
  }

  .ksjb-room-mode .ksjb-live-official-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .ksjb-room-mode .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .ksjb-room-mode .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-official-card .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-system-card .ksjb-live-card-deco {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-official-card div {
    padding-right: 24px;
  }

  .ksjb-room-mode .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-system-card b {
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-system-card span {
    font-size: 12px;
    line-height: 1.34;
  }
}

/* 20260608 live-room-ui91: polish the bottom composer into the rounded app-style control group. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 42px 42px 64px;
  gap: 6px;
  min-height: 64px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 22px rgba(38, 98, 180, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 42px;
  border: 1px solid rgba(80, 150, 255, .14);
  padding: 0 16px;
  color: #24324a;
  background-color: rgba(248, 252, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 5px 12px rgba(45, 108, 190, .06);
  font-size: 15px;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #8b9ab0;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  border: 1px solid rgba(80, 150, 255, .12);
  background: rgba(248, 252, 255, .96);
  box-shadow: 0 6px 14px rgba(45, 108, 190, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 64px;
  height: 42px;
  font-size: 15px;
  box-shadow: 0 9px 18px rgba(22, 119, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .26);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 40px 40px 60px;
    gap: 5px;
    min-height: 62px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 60px;
    height: 40px;
    font-size: 14px;
  }
}

/* 20260608 live-room-ui92: make the newbie promo banner feel like the reference activity card. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 50px minmax(0, 1fr) 82px;
  gap: 8px;
  min-height: 64px;
  border-radius: 16px;
  padding: 7px 10px;
  box-shadow: 0 10px 22px rgba(255, 128, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 50px;
  height: 50px;
  align-self: center;
  filter: drop-shadow(0 5px 10px rgba(180, 74, 0, .18));
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-promo span {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.22;
  opacity: .96;
}

.ksjb-room-mode .ksjb-live-promo button {
  min-width: 82px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 6px 12px rgba(185, 75, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 46px minmax(0, 1fr) 72px;
    gap: 8px;
    min-height: 58px;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 46px;
    height: 46px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    min-width: 72px;
    height: 32px;
    font-size: 13px;
  }
}

/* 20260608 live-room-ui98: keep the room return control beside the avatar and remove the right close slot. */
.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 38px 42px minmax(0, 1fr) 72px 48px;
  column-gap: 7px;
}

.ksjb-room-mode .ksjb-live-back {
  position: static;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(40, 72, 120, .08);
  border-radius: 50%;
  background: rgba(244, 248, 253, .96);
  box-shadow: 0 6px 14px rgba(33, 67, 120, .09), inset 0 1px 0 rgba(255, 255, 255, .94);
  touch-action: manipulation;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  position: static;
  grid-column: 2;
  grid-row: 1;
}

.ksjb-room-mode .ksjb-live-anchor-info {
  grid-column: 3;
  grid-row: 1;
}

.ksjb-room-mode .ksjb-live-follow {
  grid-column: 4;
  grid-row: 1;
  justify-self: stretch;
}

.ksjb-room-mode .ksjb-live-online {
  grid-column: 5;
  grid-row: 1;
  justify-self: stretch;
}

.ksjb-room-mode .ksjb-live-back span {
  position: relative;
  width: 16px;
  height: 16px;
}

.ksjb-room-mode .ksjb-live-back span::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 9px;
  height: 9px;
  border-bottom: 2.2px solid #121826;
  border-left: 2.2px solid #121826;
  border-radius: 1px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-close {
  display: none !important;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 36px 40px minmax(0, 1fr) 64px 44px;
    column-gap: 6px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-back span {
    width: 15px;
    height: 15px;
  }

  .ksjb-room-mode .ksjb-live-back span::before {
    top: 3px;
    left: 5px;
    width: 8px;
    height: 8px;
  }
}

/* 20260608 live-room-ui96: keep room marketing fixed above the scrolling chat feed. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  display: grid;
  gap: 7px;
  margin: 0 0 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  padding: 8px 10px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 36px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 36px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  right: 10px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  opacity: .62;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  gap: 2px;
  padding-right: 22px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  padding-right: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 13px;
  line-height: 1.15;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ksjb-room-mode .ksjb-live-chat-card {
  min-height: 96px;
}

/* 20260608 live-room-ui98: safe fallback before viewport math runs, so the chat feed never sits under the composer. */
.ksjb-room-mode .ksjb-live-chat-card {
  height: var(--ksjb-room-chat-max, 128px);
  max-height: var(--ksjb-room-chat-max, 128px);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 6px;
    margin-bottom: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 54px;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 11px;
    line-height: 1.24;
  }
}

/* 20260608 live-room-ui97: keep iOS Safari from zooming the room composer on focus. */
.ksjb-room-mode .ksjb-live-room-input input {
  font-size: 16px;
  line-height: 20px;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  font-size: 16px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input input,
  .ksjb-room-mode .ksjb-live-room-input input::placeholder {
    font-size: 16px;
  }
}

/* 20260608 live-room-ui101: give the anchor name more room on narrow and 390px design-width phones. */
@media (max-width: 400px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 34px 38px minmax(0, 1fr) 58px 38px;
    column-gap: 5px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong {
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-anchor-info strong em {
    margin-left: 4px;
    padding: 1px 4px;
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 58px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 38px;
    width: 38px;
    height: 30px;
    padding: 0 4px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-live-online small {
    font-size: 10px;
  }
}

/* 20260608 live-room-ui102: keep fixed marketing prominent but free more first-screen chat space. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 7px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 55px;
  padding: 6px 9px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 34px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 12px;
  line-height: 1.1;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  font-size: 11px;
  line-height: 1.22;
}

/* 20260608 live-room-ui103: align the preserved player shell to the viewport without changing controls. */
.ksjb-room-mode .ksjb-room-player {
  width: auto !important;
  margin-right: -12px !important;
  margin-left: -12px !important;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-player {
    margin-right: -10px !important;
    margin-left: -10px !important;
  }
}

/* 20260608 live-room-ui104: tighten marketing stack so first-screen chat matches the reference density. */
.ksjb-room-mode .ksjb-live-notice {
  height: 32px;
  min-height: 32px;
  margin-bottom: 6px;
  padding: 0 10px;
  border-radius: 15px;
}

.ksjb-room-mode .ksjb-live-notice span {
  font-size: 12px;
  line-height: 16px;
}

.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 40px minmax(0, 1fr) 72px;
  gap: 8px;
  min-height: 52px;
  margin-bottom: 6px;
  padding: 5px 8px;
  border-radius: 15px;
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-promo span {
  font-size: 11px;
}

.ksjb-room-mode .ksjb-live-promo button {
  min-width: 72px;
  height: 30px;
  font-size: 12px;
}

.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 5px;
  margin-bottom: 6px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 46px;
  padding: 5px 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 26px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 26px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 26px;
  height: 26px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 11px;
  line-height: 1.08;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  font-size: 10px;
  line-height: 1.12;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 38px minmax(0, 1fr) 68px;
    min-height: 50px;
    padding: 6px 8px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 44px;
    padding: 5px 8px;
  }
}

.ksjb-room-mode .ksjb-live-chat-card {
  gap: 6px;
  padding: 9px 10px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 7px;
  row-gap: 2px;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 17px;
  gap: 4px;
  font-size: 12px;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  min-height: 15px;
  padding: 0 5px;
  font-size: 9px;
  line-height: 15px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 13px;
  height: 13px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 28px;
  border-radius: 11px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.28;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    padding: 8px 9px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 32px;
    height: 32px;
  }
}

/* 20260608 live-room-ui105: give the composer input more room like the reference mobile bar. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 38px 38px 58px;
  gap: 5px;
  min-height: 62px;
  padding: 9px 9px calc(9px + env(safe-area-inset-bottom));
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 40px;
  padding: 0 14px;
  font-size: 16px;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  font-size: 16px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 58px;
  height: 40px;
  font-size: 14px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 36px 36px 56px;
    gap: 5px;
    min-height: 60px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
    padding: 0 13px;
    font-size: 16px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 56px;
    height: 40px;
  }
}

/* 20260608 live-room-ui106: keep pinned marketing readable while preserving first-screen chat. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 5px;
  margin-bottom: 3px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  gap: 4px;
  min-height: 52px;
  padding: 5px 9px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 30px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 30px;
  height: 30px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 12px;
  line-height: 1.08;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  font-size: 11px;
  line-height: 1.12;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 50px;
    padding: 5px 8px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 28px;
    height: 28px;
  }
}

/* 20260608 live-room-ui107: move the room exit affordance to the left beside the avatar and keep the right close hidden. */
.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 40px 42px minmax(0, 1fr) 72px 48px;
  column-gap: 7px;
}

.ksjb-room-mode .ksjb-live-back {
  display: grid !important;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(154, 177, 210, .24);
  border-radius: 50%;
  background: rgba(246, 250, 255, .96);
  box-shadow: 0 8px 18px rgba(31, 67, 119, .10), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-back span {
  width: 17px;
  height: 17px;
}

.ksjb-room-mode .ksjb-live-back span::before {
  top: 3px;
  left: 5px;
  width: 9px;
  height: 9px;
  border-bottom-width: 2.4px;
  border-left-width: 2.4px;
}

.ksjb-room-mode .ksjb-live-close {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 400px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 38px 38px minmax(0, 1fr) 56px 42px;
    column-gap: 5px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 56px;
    width: 56px;
    padding: 0 7px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 42px;
    width: 42px;
    padding: 0 4px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 36px 36px minmax(0, 1fr) 54px 40px;
    column-gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    min-width: 54px;
    width: 54px;
    padding: 0 6px;
  }

  .ksjb-room-mode .ksjb-live-online {
    min-width: 40px;
    width: 40px;
  }
}

/* 20260609 live-room-ui108: make the fixed marketing cards closer to the reference while keeping first-screen chat visible. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 5px;
  margin-bottom: 4px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  gap: 4px;
  min-height: 52px;
  padding: 5px 9px;
  border-radius: 14px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 32px minmax(0, 1fr);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 32px;
  height: 32px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 13px;
  line-height: 1.12;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  font-size: 11px;
  line-height: 1.14;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
    margin-bottom: 3px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 50px;
    padding: 5px 8px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 11px;
    line-height: 1.14;
  }
}

/* 20260609 live-room-ui109: strengthen the orange promo banner without taking more first-screen space. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 42px minmax(0, 1fr) 76px;
  gap: 8px;
  min-height: 52px;
  padding: 5px 8px;
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-promo span {
  font-size: 11px;
  line-height: 13px;
}

.ksjb-room-mode .ksjb-live-promo button {
  min-width: 76px;
  width: 76px;
  height: 30px;
  font-size: 13px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 40px minmax(0, 1fr) 72px;
    gap: 7px;
    min-height: 50px;
    padding: 5px 8px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 13px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11px;
    line-height: 12px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    min-width: 72px;
    width: 72px;
    height: 30px;
    font-size: 12px;
  }
}

/* 20260609 live-room-ui110: make the blue notice bar read like the reference information strip. */
.ksjb-room-mode .ksjb-live-notice {
  height: 34px;
  min-height: 34px;
  margin-bottom: 5px;
  padding: 0 11px;
  border-radius: 17px;
  border-color: rgba(80, 150, 255, .22);
}

.ksjb-room-mode .ksjb-live-notice span {
  font-size: 13px;
  line-height: 16px;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 15px;
  height: 15px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    height: 33px;
    min-height: 33px;
    margin-bottom: 5px;
    padding: 0 10px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 12px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 17px;
    height: 17px;
  }
}

/* 20260609 live-room-ui111: improve chat nameplates and bubbles without reducing first-screen density. */
.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 17px;
  gap: 4px;
  font-size: 13px;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  min-height: 16px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 14px;
  height: 14px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-msg b {
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    min-height: 15px;
    font-size: 9px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.24;
  }
}

/* 20260609 live-room-ui112: polish the composer surface while preserving its measured layout. */
.ksjb-room-mode .ksjb-live-room-input {
  border-top: 1px solid rgba(143, 176, 220, .18);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -10px 24px rgba(52, 110, 190, .08);
}

.ksjb-room-mode .ksjb-live-room-input input {
  border: 1px solid rgba(146, 183, 235, .30);
  background: rgba(248, 252, 255, .98);
  box-shadow: inset 0 1px 2px rgba(80, 132, 210, .06), 0 4px 12px rgba(68, 130, 220, .06);
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #9aabc2;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  border: 1px solid rgba(150, 184, 230, .32);
  background: rgba(249, 252, 255, .98);
  box-shadow: 0 4px 12px rgba(54, 104, 180, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  border: 0;
  background: linear-gradient(135deg, #62b6ff 0%, #1677ff 100%);
  box-shadow: 0 8px 16px rgba(22, 119, 255, .24);
}

/* 20260609 live-room-ui113: refine the tab bar rhythm against the reference mobile design. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  height: 48px;
  min-height: 48px;
  border-top: 1px solid rgba(80, 150, 255, .07);
  border-bottom: 1px solid rgba(80, 150, 255, .10);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 5px 14px rgba(32, 101, 180, .045);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  min-height: 48px;
  color: #2b3a50;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  font-weight: 900;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  right: calc(50% - 12px);
  bottom: 3px;
  left: calc(50% - 12px);
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #68b6ff 0%, #1677ff 100%);
  box-shadow: 0 3px 7px rgba(22, 119, 255, .16);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide,
  .ksjb-room-mode .ksjb-room-tabs-wide button {
    height: 46px;
    min-height: 46px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    font-size: 14px;
  }
}

/* 20260609 live-room-ui114: make fixed marketing cards read as two clear priority modules. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 4px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 58px;
  padding: 7px 10px;
  border: 1px solid rgba(121, 183, 255, .34);
  border-radius: 14px;
  background-color: rgba(239, 248, 255, .98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 4px 12px rgba(67, 130, 220, .055);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  gap: 6px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 7px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 28px;
  height: 28px;
  justify-self: end;
  opacity: .86;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  gap: 3px;
  min-width: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  align-items: center;
  color: #1677ff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  display: -webkit-box;
  overflow: hidden;
  color: #263852;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 52px;
    padding: 6px 8px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 30px minmax(0, 1fr) 24px;
    gap: 6px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 26px;
    height: 26px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.5px;
  }
}

.ksjb-room-mode .ksjb-live-chat-card {
  gap: 5px;
  padding: 8px 10px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  min-height: 56px;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 18px;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 30px;
  padding: 5px 11px;
  line-height: 1.25;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 54px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 28px;
    padding: 4px 10px;
  }
}

/* 20260609 live-room-ui115: keep the first chat row inside the rounded feed card. */
.ksjb-room-mode .ksjb-live-chat-card > .ksjb-live-chat-msg:first-child {
  margin-top: 3px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card > .ksjb-live-chat-msg:first-child {
    margin-top: 2px;
  }
}

@media (min-width: 381px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 50px;
    column-gap: 8px;
    row-gap: 1px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 16px;
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 14px;
    height: 14px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.25;
  }
}

@media (min-width: 421px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px;
    padding: 7px 10px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 42px;
    column-gap: 7px;
    row-gap: 1px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 16px;
    font-size: 12px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 15px;
    min-height: 15px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 25px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.18;
  }
}

/* 20260609 live-room-ui116: keep 430px same-height screens from clipping the first chat row. */
@media (min-width: 421px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 3px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 47px;
    column-gap: 7px;
    row-gap: 1px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 16px;
    font-size: 12px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 15px;
    min-height: 15px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.2;
  }
}

/* 20260609 live-room-ui117: make the send action read like the reference app pill. */
@media (min-width: 381px) {
  .ksjb-room-mode .ksjb-live-room-input {
    gap: 6px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 62px;
    min-width: 62px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6cbbff 0%, #1677ff 100%);
    box-shadow: 0 9px 18px rgba(22, 119, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: 14px;
    font-weight: 950;
  }
}

/* 20260609 live-room-ui118: force the room exit affordance to the left and suppress stale right-close controls. */
.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 40px 42px minmax(0, 1fr) 72px 48px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: 10px;
}

.ksjb-room-mode .ksjb-live-back {
  display: grid !important;
  place-items: center;
  justify-self: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid rgba(178, 194, 220, .42);
  border-radius: 50%;
  background: rgba(246, 250, 255, .98);
  box-shadow: 0 8px 18px rgba(31, 67, 119, .11), inset 0 1px 0 rgba(255, 255, 255, .98);
  opacity: 1 !important;
  visibility: visible !important;
}

.ksjb-room-mode .ksjb-live-back span {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-back span::before {
  top: 3px;
  left: 6px;
  width: 10px;
  height: 10px;
  border-bottom-width: 2.5px;
  border-left-width: 2.5px;
  border-color: #111827;
}

.ksjb-room-mode .ksjb-live-room-header .ksjb-live-close,
.ksjb-room-mode .ksjb-live-room-header button[aria-label="关闭"],
.ksjb-room-mode .ksjb-live-room-header button[aria-label="关闭直播间"],
.ksjb-room-mode .ksjb-live-room-header button[aria-label="关闭页面"],
.ksjb-room-mode .ksjb-live-room-header button:has(img[src*="icon-close-x"]),
.ksjb-room-mode .ksjb-live-room-header img[src*="icon-close-x"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 400px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 38px 38px minmax(0, 1fr) 56px 42px;
    column-gap: 6px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: 8px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 36px 36px minmax(0, 1fr) 54px 40px;
    column-gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* 20260609 live-room-ui119: tighten the first-screen feed rhythm below the tabs without touching the player. */
.ksjb-room-mode .ksjb-room-panel {
  margin-top: -2px;
  padding-top: 6px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-panel {
    margin-top: -2px;
    padding-top: 5px;
  }
}

/* 20260609 live-room-ui120: make the notice strip match the light-blue app pill in the reference. */
.ksjb-room-mode .ksjb-live-notice {
  border: 1px solid rgba(104, 182, 255, .24);
  background: linear-gradient(180deg, rgba(244, 250, 255, .98) 0%, rgba(230, 243, 255, .96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 6px 14px rgba(58, 132, 220, .08);
}

.ksjb-room-mode .ksjb-live-notice span {
  color: #1677ff;
}

/* 20260609 live-room-ui121: add compact identity badges to pinned marketing cards. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  display: inline-flex;
  gap: 5px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong::after,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b::after {
  display: inline-flex;
  align-items: center;
  height: 16px;
  min-width: 0;
  border-radius: 999px;
  padding: 0 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 16px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong::after {
  content: "官方";
  background: linear-gradient(180deg, #ff6b7c 0%, #f0445c 100%);
  box-shadow: 0 4px 9px rgba(240, 68, 92, .18);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b::after {
  content: "本房间";
  background: linear-gradient(180deg, #68b6ff 0%, #1677ff 100%);
  box-shadow: 0 4px 9px rgba(22, 119, 255, .18);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    gap: 4px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong::after,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b::after {
    height: 15px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 15px;
  }
}

/* 20260609 live-room-ui122: separate visitor identity badges from level badges in chat rows. */
.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-guest {
  box-sizing: border-box;
  border: 1px solid rgba(22, 119, 255, .24);
  color: #1677ff;
  background: linear-gradient(180deg, rgba(244, 250, 255, .98) 0%, rgba(225, 241, 255, .96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-level {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #8ab9ff 0%, #5a8eff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 3px 7px rgba(90, 142, 255, .16);
}

/* 20260609 live-room-ui123: avoid double-ring composer icon buttons because the WebP assets already include the circle. */
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(54, 104, 180, .08);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 36px;
    height: 36px;
  }
}
/* 20260609 live-room-ui128: make the fixed promo banner read like the stronger design reference. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 44px minmax(0, 1fr) 78px;
  gap: 8px;
  min-height: 54px;
  padding: 6px 9px;
  box-shadow: 0 11px 24px rgba(255, 128, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 5px 9px rgba(177, 72, 0, .18));
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-promo span {
  font-size: 11.5px;
  line-height: 13px;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-promo button {
  width: 76px;
  height: 30px;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 6px 13px rgba(190, 83, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .92);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 40px minmax(0, 1fr) 70px;
    gap: 7px;
    min-height: 52px;
    padding: 6px 8px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 39px;
    height: 39px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 13px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 10.5px;
    line-height: 12px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 70px;
    height: 28px;
    font-size: 12px;
  }
}

/* 20260609 live-room-ui124: soften composer placeholder so it reads like a hint, not content. */
.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #a9b7c9;
  font-weight: 720;
}

/* 20260609 live-room-ui125: compress the anchor header so video keeps priority on first screen. */
.ksjb-room-mode .ksjb-live-room-header {
  height: 48px;
  min-height: 48px;
  top: max(4px, env(safe-area-inset-top));
  grid-template-columns: 36px 36px minmax(0, 1fr) 56px 40px;
  column-gap: 6px;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: 8px;
}

.ksjb-room-mode .ksjb-live-back {
  width: 36px;
  height: 36px;
  min-width: 36px;
}

.ksjb-room-mode .ksjb-live-back span {
  width: 17px;
  height: 17px;
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong {
  font-size: 16px;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-anchor-info strong em {
  height: 17px;
  min-width: 31px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-anchor-info span {
  margin-top: 1px;
  font-size: 11px;
  line-height: 14px;
}

.ksjb-room-mode .ksjb-live-follow {
  width: 56px;
  min-width: 56px;
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
}

.ksjb-room-mode .ksjb-live-online {
  width: 40px;
  min-width: 40px;
  height: 30px;
  font-size: 16px;
  line-height: 15px;
}

.ksjb-room-mode .ksjb-live-online small {
  font-size: 10px;
}

@media (min-width: 421px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 38px 38px minmax(0, 1fr) 60px 42px;
    height: 50px;
    min-height: 50px;
    column-gap: 7px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: 10px;
  }

  .ksjb-room-mode .ksjb-live-back,
  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    width: 60px;
    min-width: 60px;
    height: 32px;
    font-size: 14px;
  }

  .ksjb-room-mode .ksjb-live-online {
    width: 42px;
    min-width: 42px;
    height: 32px;
  }
}

/* 20260609 live-room-ui126: make the post-player content read as one app-style shell and reserve space for the fixed composer. */
.ksjb-room-mode .ksjb-room-panel {
  background: linear-gradient(180deg, rgba(246, 251, 255, .98) 0%, rgba(232, 244, 255, .98) 100%);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.ksjb-room-mode .ksjb-room-tabs-wide {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 -1px 0 rgba(80, 150, 255, .08), 0 4px 12px rgba(45, 108, 190, .04);
}

.ksjb-room-mode .ksjb-live-notice,
.ksjb-room-mode .ksjb-live-promo,
.ksjb-room-mode .ksjb-live-pinned-cards,
.ksjb-room-mode .ksjb-live-chat-card {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.ksjb-room-mode .ksjb-live-chat-card {
  margin-bottom: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-panel {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .ksjb-room-mode .ksjb-live-notice,
  .ksjb-room-mode .ksjb-live-promo,
  .ksjb-room-mode .ksjb-live-pinned-cards,
  .ksjb-room-mode .ksjb-live-chat-card {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

/* 20260609 live-room-ui127: restore WebP composer tool buttons instead of tiny text glyph fallbacks. */
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn::before {
  content: none !important;
  display: none !important;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  display: block;
  width: 38px;
  height: 38px;
  opacity: 1 !important;
  border-radius: 50%;
  box-shadow: 0 5px 13px rgba(54, 104, 180, .09);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 36px;
    height: 36px;
  }
}

/* 20260609 live-room-ui130-final-cascade: left return beside avatar, no right close. */
.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 36px 38px minmax(0, 1fr) 58px 42px;
  column-gap: 6px;
  align-items: center;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: 8px;
}

.ksjb-room-mode .ksjb-live-back {
  display: grid !important;
  place-items: center;
  justify-self: start;
  align-self: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid rgba(190, 205, 226, .52);
  border-radius: 999px;
  background: rgba(246, 250, 255, .96);
  box-shadow: 0 8px 18px rgba(31, 67, 119, .1), inset 0 1px 0 rgba(255, 255, 255, .96);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 3;
}

.ksjb-room-mode .ksjb-live-back span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-back span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 9px;
  height: 9px;
  border: 0 solid #111827;
  border-bottom-width: 2.4px;
  border-left-width: 2.4px;
  border-radius: 1.5px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  justify-self: start;
}

.ksjb-room-mode .ksjb-live-room-header .ksjb-live-close,
.ksjb-room-mode .ksjb-live-room-header button[aria-label="关闭"],
.ksjb-room-mode .ksjb-live-room-header button[aria-label="关闭直播间"],
.ksjb-room-mode .ksjb-live-room-header button[aria-label="关闭页面"],
.ksjb-room-mode .ksjb-live-room-header button:has(img[src*="icon-close-x"]),
.ksjb-room-mode .ksjb-live-room-header img[src*="icon-close-x"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 421px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 38px 40px minmax(0, 1fr) 62px 44px;
    column-gap: 7px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: 10px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 34px 36px minmax(0, 1fr) 54px 40px;
    column-gap: 5px;
    padding-left: max(7px, env(safe-area-inset-left));
    padding-right: 7px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

/* 20260609 live-room-ui131: polish ordinary chat rows toward the mobile app reference. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 5px;
  padding: 9px 11px 10px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  min-height: 52px;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 18px;
  gap: 5px;
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  height: 16px;
  min-height: 16px;
  padding: 0 6px;
  font-size: 9.5px;
  line-height: 16px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 14px;
  height: 14px;
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 29px;
  padding: 5px 11px;
  border-radius: 13px 13px 13px 5px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 5px 12px rgba(57, 115, 190, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
  color: #1f2d3d;
  font-size: 13.5px;
  font-weight: 720;
  line-height: 1.28;
  letter-spacing: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px;
    padding: 8px 10px 9px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 50px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 15px;
    min-height: 15px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 27px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.24;
  }
}

/* 20260609 live-room-ui147-final: keep the promo banner hierarchy after later chat overrides. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 48px minmax(0, 1fr) 78px;
  gap: 9px;
  height: 58px;
  min-height: 58px;
  padding: 6px 10px;
  overflow: hidden;
  border-radius: 16px;
  background-position: center;
  box-shadow:
    0 12px 25px rgba(255, 128, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 48px;
  height: 48px;
  align-self: center;
  transform: translateX(-1px);
  filter: drop-shadow(0 6px 9px rgba(160, 65, 0, .18));
}

.ksjb-room-mode .ksjb-live-promo > div {
  min-width: 0;
  align-self: center;
}

.ksjb-room-mode .ksjb-live-promo strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 14.5px;
  font-weight: 980;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(145, 58, 0, .22);
}

.ksjb-room-mode .ksjb-live-promo span {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, .96);
  font-size: 11.8px;
  font-weight: 880;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(145, 58, 0, .16);
}

.ksjb-room-mode .ksjb-live-promo button {
  justify-self: end;
  width: 78px;
  min-width: 78px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff7ef 100%);
  box-shadow:
    0 8px 16px rgba(168, 70, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-promo button span {
  color: #f06a00;
  font-size: 14px;
  font-weight: 980;
  line-height: 34px;
  text-align: center;
  text-shadow: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 44px minmax(0, 1fr) 72px;
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 6px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 44px;
    height: 44px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 13.2px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 10.8px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 72px;
    min-width: 72px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-promo button span {
    font-size: 13.2px;
    line-height: 32px;
  }
}

/* 20260609 live-room-ui148-final-cascade: final notice pill hierarchy. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 16px minmax(0, 1fr) 12px;
  gap: 6px;
  height: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(148, 203, 255, .62);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(244, 250, 255, .98) 0%, rgba(231, 244, 255, .96) 100%),
    rgba(235, 247, 255, .96);
  box-shadow:
    0 7px 16px rgba(40, 115, 220, .075),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ksjb-room-mode .ksjb-live-notice span {
  min-width: 0;
  overflow: hidden;
  color: #1478ff;
  font-size: 12px;
  font-weight: 880;
  line-height: 42px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 3px 6px rgba(22, 119, 255, .18));
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 12px;
  height: 12px;
  opacity: .9;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 15px minmax(0, 1fr) 11px;
    gap: 6px;
    height: 40px;
    min-height: 40px;
    padding: 0 9px;
    border-radius: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 11px;
    line-height: 40px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 15px;
    height: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 11px;
    height: 11px;
  }
}

/* 20260609 live-room-ui149: give room tabs the app-channel rhythm from the reference. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  box-sizing: border-box;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 48px;
  min-height: 48px;
  padding: 0 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .99);
  border-top: 1px solid rgba(80, 150, 255, .06);
  border-bottom: 1px solid rgba(80, 150, 255, .12);
  box-shadow:
    inset 0 -1px 0 rgba(80, 150, 255, .07),
    0 4px 10px rgba(45, 108, 190, .035);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 0;
  padding: 0;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 880;
  line-height: 48px;
  letter-spacing: 0;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  bottom: 4px;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1677ff 0%, #68b6ff 100%);
  box-shadow: 0 4px 8px rgba(22, 119, 255, .18);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    padding: 0 6px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    font-size: 15px;
    font-weight: 880;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
    bottom: 4px;
    width: 26px;
    height: 4px;
  }
}

/* 20260609 live-room-ui148: make the notice strip read like the reference blue pill. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  gap: 8px;
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(148, 203, 255, .62);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(244, 250, 255, .98) 0%, rgba(231, 244, 255, .96) 100%),
    rgba(235, 247, 255, .96);
  box-shadow:
    0 7px 16px rgba(40, 115, 220, .075),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ksjb-room-mode .ksjb-live-notice span {
  min-width: 0;
  overflow: hidden;
  color: #1478ff;
  font-size: 12.8px;
  font-weight: 880;
  line-height: 42px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 3px 6px rgba(22, 119, 255, .18));
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 14px;
  height: 14px;
  opacity: .9;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 17px minmax(0, 1fr) 13px;
    gap: 7px;
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 11.7px;
    line-height: 40px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 17px;
    height: 17px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 13px;
    height: 13px;
  }
}

/* 20260609 live-room-ui146: final header affordance polish, left return only. */
.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 34px 38px minmax(0, 1fr) 56px 46px;
  column-gap: 6px;
  height: 48px;
  min-height: 48px;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: 8px;
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-back {
  display: grid !important;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(190, 205, 226, .58);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(248, 252, 255, .99) 0%, rgba(237, 246, 255, .98) 100%);
  box-shadow: 0 8px 18px rgba(31, 67, 119, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ksjb-room-mode .ksjb-live-back span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-back span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 9px;
  height: 9px;
  border: 0 solid #111827;
  border-bottom-width: 2.4px;
  border-left-width: 2.4px;
  border-radius: 1.5px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-follow {
  width: 56px;
  min-width: 56px;
  height: 30px;
  padding: 0 8px;
}

.ksjb-room-mode .ksjb-live-online {
  width: 46px;
  min-width: 46px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246, 250, 255, .99) 0%, rgba(235, 244, 255, .98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 7px 15px rgba(45, 108, 190, .07);
  font-size: 15px;
  line-height: 14px;
}

.ksjb-room-mode .ksjb-live-online small {
  margin-top: 1px;
  font-size: 9.5px;
  line-height: 10px;
}

.ksjb-room-mode .ksjb-live-room-header .ksjb-live-close,
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭"],
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭直播间"],
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭页面"],
.ksjb-room-mode .ksjb-live-room-header [class*="close"],
.ksjb-room-mode .ksjb-live-room-header img[src*="icon-close-x"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 421px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 36px 40px minmax(0, 1fr) 60px 50px;
    column-gap: 7px;
    height: 50px;
    min-height: 50px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: 10px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 40px;
    height: 40px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    width: 60px;
    min-width: 60px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-online {
    width: 50px;
    min-width: 50px;
    height: 32px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 32px 36px minmax(0, 1fr) 54px 44px;
    column-gap: 5px;
    padding-left: max(7px, env(safe-area-inset-left));
    padding-right: 7px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    width: 54px;
    min-width: 54px;
  }

  .ksjb-room-mode .ksjb-live-online {
    width: 44px;
    min-width: 44px;
    font-size: 14px;
  }
}

/* 20260609 live-room-ui147: make the newbie promo match the reference banner hierarchy. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 52px minmax(0, 1fr) 84px;
  gap: 10px;
  height: 58px;
  min-height: 58px;
  padding: 6px 10px;
  overflow: hidden;
  border-radius: 16px;
  background-position: center;
  box-shadow:
    0 12px 25px rgba(255, 128, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 52px;
  height: 52px;
  align-self: center;
  transform: translateX(-1px);
  filter: drop-shadow(0 6px 9px rgba(160, 65, 0, .18));
}

.ksjb-room-mode .ksjb-live-promo > div {
  min-width: 0;
  align-self: center;
}

.ksjb-room-mode .ksjb-live-promo strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 15.5px;
  font-weight: 980;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(145, 58, 0, .22);
}

.ksjb-room-mode .ksjb-live-promo span {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, .96);
  font-size: 12.3px;
  font-weight: 880;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(145, 58, 0, .16);
}

.ksjb-room-mode .ksjb-live-promo button {
  justify-self: end;
  width: 84px;
  min-width: 84px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff7ef 100%);
  box-shadow:
    0 8px 16px rgba(168, 70, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-promo button span {
  color: #f06a00;
  font-size: 14px;
  font-weight: 980;
  line-height: 34px;
  text-align: center;
  text-shadow: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 48px minmax(0, 1fr) 76px;
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 6px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 48px;
    height: 48px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 14px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11.3px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 76px;
    min-width: 76px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-promo button span {
    font-size: 13.2px;
    line-height: 32px;
  }
}

/* 20260609 live-room-ui142 final cascade: free pinned-card copy from the right deco column. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  position: relative;
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  position: relative;
  z-index: 1;
  padding-right: 24px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  padding-right: 30px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 0;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  opacity: .78;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.18;
  -webkit-line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 31px minmax(0, 1fr);
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
    padding-right: 20px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
    padding-right: 25px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
    width: 31px;
    height: 31px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    right: 7px;
    width: 26px;
    height: 26px;
    opacity: .68;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.7px;
    line-height: 1.16;
  }
}

/* 20260609 live-room-ui145: polish pinned-card copy rhythm after ui144 cache fix. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  padding-right: 20px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  padding-right: 26px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  font-size: 11.6px;
  line-height: 1.2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
    padding-right: 18px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
    padding-right: 22px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.8px;
    line-height: 1.17;
  }
}

/* 20260609 live-room-ui142: keep pinned marketing copy readable in the compact first screen. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  position: relative;
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  position: relative;
  z-index: 1;
  padding-right: 24px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  padding-right: 30px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 34px;
  height: 34px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 0;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  opacity: .78;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.18;
  -webkit-line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 31px minmax(0, 1fr);
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
    padding-right: 20px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
    padding-right: 25px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
    width: 31px;
    height: 31px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    right: 7px;
    width: 26px;
    height: 26px;
    opacity: .68;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.7px;
    line-height: 1.16;
  }
}

@media (min-width: 421px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px;
    padding: 8px 10px 9px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 35px minmax(0, 1fr);
    min-height: 50px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 35px;
    height: 35px;
  }
}

/* 20260609 live-room-ui132: make the notice strip closer to the reference app info bar. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 14px minmax(0, 1fr) 8px;
  gap: 3px;
  height: 38px;
  min-height: 38px;
  padding: 0 6px;
  border: 1px solid rgba(108, 174, 255, .23);
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(239, 248, 255, .98) 0%, rgba(226, 241, 255, .96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 6px 14px rgba(58, 126, 210, .08);
}

.ksjb-room-mode .ksjb-live-notice span {
  overflow: hidden;
  color: #1677ff;
  font-size: 12.2px;
  font-weight: 820;
  line-height: 18px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 14px;
  height: 14px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 8px;
  height: 8px;
  opacity: .86;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 13px minmax(0, 1fr) 8px;
    gap: 3px;
    height: 36px;
    min-height: 36px;
    padding: 0 6px;
    border-radius: 18px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 11.4px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 8px;
    height: 8px;
  }
}

/* 20260609 live-room-ui133: sharpen pinned official and room promotion cards without reducing first-screen chat. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 7px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 61px;
  padding: 7px 10px;
  border: 1px solid rgba(86, 160, 255, .24);
  border-radius: 15px;
  background-color: rgba(239, 248, 255, .985);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 7px 16px rgba(50, 112, 190, .08);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  column-gap: 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 34px;
  column-gap: 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 34px;
  height: 34px;
  opacity: .92;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  gap: 3px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  color: #1677ff;
  font-size: 13.5px;
  font-weight: 950;
  line-height: 15px;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  color: #26374e;
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0;
  -webkit-line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
    margin-bottom: 6px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 58px;
    padding: 6px 8px;
    border-radius: 14px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 32px minmax(0, 1fr) 30px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 30px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 12.5px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.6px;
    line-height: 1.16;
  }
}

/* 20260609 live-room-ui134-final: rebalance the bottom composer so the text field is the primary control. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 36px 36px 62px;
  gap: 5px;
  height: 62px;
  padding: 10px 6px max(10px, env(safe-area-inset-bottom));
}

.ksjb-room-mode .ksjb-live-room-input input {
  width: auto;
  min-width: 0;
  height: 40px;
  padding: 0 18px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  width: 36px;
  min-width: 36px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 62px;
  min-width: 62px;
  height: 40px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 34px 34px 58px;
    gap: 4px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 38px;
    padding: 0 15px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 58px;
    min-width: 58px;
    height: 38px;
  }
}

/* 20260609 live-room-ui135: keep the exit affordance only on the left of the avatar. */
.ksjb-room-mode .ksjb-live-room-header {
  position: relative;
  grid-template-columns: 34px 38px minmax(0, 1fr) 56px 40px;
  column-gap: 6px;
}

.ksjb-room-mode .ksjb-live-back {
  display: grid !important;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(190, 205, 226, .58);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(248, 252, 255, .98) 0%, rgba(238, 246, 255, .96) 100%);
  box-shadow: 0 8px 18px rgba(31, 67, 119, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ksjb-room-mode .ksjb-live-room-header .ksjb-live-close,
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭"],
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭直播间"],
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭页面"],
.ksjb-room-mode .ksjb-live-room-header [class*="close"],
.ksjb-room-mode .ksjb-live-room-header img[src*="icon-close-x"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 32px 36px minmax(0, 1fr) 54px 38px;
    column-gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
}

/* 20260609 live-room-ui136: strengthen room tabs to match the mobile app reference. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  height: 48px;
  min-height: 48px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: rgba(255, 255, 255, .99);
  border-bottom: 1px solid rgba(80, 150, 255, .12);
  box-shadow: inset 0 -1px 0 rgba(80, 150, 255, .08), 0 4px 10px rgba(45, 108, 190, .04);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  height: 48px;
  min-width: 0;
  font-size: 16px;
  font-weight: 880;
  line-height: 48px;
  letter-spacing: 0;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  bottom: 4px;
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1677ff 0%, #68b6ff 100%);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide button {
    font-size: 15px;
    font-weight: 880;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
    bottom: 4px;
    width: 28px;
    height: 4px;
  }
}

/* 20260609 live-room-ui137: give the chat feed the light-blue glass card from the reference. */
.ksjb-room-mode .ksjb-live-chat-card {
  background:
    linear-gradient(180deg, rgba(239, 248, 255, .985) 0%, rgba(247, 252, 255, .96) 100%),
    rgba(239, 248, 255, .96);
  border: 1px solid rgba(162, 207, 255, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 24px rgba(40, 115, 220, .1);
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  background: rgba(255, 255, 255, .99);
  border: 1px solid rgba(218, 235, 255, .82);
  box-shadow:
    0 5px 12px rgba(57, 115, 190, .075),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  border: 2px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, #f4fbff, #e8f4ff);
}

/* 20260609 live-room-ui138: make the newbie promo banner a stronger activity card. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 46px minmax(0, 1fr) 82px;
  min-height: 56px;
  height: 56px;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 16px;
  box-shadow:
    0 12px 26px rgba(255, 128, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 5px 8px rgba(180, 75, 0, .18));
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 15px;
  line-height: 17px;
  font-weight: 980;
  text-shadow: 0 1px 2px rgba(150, 60, 0, .18);
}

.ksjb-room-mode .ksjb-live-promo span {
  margin-top: 2px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 880;
  text-shadow: 0 1px 1px rgba(150, 60, 0, .16);
}

.ksjb-room-mode .ksjb-live-promo button {
  width: 82px;
  min-width: 82px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow:
    0 7px 15px rgba(190, 83, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-promo button span {
  font-size: 13.5px;
  line-height: 32px;
  font-weight: 980;
  text-shadow: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 42px minmax(0, 1fr) 76px;
    min-height: 54px;
    height: 54px;
    gap: 7px;
    padding: 6px 8px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 42px;
    height: 42px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 13.8px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11.2px;
    line-height: 13px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 76px;
    min-width: 76px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-promo button span {
    font-size: 13px;
    line-height: 30px;
  }
}

/* 20260609 live-room-ui139: make the composer controls read like the app reference. */
.ksjb-room-mode .ksjb-live-room-input {
  grid-template-columns: minmax(0, 1fr) 38px 38px 64px;
  gap: 5px;
  height: 64px;
  padding: 10px 6px max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 -10px 24px rgba(52, 110, 190, .08);
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 40px;
  min-width: 0;
  padding: 0 18px;
  border: 1px solid rgba(146, 183, 235, .34);
  background: linear-gradient(180deg, rgba(250, 253, 255, .99), rgba(243, 249, 255, .98));
  box-shadow:
    inset 0 1px 2px rgba(80, 132, 210, .06),
    0 4px 12px rgba(68, 130, 220, .055);
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #9aa9bd;
  font-weight: 820;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  width: 38px;
  min-width: 38px;
  height: 40px;
  border: 1px solid rgba(214, 228, 246, .92);
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border-radius: 999px;
  box-shadow:
    0 5px 13px rgba(54, 104, 180, .09),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 64px;
  min-width: 64px;
  height: 40px;
  font-size: 14px;
  font-weight: 980;
  box-shadow:
    0 9px 18px rgba(22, 119, 255, .25),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 36px 36px 60px;
    gap: 4px;
    height: 62px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 38px;
    padding: 0 15px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
    width: 36px;
    min-width: 36px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 32px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 60px;
    min-width: 60px;
    height: 38px;
  }
}

/* 20260609 live-room-ui140: sharpen pinned marketing cards without using more height. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 7px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  border-color: rgba(86, 160, 255, .3);
  background-color: rgba(238, 248, 255, .99);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 8px 18px rgba(50, 112, 190, .09);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  color: #0f73ff;
  font-size: 14px;
  line-height: 16px;
  font-weight: 980;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  color: #20324a;
  font-size: 11.8px;
  line-height: 1.18;
  font-weight: 800;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 37px;
  height: 37px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  opacity: .98;
  filter: drop-shadow(0 5px 10px rgba(55, 135, 235, .13));
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
    margin-bottom: 6px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 12.8px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.8px;
    line-height: 1.16;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
    width: 31px;
    height: 31px;
  }
}

/* 20260609 live-room-ui141: make ordinary chat rows closer to the app reference. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 4px;
  padding: 8px 11px;
  background:
    linear-gradient(180deg, rgba(240, 249, 255, .99) 0%, rgba(247, 252, 255, .965) 100%),
    rgba(239, 248, 255, .97);
  border-color: rgba(149, 200, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 12px 26px rgba(40, 115, 220, .105);
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 51px;
  margin-top: 0;
  column-gap: 8px;
  row-gap: 2px;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  border-width: 2px;
  box-shadow: 0 5px 12px rgba(45, 118, 220, .12);
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  min-height: 18px;
  gap: 5px;
  color: #1478ff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 980;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  height: 16px;
  min-height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9.5px;
  line-height: 16px;
  font-weight: 900;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 15px;
  height: 15px;
  box-shadow: 0 2px 5px rgba(255, 64, 64, .12);
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 29px;
  padding: 5px 12px;
  border-radius: 14px 14px 14px 6px;
  border-color: rgba(208, 230, 255, .9);
  color: #1c2d44;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.32;
  box-shadow:
    0 6px 13px rgba(57, 115, 190, .08),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px;
    padding: 8px 10px 9px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 35px minmax(0, 1fr);
    min-height: 50px;
    column-gap: 8px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 35px;
    height: 35px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    font-size: 12.3px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 15px;
    min-height: 15px;
    padding: 0 6px;
    font-size: 9px;
    line-height: 15px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 14px;
    height: 14px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 28px;
    padding: 5px 11px;
    font-size: 13.4px;
    line-height: 1.28;
  }
}

@media (min-width: 421px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 3px;
    padding: 5px 10px 6px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 45px;
    column-gap: 8px;
    row-gap: 1px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 16px;
    font-size: 12.4px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 14px;
    min-height: 14px;
    padding: 0 6px;
    font-size: 8.8px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 25px;
    padding: 4px 10px;
    font-size: 13.2px;
    line-height: 1.24;
  }
}

/* 20260609 live-room-ui147-final-cascade: final newbie promo banner hierarchy. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 48px minmax(0, 1fr) 78px;
  gap: 9px;
  height: 58px;
  min-height: 58px;
  padding: 6px 10px;
  overflow: hidden;
  border-radius: 16px;
  background-position: center;
  box-shadow:
    0 12px 25px rgba(255, 128, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 48px;
  height: 48px;
  align-self: center;
  transform: translateX(-1px);
  filter: drop-shadow(0 6px 9px rgba(160, 65, 0, .18));
}

.ksjb-room-mode .ksjb-live-promo > div {
  min-width: 0;
  align-self: center;
}

.ksjb-room-mode .ksjb-live-promo strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 14.5px;
  font-weight: 980;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(145, 58, 0, .22);
}

.ksjb-room-mode .ksjb-live-promo span {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, .96);
  font-size: 11.8px;
  font-weight: 880;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(145, 58, 0, .16);
}

.ksjb-room-mode .ksjb-live-promo button {
  justify-self: end;
  width: 78px;
  min-width: 78px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff7ef 100%);
  box-shadow:
    0 8px 16px rgba(168, 70, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-promo button span {
  color: #f06a00;
  font-size: 14px;
  font-weight: 980;
  line-height: 34px;
  text-align: center;
  text-shadow: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 44px minmax(0, 1fr) 72px;
    gap: 8px;
    height: 56px;
    min-height: 56px;
    padding: 6px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 44px;
    height: 44px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 13.2px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 10.8px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 72px;
    min-width: 72px;
    height: 32px;
  }

  .ksjb-room-mode .ksjb-live-promo button span {
    font-size: 13.2px;
    line-height: 32px;
  }
}

/* 20260609 live-room-ui148-end: final notice pill override at true file end. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 16px minmax(0, 1fr) 12px;
  gap: 6px;
  height: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(148, 203, 255, .62);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(244, 250, 255, .98) 0%, rgba(231, 244, 255, .96) 100%),
    rgba(235, 247, 255, .96);
  box-shadow:
    0 7px 16px rgba(40, 115, 220, .075),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ksjb-room-mode .ksjb-live-notice span {
  min-width: 0;
  overflow: hidden;
  color: #1478ff;
  font-size: 12px;
  font-weight: 880;
  line-height: 42px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-notice img:first-child {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 3px 6px rgba(22, 119, 255, .18));
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 12px;
  height: 12px;
  opacity: .9;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 15px minmax(0, 1fr) 11px;
    gap: 6px;
    height: 40px;
    min-height: 40px;
    padding: 0 9px;
    border-radius: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 11px;
    line-height: 40px;
  }

  .ksjb-room-mode .ksjb-live-notice img:first-child {
    width: 15px;
    height: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 11px;
    height: 11px;
  }
}

/* 20260609 live-room-ui149-end: final app-style room tabs override. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  box-sizing: border-box;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 48px;
  min-height: 48px;
  padding: 0 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .99);
  border-top: 1px solid rgba(80, 150, 255, .06);
  border-bottom: 1px solid rgba(80, 150, 255, .12);
  box-shadow:
    inset 0 -1px 0 rgba(80, 150, 255, .07),
    0 4px 10px rgba(45, 108, 190, .035);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 0;
  padding: 0;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 880;
  line-height: 48px;
  letter-spacing: 0;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  bottom: 4px;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1677ff 0%, #68b6ff 100%);
  box-shadow: 0 4px 8px rgba(22, 119, 255, .18);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    padding: 0 6px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    font-size: 15px;
    font-weight: 880;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
    bottom: 4px;
    width: 26px;
    height: 4px;
  }
}

/* 20260609 live-room-ui150-end: strengthen fixed official and room promotion cards. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 5px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 62px;
  height: 62px;
  padding: 7px 10px;
  border-radius: 15px;
  border-color: rgba(139, 199, 255, .72);
  background:
    linear-gradient(180deg, rgba(246, 252, 255, .99) 0%, rgba(230, 244, 255, .97) 100%),
    rgba(236, 248, 255, .98);
  box-shadow:
    0 8px 18px rgba(45, 118, 220, .1),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  column-gap: 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 36px;
  column-gap: 8px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 36px;
  height: 36px;
  opacity: .92;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  min-width: 0;
  gap: 3px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 13.6px;
  line-height: 17px;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  max-width: 100%;
  overflow: hidden;
  color: #243652;
  font-size: 10.8px;
  font-weight: 760;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 61px;
    height: 61px;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 34px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 13px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.4px;
    line-height: 14px;
  }
}

/* 20260609 live-room-ui151-end: lock left return affordance and remove stale right close. */
.ksjb-room-mode .ksjb-live-room-header {
  grid-template-columns: 36px 38px minmax(0, 1fr) 58px 48px;
  column-gap: 6px;
  align-items: center;
  height: 48px;
  min-height: 48px;
  padding: 0 8px;
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-back {
  display: grid !important;
  place-items: center;
  justify-self: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(188, 204, 226, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(250, 253, 255, .99) 0%, rgba(238, 247, 255, .98) 100%),
    rgba(246, 250, 255, .98);
  box-shadow:
    0 8px 18px rgba(31, 67, 119, .11),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ksjb-room-mode .ksjb-live-back span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-back span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 9px;
  height: 9px;
  border: 0 solid #101827;
  border-bottom-width: 2.5px;
  border-left-width: 2.5px;
  border-radius: 1.5px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-anchor-avatar,
.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-room-header .ksjb-live-close,
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭"],
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭直播间"],
.ksjb-room-mode .ksjb-live-room-header [aria-label="关闭页面"],
.ksjb-room-mode .ksjb-live-room-header [class*="close"],
.ksjb-room-mode .ksjb-live-room-header img[src*="icon-close-x"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 421px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 38px 40px minmax(0, 1fr) 62px 50px;
    column-gap: 7px;
    height: 50px;
    min-height: 50px;
    padding: 0 10px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 34px 36px minmax(0, 1fr) 56px 44px;
    column-gap: 5px;
    height: 46px;
    min-height: 46px;
    padding: 0 7px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }
}

/* 20260609 live-room-ui152-end: make the room composer match the app pill controls. */
.ksjb-room-mode .ksjb-live-room-input {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px 66px;
  align-items: center;
  gap: 7px;
  height: calc(66px + env(safe-area-inset-bottom));
  min-height: calc(66px + env(safe-area-inset-bottom));
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid rgba(80, 150, 255, .12);
  box-shadow: 0 -8px 18px rgba(40, 115, 220, .08);
}

.ksjb-room-mode .ksjb-live-room-input input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(185, 214, 245, .78);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(247, 251, 255, .98) 100%),
    rgba(248, 252, 255, .98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 4px 10px rgba(45, 108, 190, .055);
  color: #1f2d3d;
  font-size: 14px;
  font-weight: 760;
  line-height: 42px;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #9fb0c7;
  font-weight: 780;
  opacity: 1;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(205, 221, 242, .86);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(244, 248, 255, .98) 100%),
    rgba(248, 252, 255, .98);
  box-shadow:
    0 6px 14px rgba(45, 108, 190, .09),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  box-shadow: none;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 66px;
  min-width: 66px;
  height: 42px;
  min-height: 42px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #67bbff 0%, #1677ff 100%),
    #1677ff;
  box-shadow:
    0 9px 18px rgba(22, 119, 255, .25),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  line-height: 42px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 40px 40px 60px;
    gap: 5px;
    height: calc(64px + env(safe-area-inset-bottom));
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 8px 5px calc(8px + env(safe-area-inset-bottom));
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
    padding: 0 14px;
    font-size: 13.4px;
    line-height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 60px;
    min-width: 60px;
    height: 40px;
    min-height: 40px;
    font-size: 13.4px;
    line-height: 40px;
  }
}

/* 20260609 live-room-ui160-end: make the notice bar readable without overflowing. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  column-gap: 5px;
  height: 42px;
  min-height: 42px;
  padding: 0 9px;
  border-radius: 16px;
}

.ksjb-room-mode .ksjb-live-notice img {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 12px;
  height: 12px;
}

.ksjb-room-mode .ksjb-live-notice span {
  font-size: 11.6px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 17px minmax(0, 1fr) 11px;
    column-gap: 4px;
    padding: 0 8px;
  }

  .ksjb-room-mode .ksjb-live-notice img {
    width: 17px;
    height: 17px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 11px;
    height: 11px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 10.9px;
    line-height: 17px;
  }
}

/* 20260609 live-room-ui162-final: final pinned card typography and frame lock. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  height: 60px;
  min-height: 60px;
  border: 1px solid rgba(121, 188, 255, .36);
  background:
    linear-gradient(180deg, rgba(247, 252, 255, .99), rgba(231, 245, 255, .97));
  box-shadow:
    0 7px 16px rgba(36, 113, 205, .075),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  color: #1677ff;
  font-size: 14px;
  font-weight: 950;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  color: #2b3a50;
  font-size: 11.8px;
  font-weight: 820;
  line-height: 15px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 13.4px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 11.2px;
    line-height: 14px;
  }
}

/* 20260609 live-room-ui162-end: polish pinned official and anchor promotion cards. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  box-sizing: border-box;
  grid-template-columns: 40px minmax(0, 1fr) 32px;
  column-gap: 8px;
  align-items: center;
  height: 60px;
  min-height: 60px;
  padding: 7px 9px;
  border: 1px solid rgba(121, 188, 255, .36);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(247, 252, 255, .99), rgba(231, 245, 255, .97));
  box-shadow:
    0 7px 16px rgba(36, 113, 205, .075),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  background:
    linear-gradient(180deg, rgba(247, 252, 255, .99), rgba(228, 244, 255, .97));
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  background:
    linear-gradient(180deg, rgba(249, 253, 255, .99), rgba(234, 247, 255, .97));
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  box-shadow:
    0 6px 13px rgba(22, 119, 255, .13),
    0 0 0 2px rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
  width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  display: grid;
  min-width: 0;
  gap: 2px;
  align-content: center;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  min-width: 0;
  color: #1677ff;
  font-size: 14px;
  font-weight: 950;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  min-width: 0;
  color: #2b3a50;
  font-size: 11.8px;
  font-weight: 820;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 32px;
  height: 32px;
  opacity: .92;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    column-gap: 8px;
    padding: 7px 8px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 13.4px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 11.2px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }
}

/* 20260609 live-room-ui161-end: soften room tabs to match the light app style. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(249, 252, 255, .98));
  border-top: 1px solid rgba(80, 150, 255, .10);
  border-bottom: 1px solid rgba(80, 150, 255, .12);
  box-shadow:
    0 6px 14px rgba(36, 113, 205, .045),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  overflow: hidden;
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 780;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #62b7ff, #1677ff);
  box-shadow: 0 3px 8px rgba(22, 119, 255, .20);
  transform: translateX(-50%);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    padding: 0 6px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    font-size: 15.4px;
    line-height: 19px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
    width: 28px;
  }
}

/* 20260609 live-room-ui153-fit-end: final 430px chat fit override. */
@media (min-width: 421px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px !important;
    padding: 7px 10px !important;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 42px !important;
    column-gap: 7px !important;
    row-gap: 1px !important;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 34px !important;
    height: 34px !important;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 16px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 15px !important;
    min-height: 15px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    line-height: 15px !important;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px !important;
    height: 13px !important;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 25px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }
}

/* 20260609 live-room-ui153-end: sharpen chat nameplates and message bubbles. */
.ksjb-room-mode .ksjb-live-chat-card {
  gap: 6px;
  padding: 9px 11px;
}

.ksjb-room-mode .ksjb-live-chat-msg {
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  min-height: 52px;
  width: 100%;
  max-width: 100%;
}

.ksjb-room-mode .ksjb-live-chat-avatar,
.ksjb-room-mode .ksjb-live-chat-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  box-shadow:
    0 6px 12px rgba(45, 118, 220, .14),
    0 0 0 2px rgba(255, 255, 255, .94);
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  min-height: 18px;
  overflow: hidden;
  color: #1677ff;
  font-size: 13px;
  font-weight: 930;
  line-height: 18px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  flex: 0 0 auto;
  height: 17px;
  min-height: 17px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #64b6ff 0%, #1677ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: 9.5px;
  font-weight: 900;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-level {
  background: linear-gradient(180deg, #8db7ff 0%, #5f95ff 100%);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-guest {
  background: linear-gradient(180deg, #48a9ff 0%, #1677ff 100%);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(45, 65, 110, .12);
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: auto;
  max-width: min(245px, 100%);
  min-height: 31px;
  padding: 6px 12px;
  border: 1px solid rgba(214, 230, 248, .62);
  border-radius: 15px 15px 15px 7px;
  background: rgba(255, 255, 255, .99);
  box-shadow:
    0 5px 12px rgba(45, 108, 190, .07),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  color: #263852;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

@media (min-width: 421px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 5px;
    padding: 8px 10px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 48px;
    column-gap: 8px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 16px;
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 28px;
    padding: 5px 11px;
    font-size: 13px;
    line-height: 1.22;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 5px;
    padding: 8px 9px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 50px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    gap: 4px;
    min-height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 16px;
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    max-width: min(225px, 100%);
    min-height: 29px;
    padding: 5px 11px;
    font-size: 13px;
    line-height: 1.22;
  }
}

@media (min-width: 381px) and (max-height: 860px) {
  .ksjb-room-mode .ksjb-live-chat-card {
    gap: 4px;
    padding: 7px 10px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 46px;
    column-gap: 8px;
    row-gap: 1px;
  }

  .ksjb-room-mode .ksjb-live-chat-avatar,
  .ksjb-room-mode .ksjb-live-chat-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    min-height: 17px;
    font-size: 12px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 16px;
    min-height: 16px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 27px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.22;
  }
}

/* 20260609 live-room-ui154-end: strengthen pinned promotion identity cards. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 6px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  min-height: 64px;
  height: 64px;
  border: 1px solid rgba(127, 190, 255, .72);
  border-radius: 16px;
  background:
    radial-gradient(circle at 96% 50%, rgba(118, 188, 255, .2) 0, rgba(118, 188, 255, 0) 42px),
    linear-gradient(180deg, rgba(248, 253, 255, .99) 0%, rgba(232, 246, 255, .985) 100%),
    rgba(240, 249, 255, .98);
  box-shadow:
    0 8px 18px rgba(45, 118, 220, .095),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  column-gap: 9px;
  padding: 7px 10px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: minmax(0, 1fr) 34px;
  column-gap: 9px;
  padding: 8px 10px 8px 14px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
  width: 42px;
  height: 42px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i {
  border-radius: 999px;
  box-shadow:
    0 6px 14px rgba(22, 119, 255, .14),
    0 0 0 2px rgba(255, 255, 255, .94);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 34px;
  height: 34px;
  opacity: .9;
  filter: drop-shadow(0 5px 10px rgba(22, 119, 255, .16));
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #1677ff;
  font-size: 14px;
  font-weight: 950;
  line-height: 17px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong::after,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b::after {
  flex: 0 0 auto;
  height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong::after {
  content: "官方";
  background: linear-gradient(135deg, #ff6478, #ff3558);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b::after {
  content: "本房间";
  background: linear-gradient(135deg, #68b6ff, #1677ff);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: #2b3a50;
  font-size: 11.5px;
  font-weight: 790;
  line-height: 14px;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 5px;
    margin-bottom: 5px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    min-height: 58px;
    height: 58px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    column-gap: 8px;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: minmax(0, 1fr) 30px;
    column-gap: 8px;
    padding: 7px 9px 7px 12px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    gap: 5px;
    font-size: 13px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong::after,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b::after {
    height: 16px;
    padding: 0 5px;
    font-size: 8.5px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 10.5px;
    line-height: 13px;
  }
}

/* 20260609 live-room-ui155-end: lock the compact header structure. */
.ksjb-room-mode .ksjb-live-room-header {
  box-sizing: border-box;
  width: calc(100% - 24px);
  min-height: 50px;
  margin: 0 12px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 36px 38px minmax(0, 1fr) 58px 46px;
  gap: 6px;
  align-items: center;
  border-radius: 0;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 6px 18px rgba(34, 94, 180, .055);
}

.ksjb-room-mode .ksjb-live-back {
  grid-column: 1;
  grid-row: 1;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(78, 112, 154, .14);
  border-radius: 999px;
  background: rgba(246, 250, 255, .98);
  box-shadow:
    0 5px 14px rgba(36, 74, 130, .08),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  grid-column: 2;
  grid-row: 1;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(22, 119, 255, .13);
}

.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 38px;
  height: 38px;
  object-fit: cover;
}

.ksjb-room-mode .ksjb-live-anchor-info {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-anchor-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #0f1a2c;
  font-size: 16px;
  font-weight: 950;
  line-height: 18px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-anchor-name > em,
.ksjb-room-mode .ksjb-live-anchor-badge {
  flex: 0 0 auto;
  height: 18px;
  min-width: 30px;
  padding: 0 5px;
  border: 1px solid rgba(22, 119, 255, .22);
  border-radius: 999px;
  background: rgba(225, 241, 255, .96);
  color: #1677ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 18px;
  text-align: center;
}

.ksjb-room-mode .ksjb-live-anchor-subtitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #607086;
  font-size: 11px;
  font-weight: 850;
  line-height: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-live-follow {
  grid-column: 4;
  grid-row: 1;
  width: 58px;
  min-width: 58px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 7px 15px rgba(22, 119, 255, .18);
}

.ksjb-room-mode .ksjb-live-online {
  grid-column: 5;
  grid-row: 1;
  width: 46px;
  min-width: 46px;
  height: 32px;
  padding: 2px 0 0;
  border-radius: 999px;
  background: rgba(239, 246, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
  color: #172134;
  font-size: 14px;
  font-weight: 950;
}

.ksjb-room-mode .ksjb-live-online small {
  margin-top: -1px;
  color: #4d617c;
  font-size: 9px;
  font-weight: 850;
}

.ksjb-room-mode .ksjb-live-close,
.ksjb-room-mode [aria-label="关闭"] {
  display: none !important;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    width: calc(100% - 20px);
    min-height: 48px;
    margin: 0 10px;
    padding: 6px 7px;
    grid-template-columns: 34px 36px minmax(0, 1fr) 54px 42px;
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-anchor-name {
    gap: 4px;
    font-size: 15px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-anchor-subtitle {
    font-size: 10.5px;
    line-height: 12px;
  }

  .ksjb-room-mode .ksjb-live-follow {
    width: 54px;
    min-width: 54px;
    height: 30px;
    font-size: 12px;
  }

  .ksjb-room-mode .ksjb-live-online {
    width: 42px;
    min-width: 42px;
    height: 32px;
    font-size: 13px;
  }
}

/* 20260609 live-room-ui156-end: make the benefit banner closer to the reference marketing strip. */
.ksjb-room-mode .ksjb-live-promo {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  height: 58px;
  margin: 6px 0;
  padding: 6px 10px;
  grid-template-columns: 46px minmax(0, 1fr) 74px;
  column-gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 180, 45, .92), rgba(255, 118, 18, .96)),
    url("/static/images/live-room/promo-banner-orange-bg.webp?v=20260609-live-room-ui156-promo-emphasis-lock") center / cover no-repeat;
  box-shadow:
    0 9px 18px rgba(255, 122, 17, .20),
    inset 0 1px 0 rgba(255, 255, 255, .36);
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-promo::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, .28) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 74%, rgba(255, 238, 130, .30) 0 10px, transparent 11px);
  content: "";
}

.ksjb-room-mode .ksjb-live-promo-gift {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  align-self: center;
  filter: drop-shadow(0 6px 10px rgba(167, 61, 0, .20));
  transform: translateX(-2px);
}

.ksjb-room-mode .ksjb-live-promo > div {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  align-content: center;
}

.ksjb-room-mode .ksjb-live-promo strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 20px;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(172, 65, 0, .24);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-live-promo span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  font-weight: 850;
  line-height: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(172, 65, 0, .18);
}

.ksjb-room-mode .ksjb-live-promo button {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: 74px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  background:
    #fff url("/static/images/live-room/button-white-claim-bg.webp?v=20260609-live-room-ui156-promo-emphasis-lock") center / 100% 100% no-repeat;
  box-shadow:
    0 5px 12px rgba(165, 64, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  color: #ff7800;
  font-size: 14px;
  font-weight: 950;
  line-height: 34px;
  text-align: center;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-promo button span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-shadow: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    width: 100%;
    min-height: 56px;
    height: 56px;
    margin: 5px 0;
    padding: 6px 9px;
    grid-template-columns: 42px minmax(0, 1fr) 68px;
    column-gap: 7px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 42px;
    height: 42px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 14px;
    line-height: 18px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 70px;
    height: 32px;
    font-size: 13px;
    line-height: 32px;
  }
}

/* 20260609 live-room-ui157-end: align notice bar icon, text and arrow. */
.ksjb-room-mode .ksjb-live-notice {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  min-height: 42px;
  margin: 8px 0 0;
  padding: 0 7px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 11px;
  align-items: center;
  column-gap: 4px;
  border: 1px solid rgba(121, 188, 255, .34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 249, 255, .98), rgba(228, 244, 255, .96));
  box-shadow:
    0 5px 12px rgba(35, 108, 198, .06),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  color: #1677ff;
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-notice img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 11px;
  height: 11px;
  opacity: .9;
}

.ksjb-room-mode .ksjb-live-notice span {
  display: block;
  min-width: 0;
  height: auto;
  overflow: hidden;
  color: #1478ff;
  font-size: 10.5px;
  font-weight: 880;
  line-height: 17px;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    height: 40px;
    min-height: 40px;
    margin-top: 7px;
    padding: 0 7px;
    grid-template-columns: 15px minmax(0, 1fr) 10px;
    column-gap: 4px;
    border-radius: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice img {
    width: 15px;
    height: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 10px;
    line-height: 16px;
  }
}

/* 20260609 live-room-ui158-end: give both pinned cards a clear left identity icon. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: 40px minmax(0, 1fr) 32px;
  column-gap: 8px;
  align-items: center;
  min-height: 60px;
  height: 60px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  padding: 7px 10px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(238, 248, 255, .98), rgba(214, 237, 255, .96));
  box-shadow:
    0 6px 14px rgba(22, 119, 255, .14),
    0 0 0 2px rgba(255, 255, 255, .94);
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
  border-radius: 999px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  min-width: 0;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 32px;
  height: 32px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    column-gap: 8px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
    width: 38px;
    height: 38px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 30px;
    height: 30px;
  }
}

/* 20260609 live-room-ui159-end: keep the fixed composer off the viewport edges. */
.ksjb-room-mode .ksjb-live-room-input {
  box-sizing: border-box;
  width: min(100vw, 430px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  grid-template-columns: minmax(0, 1fr) 40px 40px 68px;
  gap: 8px;
  height: calc(66px + env(safe-area-inset-bottom));
  min-height: calc(66px + env(safe-area-inset-bottom));
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(80, 150, 255, .12);
  background: rgba(255, 255, 255, .985);
  box-shadow:
    0 -8px 20px rgba(35, 108, 198, .08),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-room-input input {
  height: 42px;
  padding: 0 18px;
  border-color: rgba(190, 218, 248, .82);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 252, 255, .98));
  color: #1f2d3d;
  font-size: 14px;
  font-weight: 780;
  line-height: 42px;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #9cacbf;
  font-weight: 780;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-color: rgba(205, 224, 246, .88);
  box-shadow:
    0 5px 13px rgba(45, 108, 190, .08),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 36px;
  height: 36px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 68px;
  min-width: 68px;
  height: 42px;
  min-height: 42px;
  font-size: 14px;
  line-height: 42px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 38px 38px 62px;
    gap: 6px;
    height: calc(64px + env(safe-area-inset-bottom));
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }

  .ksjb-room-mode .ksjb-live-room-input input {
    height: 40px;
    padding: 0 14px;
    font-size: 13.2px;
    line-height: 40px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 62px;
    min-width: 62px;
    height: 40px;
    min-height: 40px;
    font-size: 13.4px;
    line-height: 40px;
  }
}

/* 20260609 live-room-ui160-final: final notice readability lock after older overrides. */
.ksjb-room-mode .ksjb-live-notice {
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  column-gap: 5px;
  height: 42px;
  min-height: 42px;
  padding: 0 9px;
}

.ksjb-room-mode .ksjb-live-notice img {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 12px;
  height: 12px;
}

.ksjb-room-mode .ksjb-live-notice span {
  font-size: 11.6px;
  font-weight: 900;
  line-height: 18px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-notice {
    grid-template-columns: 17px minmax(0, 1fr) 11px;
    column-gap: 4px;
    padding: 0 8px;
  }

  .ksjb-room-mode .ksjb-live-notice img {
    width: 17px;
    height: 17px;
  }

  .ksjb-room-mode .ksjb-live-notice img:last-child {
    width: 11px;
    height: 11px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 10.9px;
    line-height: 17px;
  }
}
/* 20260609 live-room-ui162-real-end: final pinned card typography and frame lock. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  height: 60px;
  min-height: 60px;
  border: 1px solid rgba(121, 188, 255, .36);
  background:
    linear-gradient(180deg, rgba(247, 252, 255, .99), rgba(231, 245, 255, .97));
  box-shadow:
    0 7px 16px rgba(36, 113, 205, .075),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  color: #1677ff;
  font-size: 14px;
  font-weight: 950;
  line-height: 17px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  color: #2b3a50;
  font-size: 11.8px;
  font-weight: 820;
  line-height: 15px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 13.4px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 11.2px;
    line-height: 14px;
  }
}
/* 20260609 live-room-ui162-text-end: keep pinned card copy to one clean line. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 20260609 live-room-ui163-end: balance the orange promo banner. */
.ksjb-room-mode .ksjb-live-promo {
  grid-template-columns: 48px minmax(0, 1fr) 82px;
  column-gap: 9px;
  height: 58px;
  min-height: 58px;
  padding: 6px 10px;
  border-radius: 16px;
  box-shadow:
    0 8px 18px rgba(255, 122, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 48px;
  height: 48px;
  transform: translateX(0);
}

.ksjb-room-mode .ksjb-live-promo > div {
  gap: 2px;
  align-content: center;
}

.ksjb-room-mode .ksjb-live-promo strong {
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-live-promo span {
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-live-promo button {
  width: 82px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  border-radius: 999px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-promo {
    grid-template-columns: 44px minmax(0, 1fr) 74px;
    column-gap: 7px;
    height: 56px;
    min-height: 56px;
    padding: 6px 9px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 44px;
    height: 44px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 14px;
    line-height: 18px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 74px;
    height: 32px;
    font-size: 13px;
    line-height: 32px;
  }
}

/* 20260609 live-room-ui164-end: polish the compact header back control. */
.ksjb-room-mode .ksjb-live-room-header {
  min-height: 50px;
  padding: 6px 8px;
  grid-template-columns: 38px 38px minmax(0, 1fr) 58px 50px;
  gap: 6px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .995), rgba(248, 252, 255, .985));
  box-shadow:
    0 6px 18px rgba(36, 96, 180, .06),
    inset 0 -1px 0 rgba(219, 234, 255, .52);
}

.ksjb-room-mode .ksjb-live-back {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(188, 211, 241, .72);
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
  box-shadow:
    0 8px 18px rgba(33, 78, 139, .12),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.ksjb-room-mode .ksjb-live-back span {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-back span::before,
.ksjb-room-mode .ksjb-live-back span::after {
  background: transparent;
}

.ksjb-room-mode .ksjb-live-back span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 9px;
  height: 9px;
  border: 0 solid #111827;
  border-bottom-width: 2.5px;
  border-left-width: 2.5px;
  border-radius: 1.5px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-live-back span::after {
  display: none;
}

.ksjb-room-mode .ksjb-live-anchor-avatar {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, .98);
  box-shadow:
    0 7px 16px rgba(22, 119, 255, .14),
    0 0 0 1px rgba(206, 226, 255, .72);
}

.ksjb-room-mode .ksjb-live-anchor-avatar img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-online {
  width: 50px;
  min-width: 50px;
  height: 34px;
  padding-top: 3px;
  border: 1px solid rgba(214, 229, 248, .72);
  background: linear-gradient(180deg, rgba(246, 250, 255, .98), rgba(235, 244, 255, .98));
  box-shadow:
    0 7px 16px rgba(48, 102, 174, .08),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-room-header {
    grid-template-columns: 36px 36px minmax(0, 1fr) 54px 46px;
    gap: 5px;
  }

  .ksjb-room-mode .ksjb-live-back {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-anchor-avatar,
  .ksjb-room-mode .ksjb-live-anchor-avatar img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-online {
    width: 46px;
    min-width: 46px;
    height: 32px;
    padding-top: 2px;
  }
}

/* 20260609 live-room-ui165-end: make pinned marketing copy readable. */
.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 6px;
  margin-bottom: 7px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  height: 60px;
  min-height: 60px;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  column-gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(116, 184, 255, .52);
  background:
    radial-gradient(circle at 96% 50%, rgba(104, 182, 255, .17) 0, rgba(104, 182, 255, 0) 44px),
    linear-gradient(180deg, rgba(249, 253, 255, .995), rgba(232, 246, 255, .985));
  box-shadow:
    0 8px 18px rgba(36, 113, 205, .09),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
  width: 38px;
  height: 38px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card div,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card div {
  gap: 2px;
  align-content: center;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
  display: -webkit-box;
  max-width: 100%;
  color: #2a3a52;
  font-size: 11.6px;
  font-weight: 820;
  line-height: 14px;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  width: 28px;
  height: 28px;
  opacity: .76;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards {
    gap: 6px;
    margin-bottom: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    height: 60px;
    min-height: 60px;
    grid-template-columns: 36px minmax(0, 1fr) 26px;
    column-gap: 7px;
    padding: 7px 9px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card i img,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-icon img {
    width: 36px;
    height: 36px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card strong,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card b {
    font-size: 13.2px;
    line-height: 16px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card span,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card span {
    font-size: 11px;
    line-height: 13.5px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 26px;
    height: 26px;
  }
}

/* 20260609 live-room-ui166-end: polish chat nameplates and bubbles. */
.ksjb-room-mode .ksjb-live-chat-card {
  background:
    linear-gradient(180deg, rgba(244, 251, 255, .985), rgba(231, 244, 255, .97));
  border: 1px solid rgba(122, 188, 255, .28);
  box-shadow:
    0 8px 18px rgba(36, 113, 205, .06),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-chat-msg {
  min-height: 47px;
  row-gap: 2px;
}

.ksjb-room-mode .ksjb-live-chat-avatar {
  background: linear-gradient(180deg, rgba(240, 249, 255, .98), rgba(218, 238, 255, .96));
  box-shadow:
    0 7px 14px rgba(36, 113, 205, .16),
    0 0 0 2px rgba(255, 255, 255, .98),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.ksjb-room-mode .ksjb-live-chat-msg b {
  gap: 5px;
  color: #0f7fff;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .68);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
  height: 17px;
  min-height: 17px;
  min-width: 35px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow:
    0 3px 7px rgba(22, 119, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .38);
  font-size: 10px;
  line-height: 15px;
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-guest {
  background: linear-gradient(180deg, #4bb0ff 0%, #1677ff 100%);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-level {
  min-width: 35px;
  background: linear-gradient(180deg, #8fb9ff 0%, #5f91ff 100%);
}

.ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
  width: 14px;
  height: 14px;
  margin-left: 1px;
  box-shadow:
    0 2px 5px rgba(45, 65, 110, .16),
    0 0 0 1px rgba(255, 255, 255, .9);
}

.ksjb-room-mode .ksjb-live-chat-msg > span {
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(210, 228, 249, .72);
  border-radius: 15px 15px 15px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(249, 252, 255, .99));
  box-shadow:
    0 6px 13px rgba(45, 108, 190, .075),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  color: #253750;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.22;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-chat-msg {
    min-height: 48px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b {
    gap: 4px;
    font-size: 12px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge {
    height: 16px;
    min-height: 16px;
    min-width: 32px;
    padding: 0 5px;
    font-size: 9.3px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-user-badge.is-level {
    min-width: 33px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg b .ksjb-live-flag {
    width: 13px;
    height: 13px;
  }

  .ksjb-room-mode .ksjb-live-chat-msg > span {
    min-height: 28px;
    padding: 5px 11px;
    font-size: 13px;
  }
}

/* 20260609 live-room-ui167-end: polish bottom composer surface. */
.ksjb-room-mode .ksjb-live-room-input {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .995), rgba(246, 251, 255, .99));
  border-top: 1px solid rgba(151, 199, 255, .2);
  box-shadow:
    0 -10px 22px rgba(35, 108, 198, .085),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-room-input input {
  border: 1px solid rgba(177, 211, 250, .9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 251, 255, .99));
  box-shadow:
    0 5px 12px rgba(45, 108, 190, .055),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  color: #1e3048;
  font-weight: 820;
}

.ksjb-room-mode .ksjb-live-room-input input::placeholder {
  color: #95a8c1;
  font-weight: 820;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn {
  border: 1px solid rgba(197, 219, 246, .92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .995), rgba(244, 249, 255, .99));
  box-shadow:
    0 6px 14px rgba(45, 108, 190, .09),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  opacity: .96;
  filter: drop-shadow(0 2px 4px rgba(54, 90, 140, .08));
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  background:
    linear-gradient(135deg, #6abaff 0%, #2e8dff 46%, #1677ff 100%),
    #1677ff;
  box-shadow:
    0 10px 20px rgba(22, 119, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  letter-spacing: 0;
}

/* 20260609 live-room-ui168-end: align tabs, notice and promo rhythm. */
.ksjb-room-mode .ksjb-room-tabs-wide {
  height: 49px;
  min-height: 49px;
  padding: 0 10px;
  border-top: 1px solid rgba(231, 241, 254, .92);
  border-bottom: 1px solid rgba(222, 237, 254, .96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 252, 255, .99));
  box-shadow:
    0 7px 16px rgba(54, 117, 194, .045),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.ksjb-room-mode .ksjb-room-tabs-wide button {
  height: 49px;
  min-width: 56px;
  padding: 0 9px;
  color: #1d2d43;
  font-size: 15.8px;
  font-weight: 900;
  line-height: 49px;
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.ksjb-room-mode .ksjb-room-tabs-wide button.is-active::after {
  width: 32px;
  height: 4px;
  bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #56b4ff, #1677ff);
  box-shadow: 0 4px 8px rgba(22, 119, 255, .22);
}

.ksjb-room-mode .ksjb-room-panel {
  padding-top: 10px;
  padding-bottom: 76px;
  background:
    linear-gradient(180deg, rgba(246, 251, 255, .98), rgba(235, 247, 255, .96));
}

.ksjb-room-mode .ksjb-live-notice {
  height: 40px;
  margin-bottom: 8px;
  border: 1px solid rgba(129, 193, 255, .36);
  border-radius: 15px;
  background:
    radial-gradient(circle at 0% 0%, rgba(104, 182, 255, .2), rgba(104, 182, 255, 0) 72px),
    linear-gradient(180deg, rgba(245, 251, 255, .99), rgba(232, 245, 255, .985));
  box-shadow:
    0 7px 16px rgba(36, 113, 205, .075),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-live-notice span {
  color: #1677ff;
  font-size: 12.6px;
  font-weight: 900;
}

.ksjb-room-mode .ksjb-live-notice img {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-live-notice img:last-child {
  width: 13px;
  height: 13px;
  opacity: .78;
}

.ksjb-room-mode .ksjb-live-promo {
  height: 55px;
  margin-bottom: 9px;
  border-radius: 15px;
  box-shadow:
    0 10px 19px rgba(255, 122, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.ksjb-room-mode .ksjb-live-promo-gift {
  width: 48px;
  height: 48px;
  margin-left: 5px;
}

.ksjb-room-mode .ksjb-live-promo strong {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 14.2px;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-live-promo span {
  font-size: 12px;
  line-height: 15px;
}

.ksjb-room-mode .ksjb-live-promo button {
  width: 68px;
  height: 34px;
  min-width: 68px;
  border-radius: 999px;
}

.ksjb-room-mode .ksjb-live-pinned-cards {
  gap: 7px;
  margin-bottom: 9px;
}

.ksjb-room-mode .ksjb-live-chat-card {
  border-radius: 15px;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-tabs-wide {
    padding: 0 8px;
  }

  .ksjb-room-mode .ksjb-room-tabs-wide button {
    min-width: 54px;
    padding: 0 7px;
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-live-notice {
    height: 39px;
    margin-bottom: 7px;
  }

  .ksjb-room-mode .ksjb-live-notice span {
    font-size: 11.8px;
  }

  .ksjb-room-mode .ksjb-live-promo {
    height: 54px;
    margin-bottom: 8px;
  }

  .ksjb-room-mode .ksjb-live-promo-gift {
    width: 44px;
    height: 44px;
  }

  .ksjb-room-mode .ksjb-live-promo strong {
    font-size: 12.8px;
    line-height: 17px;
  }

  .ksjb-room-mode .ksjb-live-promo span {
    font-size: 11.2px;
    line-height: 14px;
  }

  .ksjb-room-mode .ksjb-live-promo button {
    width: 64px;
    min-width: 64px;
    height: 32px;
  }
}

/* 20260609 live-room-ui169-end: tune back button, pinned speaker and private tab order. */
.ksjb-room-mode .ksjb-live-back {
  transform: translateX(-7px);
}

.ksjb-room-mode .ksjb-live-back:active {
  transform: translateX(-7px) scale(.96);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  justify-self: end;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  opacity: .58;
  object-fit: contain;
  filter:
    drop-shadow(0 3px 7px rgba(40, 119, 210, .12))
    saturate(1.02);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card .ksjb-live-card-deco {
  width: 22px;
  height: 22px;
  margin-right: 2px;
  opacity: .58;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  margin-right: 3px;
  opacity: .52;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-back {
    transform: translateX(-5px);
  }

  .ksjb-room-mode .ksjb-live-back:active {
    transform: translateX(-5px) scale(.96);
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 20px;
    height: 20px;
    margin-right: 1px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card .ksjb-live-card-deco {
    width: 20px;
    height: 20px;
    margin-right: 1px;
  }
}

/* 20260609 live-room-ui170-end: remove bulky speaker column from pinned cards. */
.ksjb-room-mode .ksjb-live-back {
  transform: translateX(-10px);
}

.ksjb-room-mode .ksjb-live-back:active {
  transform: translateX(-10px) scale(.96);
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  column-gap: 6px;
  padding-right: 8px;
  background:
    linear-gradient(180deg, rgba(249, 253, 255, .995), rgba(232, 246, 255, .985));
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  justify-self: end;
  align-self: center;
  width: 16px;
  height: 16px;
  margin-right: 0;
  opacity: .48;
  transform: translateX(1px);
  filter: drop-shadow(0 2px 4px rgba(40, 119, 210, .1));
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-back {
    transform: translateX(-8px);
  }

  .ksjb-room-mode .ksjb-live-back:active {
    transform: translateX(-8px) scale(.96);
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    column-gap: 5px;
    padding-right: 7px;
  }

  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card .ksjb-live-card-deco,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
    width: 14px;
    height: 14px;
  }
}

/* 20260609 live-room-ui171-end: hide abnormal decorative speakers in pinned cards. */
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
  grid-template-columns: 40px minmax(0, 1fr);
  padding-right: 12px;
}

.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card .ksjb-live-card-deco,
.ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card .ksjb-live-card-deco {
  display: none;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-official-card,
  .ksjb-room-mode .ksjb-live-pinned-cards .ksjb-live-system-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-right: 10px;
  }
}

/* 20260609 live-room-ui172-end: hide orange new-user promo banner. */
.ksjb-room-mode .ksjb-live-promo {
  display: none !important;
}

/* 20260609 live-room-ui173-end: keep AliPlayer as the only immersive player chrome. */
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player,
.ksjb-live-player-card.is-aliplayer-player {
  position: relative;
  overflow: hidden;
  background: #03070e;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 9;
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  height: 64px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 18px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-left,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  pointer-events: auto;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-back,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-home,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-cast,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-back,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-home,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-cast {
  display: inline-grid;
  place-items: center;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 18, 30, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 8px 20px rgba(0, 0, 0, .2);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .36);
  pointer-events: auto;
  touch-action: manipulation;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-back,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-cast,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-back,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-cast {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-back span,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-back span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-back span::before,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-back span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 11px;
  height: 11px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-home,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-home {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  padding: 0 12px 0 10px;
  font: inherit;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-home svg,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-cast svg,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-home svg,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-cast svg {
  display: block;
  width: 18px;
  height: 18px;
  color: currentColor;
  fill: none;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-home em,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-home em {
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-cast,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-cast {
  margin-left: auto;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-room-live,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-match,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-heat,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-mode-toggle,
.ksjb-live-player-card.is-aliplayer-player .ksjb-room-live,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-match,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-heat,
.ksjb-live-player-card.is-aliplayer-player .ksjb-player-mode-toggle {
  display: none !important;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-controls {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 9;
  display: flex;
  min-height: 60px;
  height: auto;
  align-items: center;
  gap: 8px;
  padding: 13px 12px 12px;
  border-radius: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: auto;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls button,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-controls button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(10, 18, 30, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls svg,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-controls svg {
  width: 18px;
  height: 18px;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-live,
.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-viewers,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-live,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-viewers {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  height: 28px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .36);
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-live,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-live {
  gap: 5px;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-live i,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-live i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff385c;
  box-shadow: 0 0 0 3px rgba(255, 56, 92, .16);
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-spacer,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-spacer {
  display: block;
  flex: 1 1 auto;
  min-width: 4px;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-center-play,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  color: #162235;
  background: rgba(255, 255, 255, .92);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transform: translate(-50%, -50%);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
  touch-action: manipulation;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-center-play svg,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-center-play svg {
  width: 25px;
  height: 25px;
  margin-left: 3px;
  fill: currentColor;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player.is-playing .ksjb-ali-center-play,
.ksjb-live-player-card.is-aliplayer-player.is-playing .ksjb-ali-center-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
  pointer-events: none;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-quality-button,
.ksjb-live-player-card.is-aliplayer-player .ksjb-ali-quality-button {
  min-width: 56px;
  height: 34px !important;
  padding: 0 10px !important;
  border-color: rgba(105, 166, 255, .78) !important;
  background: rgba(10, 18, 30, .38) !important;
}

.ksjb-room-mode .ksjb-room-player.is-controls-hidden .ksjb-player-top,
.ksjb-live-player-card.is-controls-hidden .ksjb-player-top {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.ksjb-room-mode .ksjb-room-player.is-controls-hidden .ksjb-ali-controls,
.ksjb-live-player-card.is-controls-hidden .ksjb-ali-controls {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.ksjb-room-mode .ksjb-room-player.is-paused .ksjb-player-top,
.ksjb-room-mode .ksjb-room-player.is-paused .ksjb-ali-controls,
.ksjb-live-player-card.is-paused .ksjb-player-top,
.ksjb-live-player-card.is-paused .ksjb-ali-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-player-top {
    height: 58px;
    padding: 8px 10px 16px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-back,
  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-cast,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-back,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-cast {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-top-home,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-player-top-home {
    height: 34px;
    padding: 0 10px 0 9px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-ali-controls {
    gap: 5px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls button,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-ali-controls button {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-viewers,
  .ksjb-live-player-card.is-aliplayer-player .ksjb-ali-viewers {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 20260609 live-room-ui174-end: move anchor metadata into a floating card below the player. */
.ksjb-room-mode .ksjb-room-page {
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  overflow-x: hidden;
  padding: 0 0 calc(76px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(232, 243, 255, .98), rgba(245, 250, 255, .98) 36%, rgba(238, 248, 255, .98));
}

.ksjb-room-mode .ksjb-live-room-header {
  display: none !important;
}

.ksjb-room-mode .ksjb-room-player {
  width: 100% !important;
  aspect-ratio: auto;
  height: 330px;
  min-height: 330px;
  margin: 0 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-player-poster {
  opacity: .42;
  filter: saturate(1.04) contrast(1.05);
}

.ksjb-room-mode .ksjb-room-info-card {
  position: relative;
  z-index: 12;
  display: grid;
  box-sizing: border-box;
  gap: 12px;
  margin: 8px 10px 0;
  border: 1px solid rgba(226, 240, 255, .9);
  border-radius: 24px;
  padding: 12px 12px 10px;
  background:
    radial-gradient(circle at 96% 16%, rgba(103, 180, 255, .18), rgba(103, 180, 255, 0) 108px),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 252, 255, .94));
  box-shadow:
    0 18px 34px rgba(40, 113, 205, .16),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  overflow: hidden;
}

.ksjb-room-mode .ksjb-room-info-main {
  display: grid;
  grid-template-columns: 58px minmax(92px, 1fr) minmax(166px, 190px);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  min-width: 0;
}

.ksjb-room-mode .ksjb-room-info-avatar,
.ksjb-room-mode .ksjb-room-info-avatar img {
  width: 58px;
  height: 58px;
  border-radius: 999px;
}

.ksjb-room-mode .ksjb-room-info-avatar {
  display: block;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .96);
  box-shadow:
    0 9px 18px rgba(50, 111, 190, .18),
    0 0 0 1px rgba(188, 218, 255, .78);
}

.ksjb-room-mode .ksjb-room-info-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ksjb-room-mode .ksjb-room-info-copy strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
  line-height: 22px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-info-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksjb-room-mode .ksjb-room-info-copy strong > em,
.ksjb-room-mode .ksjb-room-info-copy strong > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 999px;
  padding: 0 7px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  line-height: 22px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-info-copy strong > em {
  color: #1677ff;
  border: 1px solid rgba(90, 166, 255, .42);
  background: linear-gradient(180deg, rgba(240, 248, 255, .98), rgba(221, 239, 255, .96));
}

.ksjb-room-mode .ksjb-room-info-copy strong > i {
  color: #fff;
  background: linear-gradient(135deg, #75bdff, #2f8dff);
}

.ksjb-room-mode .ksjb-room-info-copy span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  color: #1e3048;
  font-size: 14px;
  font-weight: 850;
  line-height: 18px;
}

.ksjb-room-mode .ksjb-room-info-copy span b {
  font-size: 15px;
  line-height: 1;
}

.ksjb-room-mode .ksjb-room-info-follow {
  height: 34px;
  min-width: 72px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #68b6ff 0%, #1677ff 100%);
  box-shadow:
    0 10px 20px rgba(22, 119, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .26);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-match-pill {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 8px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  border: 1px solid rgba(229, 240, 255, .95);
  border-radius: 20px;
  padding: 7px 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(242, 249, 255, .96));
  box-shadow:
    0 9px 18px rgba(50, 111, 190, .08),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.ksjb-room-mode .ksjb-room-match-pill > span {
  display: grid;
  grid-row: 1 / 3;
  gap: 4px;
  min-width: 0;
  color: #566781;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.1;
}

.ksjb-room-mode .ksjb-room-match-pill > span b,
.ksjb-room-mode .ksjb-room-match-pill > span em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-match-pill strong {
  display: grid;
  grid-template-columns: 20px minmax(36px, auto) 20px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #101c2f;
  font-size: 16px;
  font-weight: 950;
  line-height: 22px;
}

.ksjb-room-mode .ksjb-room-match-pill strong i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 999px;
  color: #1677ff;
  background: linear-gradient(180deg, #eef7ff, #dceeff);
  box-shadow: inset 0 0 0 1px rgba(135, 190, 255, .42);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}

.ksjb-room-mode .ksjb-room-match-pill small {
  display: flex;
  justify-content: center;
  gap: 6px;
  color: #1677ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 15px;
  white-space: nowrap;
}

.ksjb-room-mode .ksjb-room-match-pill small em {
  font-style: normal;
}

.ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 52px;
  min-height: 52px;
  margin: 0;
  border: 0;
  border-radius: 18px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 7px 16px rgba(54, 117, 194, .045);
  scrollbar-width: none;
}

.ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide::-webkit-scrollbar {
  display: none;
}

.ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide button {
  flex: 0 0 auto;
  min-width: 54px;
  height: 52px;
  padding: 0 8px;
  color: #1d2d43;
  font-size: 15.6px;
  font-weight: 900;
  line-height: 52px;
}

.ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide button.is-active {
  color: #1677ff;
}

.ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide button.is-active::after {
  bottom: 3px;
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #56b4ff, #1677ff);
}

.ksjb-room-mode .ksjb-room-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  padding: 0 10px 76px;
  background:
    linear-gradient(180deg, rgba(246, 251, 255, .98), rgba(235, 247, 255, .96));
}

.ksjb-room-mode .ksjb-live-pinned-cards {
  display: none !important;
}

.ksjb-room-mode .ksjb-live-room-input {
  box-sizing: border-box;
  right: 0;
  left: 0;
  transform: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px 40px 64px;
  gap: 7px;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.ksjb-room-mode .ksjb-live-room-input input {
  min-width: 0;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
.ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
  width: 40px;
  min-width: 40px;
  height: 40px;
}

.ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
  width: 64px;
  min-width: 64px;
  height: 42px;
  padding: 0;
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-player {
    height: 292px;
    min-height: 292px;
  }

  .ksjb-room-mode .ksjb-room-info-card {
    margin-right: 8px;
    margin-left: 8px;
    border-radius: 22px;
    padding: 10px 10px 9px;
  }

  .ksjb-room-mode .ksjb-room-info-main {
    grid-template-columns: 50px minmax(80px, 1fr) minmax(138px, 150px);
    gap: 8px;
  }

  .ksjb-room-mode .ksjb-room-info-avatar,
  .ksjb-room-mode .ksjb-room-info-avatar img {
    width: 50px;
    height: 50px;
  }

  .ksjb-room-mode .ksjb-room-info-copy strong {
    font-size: 17px;
  }

  .ksjb-room-mode .ksjb-room-info-copy strong > i {
    display: none;
  }

  .ksjb-room-mode .ksjb-room-info-follow {
    min-width: 64px;
    height: 32px;
    padding: 0 11px;
    font-size: 12.5px;
  }

  .ksjb-room-mode .ksjb-room-match-pill {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 50px;
    border-radius: 16px;
    padding: 6px 7px;
  }

  .ksjb-room-mode .ksjb-room-match-pill > span {
    font-size: 10px;
  }

  .ksjb-room-mode .ksjb-room-match-pill strong {
    grid-template-columns: 18px minmax(34px, auto) 18px;
    gap: 3px;
    font-size: 15px;
  }

  .ksjb-room-mode .ksjb-room-match-pill strong i {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .ksjb-room-mode .ksjb-room-match-pill small {
    gap: 4px;
    font-size: 11px;
  }

  .ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide {
    height: 48px;
    min-height: 48px;
    padding: 0 6px;
  }

  .ksjb-room-mode .ksjb-room-info-card .ksjb-room-tabs-wide button {
    min-width: 48px;
    height: 48px;
    padding: 0 6px;
    font-size: 13.8px;
    line-height: 48px;
  }

  .ksjb-room-mode .ksjb-live-room-input {
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px 54px;
    gap: 5px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn,
  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-icon-btn img {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .ksjb-room-mode .ksjb-live-room-input .ksjb-live-send-btn {
    width: 54px;
    min-width: 54px;
    height: 38px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .ksjb-room-mode .ksjb-room-info-main {
    grid-template-columns: 50px minmax(80px, 1fr) minmax(138px, 150px);
    gap: 8px;
  }

  .ksjb-room-mode .ksjb-room-info-avatar,
  .ksjb-room-mode .ksjb-room-info-avatar img {
    width: 50px;
    height: 50px;
  }

  .ksjb-room-mode .ksjb-room-match-pill {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 54px;
    padding: 7px 8px;
  }
}

@media (max-width: 430px) {
  .ksjb-room-mode .ksjb-room-info-copy strong > i {
    display: none;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls {
    gap: 4px;
    padding-right: 6px;
    padding-left: 6px;
    overflow: hidden;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls button {
    width: 29px;
    min-width: 29px;
    height: 29px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-live,
  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-viewers {
    font-size: 10.5px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-viewers {
    max-width: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-quality-button {
    width: auto;
    min-width: 50px;
    padding-right: 6px;
    padding-left: 6px;
  }
}

@media (max-width: 380px) {
  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls {
    gap: 3px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-controls button {
    width: 27px;
    min-width: 27px;
    height: 27px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-quality-button {
    min-width: 47px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .ksjb-room-mode .ksjb-room-player.is-aliplayer-player .ksjb-ali-viewers {
    max-width: 58px;
  }
}