:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #fff;
  --surface-raised: #fff;
  --surface-soft: #f1f3f6;
  --surface-muted: #e8ebf0;
  --header-bg: #fffffff0;
  --nav-bg: #fffffff5;
  --input-bg: #f1f2f4;
  --hover-bg: #f6f7f9;
  --overlay-bg: #080a0fa6;
  --surface-dark: #17181d;
  --text: #17181c;
  --muted: #868b96;
  --line: #eceef2;
  --accent: #ff3158;
  --accent-soft: #fff0f3;
  --action-bg: linear-gradient(105deg, #d31f4b, #ad173b);
  --action-solid: #d31f4b;
  --action-fg: #fff;
  --disabled-bg: #e8ebf0;
  --disabled-fg: #59616e;
  --gold: #f3c878;
  --shadow: 0 14px 42px #151b2b29, 0 2px 8px #151b2b0a;
  --page-gradient: linear-gradient(180deg, #f7f9ff 0, #fff 390px);
  --shorts-page-bg: #eef0f4;
  --creator-bg: #fff;
  --creator-text: #17181c;
  --creator-muted: #17181c9e;
  --creator-line: #17181c1a;
  --creator-nav-bg: #ffffffeb;
  --nav-height: 68px;
  --bottom-nav-card-height: 64px;
  --bottom-promotion-gap: 8px;
  --bottom-promotion-anchor: calc(
    var(--bottom-nav-card-height) + 3px + env(safe-area-inset-bottom, 0px)
  );
  --bottom-promotion-bar-space: 0px;
  --bottom-promotion-prompt-space: 0px;
  --radius: 16px;
  font-family:
    Inter,
    PingFang SC,
    Microsoft YaHei,
    sans-serif;
}

/* Disable document-edge rubber-band/pull-to-refresh outside the short-video
   feed. The short feed is its own scroll container and keeps its existing
   vertical swipe and scroll-snap behavior. */
html,
body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

.shorts-feed {
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
}
:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --bg: #0b0d12;
  --surface: #12151b;
  --surface-raised: #181c24;
  --surface-soft: #20252e;
  --surface-muted: #2a303b;
  --header-bg: #0d0f14f0;
  --nav-bg: #11141af5;
  --input-bg: #20242c;
  --hover-bg: #20252e;
  --overlay-bg: #020305c2;
  --surface-dark: #08090c;
  --text: #f3f5f8;
  --muted: #969eac;
  --line: #292e38;
  --accent: #ff4a6b;
  --accent-soft: #ff4a6b24;
  --action-bg: linear-gradient(105deg, #d92b54, #b91a42);
  --action-solid: #d92b54;
  --action-fg: #fff;
  --disabled-bg: #2a303b;
  --disabled-fg: #c4cbd6;
  --gold: #f2c66f;
  --shadow: 0 16px 46px #00000061, 0 2px 8px #0000002e;
  --page-gradient: linear-gradient(180deg, #11151e 0, #0b0d12 390px);
  --shorts-page-bg: #000;
  --creator-bg: #0c0d11;
  --creator-text: #eef0f5;
  --creator-muted: #eef0f5ad;
  --creator-line: #ffffff14;
  --creator-nav-bg: #0c0d11e6;
}
* {
  box-sizing: border-box;
  touch-action: pan-x pan-y;
}
html {
  scroll-behavior: smooth;
}
body,
html {
  background: var(--bg);
}
body {
  color: var(--text);
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
}
button:disabled {
  cursor: not-allowed;
  opacity: 1;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9px;
  display: block;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--premium-focus-ring, #8d1740);
  outline-offset: 3px;
}
:where(a, button, input, textarea, select, [tabindex]):focus:not(
    :focus-visible
  ) {
  outline: none;
}
.app-shell {
  min-height: 100dvh;
  color: var(--text);
  background: var(--bg);
  isolation: isolate;
}
.page-with-nav {
  padding-bottom: calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
}
.app-header-stack {
  z-index: 30;
  padding-top: var(--video-cms-safe-top, env(safe-area-inset-top, 0));
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
}
.app-header-stack:before {
  content: "";
  z-index: 31;
  height: max(1px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)));
  pointer-events: none;
  background: var(--bg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.app-topbar {
  z-index: 30;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #ebedf1d1;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  width: min(100%, 1180px);
  min-height: 62px;
  margin: 0 auto;
  padding: 9px 16px;
  display: grid;
  position: relative;
  top: 0;
}
.brand {
  white-space: nowrap;
  min-width: 0;
  box-shadow: none;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 900;
  display: inline-flex;
  overflow: hidden;
}
.brand > span:last-child {
  text-overflow: ellipsis;
  overflow: hidden;
}
.brand-mark {
  color: #fff;
  background: linear-gradient(145deg, #ff274f, #ff6f3d);
  border-radius: 11px;
  place-items: center;
  display: grid;
}
.brand-logo-image,
.brand-mark {
  width: 35px;
  height: 35px;
  box-shadow: none;
}
.brand-logo-image {
  -o-object-fit: contain;
  object-fit: contain;
  background: 0 0;
  border: 0;
  border-radius: 0;
}
.site-announcement {
  color: #7a4d12;
  background: #fff6e7;
  align-items: center;
  gap: 8px;
  width: min(100%, 1180px);
  min-height: 27px;
  margin: 0 auto;
  padding: 5px 16px;
  font-size: 10px;
  display: flex;
}
.site-announcement span {
  color: #fff;
  background: #e89422;
  border-radius: 5px;
  flex: none;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 800;
}
.site-announcement p {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}
.search-entry {
  width: min(100%, 360px);
  min-width: 0;
  height: 38px;
  color: var(--muted);
  background: var(--input-bg);
  border: 1px solid #0000;
  border-radius: 19px;
  justify-self: center;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
  display: flex;
}
.search-entry:focus-within {
  border-color: #ff315852;
  box-shadow: 0 0 0 3px #ff315817;
}
.search-entry svg {
  width: 20px;
  height: 20px;
}
.message-entry svg,
.theme-entry svg {
  width: 17px;
  height: 17px;
}
.search-entry span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.search-entry input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: 0 0;
  border: 0;
  outline: 0;
}
.catalog-search {
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}
.catalog-search input {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
}
.catalog-search button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 20px;
  padding: 10px 18px;
}
.topbar-actions {
  flex: none;
  justify-self: end;
  align-items: center;
  gap: 8px;
  width: max-content;
  display: flex;
}
.topbar-actions > :is(.app-download-entry, .theme-entry, .message-entry) {
  flex: 0 0 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
}
.app-download-entry {
  color: #1f5cae;
  background: #edf4ff;
  border-radius: 10px;
  grid-template-rows: 18px auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 3px 0 2px;
  display: grid;
}
.app-download-entry svg {
  width: 17px;
  height: 17px;
}
.app-download-entry span {
  letter-spacing: 0.03em;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}
.theme-entry {
  color: #5b38b5;
  cursor: pointer;
  background: #f1edff;
  border: 0;
  border-radius: 10px;
  grid-template-rows: 18px auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 3px 0 2px;
  display: grid;
}
.theme-entry span {
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}
:root[data-theme="dark"] .theme-entry {
  color: #ffd36d;
  background: #ffcd5b1f;
}
.message-entry {
  color: #a91e45;
  background: #fff0f4;
  border: 0;
  border-radius: 10px;
  grid-template-rows: 18px auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 3px 0 2px;
  display: grid;
  position: relative;
}
.message-entry > span {
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}
:is(.app-download-entry, .theme-entry, .message-entry) {
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    background 0.18s;
  box-shadow:
    0 3px 9px #262d3b12,
    inset 0 0 0 1px #2d364709;
}
:is(.app-download-entry, .theme-entry, .message-entry):hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 12px #262d3b1a,
    inset 0 0 0 1px #2d36470d;
}
:is(.app-download-entry, .theme-entry, .message-entry):focus-visible {
  outline-offset: 2px;
  outline: 3px solid #ff31582e;
}
.message-entry > b {
  z-index: 1;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: #ef3f63;
  border: 1px solid #fff;
  border-radius: 999px;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: -3px;
  right: -3px;
}
.notification-dot {
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 4px;
  right: 4px;
}
.bottom-nav {
  z-index: 2147483000;
  bottom: calc(10px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(var(--green-nav-count, 5), minmax(0, 1fr));
  width: min(100% - 24px, 720px);
  min-height: var(--bottom-nav-card-height);
  background: var(--nav-bg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  pointer-events: auto;
  touch-action: pan-x pan-y;
  border: 1px solid #e2e5ecf5;
  border-radius: 22px;
  padding: 5px;
  display: grid;
  position: fixed;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%);
}
.bottom-nav a {
  color: #8c919b;
  pointer-events: auto;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  font-size: 11px;
  font-weight: 600;
  transition:
    color 0.18s,
    background 0.18s,
    transform 0.18s;
  display: flex;
  position: relative;
}
.bottom-nav a > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding-inline: 3px;
  overflow: hidden;
}
.bottom-nav a:hover {
  background: var(--hover-bg);
}
.bottom-nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.bottom-nav a:active {
  transform: scale(0.92);
}
.nav-icon {
  border-radius: 12px;
  place-items: center;
  width: 29px;
  height: 29px;
  display: grid;
  position: relative;
}
.nav-icon svg {
  width: 23px;
  height: 23px;
}
.bottom-nav a.active .nav-icon {
  background: 0 0;
}
:root[data-theme="dark"] .is-immersive .bottom-nav {
  background: #070708fa;
  border-color: #ffffff1a;
  box-shadow: 0 -8px 30px #0000005c;
}
:root[data-theme="dark"] .is-immersive .bottom-nav a {
  color: #ffffff94;
}
:root[data-theme="dark"] .is-immersive .bottom-nav a:hover {
  background: #ffffff14;
}
:root[data-theme="dark"] .is-immersive .bottom-nav a.active {
  color: #fff;
  background: #ffffff21;
}
:root[data-theme="dark"] .is-immersive .bottom-nav a.active .nav-icon {
  background: #ffffff24;
}
.channel-tabs {
  background: var(--surface);
  scrollbar-width: none;
  gap: 22px;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 13px 15px 11px;
  display: flex;
  overflow-x: auto;
}
.channel-tabs::-webkit-scrollbar {
  display: none;
}
.short-preview-row::-webkit-scrollbar {
  display: none;
}
.shorts-feed::-webkit-scrollbar {
  display: none;
}
.channel-tabs :is(button, a) {
  color: #858a94;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  flex: none;
  align-items: center;
  padding: 4px 0;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}
.channel-tabs button.active {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}
.channel-tabs button.active:after {
  background: var(--accent);
  content: "";
  border-radius: 3px;
  width: 16px;
  height: 3px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%);
}
.home-page {
  --home-gutter: var(--page-gutter);
  background: var(--surface);
  width: min(100%, 1180px);
  min-height: 100vh;
  margin: 0 auto;
}
.home-page .app-section {
  padding-block: 14px;
  padding-inline: var(--home-gutter);
}
.home-page > .ad-slot-group {
  width: calc(100% - var(--home-gutter) * 2);
  margin-inline: var(--home-gutter);
}
.home-page .mobile-section-heading {
  margin-bottom: 12px;
}
.home-hero-stack {
  padding: 7px var(--home-gutter) 0;
  gap: 9px;
  display: grid;
}
.home-hero-stack > .ad-slot-group {
  width: 100%;
  margin: 0;
}
.home-featured-video {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.home-taxonomy-panel {
  padding-bottom: 8px !important;
}
.home-taxonomy-row {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  display: grid;
}
.home-taxonomy-row > strong {
  color: #9a9fa8;
  font-size: 12px;
}
.home-taxonomy-row > div {
  scrollbar-width: none;
  gap: 7px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}
.home-taxonomy-row > div::-webkit-scrollbar {
  display: none;
}
.home-taxonomy-row a {
  color: #565c67;
  white-space: nowrap;
  background: #f2f3f6;
  border-radius: 16px;
  flex: none;
  padding: 7px 12px;
  font-size: 12px;
  transition:
    color 0.18s,
    background 0.18s,
    transform 0.18s;
}
.home-taxonomy-row a:hover {
  color: #fff;
  background: var(--accent);
}
.home-taxonomy-row a:active {
  transform: scale(0.95);
}
.app-section,
.simple-app-page {
  padding: 24px 16px;
}
.mobile-section-heading {
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 17px;
  display: flex;
}
.mobile-section-heading h2 {
  margin: 0;
  font-size: 22px;
}
.mobile-section-heading div > span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
  display: block;
}
.mobile-section-heading > a,
.mobile-section-heading > button {
  color: var(--muted);
  background: 0 0;
  border: 0;
  flex: none;
  font-size: 13px;
}
.mobile-section-heading b {
  font-size: 19px;
  font-weight: 400;
}
.home-page .home-section-title {
  letter-spacing: -0.025em;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  line-height: 1.4;
  display: flex;
}
.home-page .home-section-title:before {
  content: "";
  background: linear-gradient(180deg, var(--accent), var(--gold));
  border-radius: 4px;
  flex: none;
  width: 4px;
  height: 18px;
}
.poster-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 12px;
  display: grid;
}
.video-card {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: transform 0.2s;
  display: flex;
}
.poster-wrap {
  aspect-ratio: 2/3;
  background: #eceef1;
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 18px #14192614;
}
.poster-wrap img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.25s;
}
.video-card:active .poster-wrap img {
  transform: scale(1.03);
}
.video-card > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}
.video-card > span {
  color: var(--muted);
  font-size: 11px;
}
.poster-badges {
  z-index: 2;
  gap: 5px;
  display: flex;
  position: absolute;
  top: 8px;
  left: 8px;
}
.badge {
  color: #fff;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #07080bbd;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 10px;
  display: inline-flex;
}
.poster-badges .badge:nth-child(2) {
  background: #e53953db;
}
.poster-quality {
  z-index: 2;
  color: #ffffffeb;
  letter-spacing: 0.05em;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #0c0e14a6;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 14px);
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  bottom: 7px;
  right: 7px;
}
.poster-quality > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.poster-views {
  white-space: nowrap;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  flex: none;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  display: inline-flex;
}
.poster-views svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}
.poster-shade {
  pointer-events: none;
  background: linear-gradient(#0000, #07080c52);
  position: absolute;
  inset: 55% 0 0;
}
.taxonomy-filter {
  scrollbar-width: none;
  align-items: center;
  gap: 7px;
  margin: 9px 0;
  padding-bottom: 2px;
  display: flex;
  overflow-x: auto;
}
.taxonomy-filter::-webkit-scrollbar {
  display: none;
}
.taxonomy-filter button,
.taxonomy-filter strong {
  color: var(--muted);
  flex: none;
  font-size: 12px;
}
.taxonomy-filter button {
  background: var(--surface);
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
}
.taxonomy-filter button.active {
  color: #fff;
  background: var(--accent);
}
.taxonomy-hint {
  color: var(--muted);
  margin: 4px 0 12px;
  font-size: 12px;
}
.play-indicator {
  z-index: 3;
  color: #111;
  opacity: 0;
  background: #ffffffeb;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 12px;
  transition:
    opacity 0.2s,
    transform 0.2s;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%) scale(0.86);
  box-shadow: 0 7px 22px #0003;
}
.play-indicator svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
  display: block;
  transform: translate(1px);
}
.catalog-page {
  width: min(100%, 1180px);
  min-height: 100vh;
  padding: 16px 16px
    calc(var(--nav-height) + 34px + env(safe-area-inset-bottom));
  background: var(--surface);
  margin: 0 auto;
}
.catalog-page .catalog-hero {
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  min-height: 0;
  color: var(--text);
  background: linear-gradient(
    115deg,
    var(--surface-raised) 35%,
    color-mix(in srgb, var(--accent) 5%, var(--surface-soft))
  );
  box-shadow:
    inset 0 1px color-mix(in srgb, var(--surface-raised) 75%, transparent),
    0 5px 18px #14192a09;
  border-radius: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy total" "copy actions";
  align-items: center;
  gap: 12px 32px;
  padding: 20px 26px;
  display: grid;
  position: relative;
  overflow: hidden;
}
.catalog-hero:after {
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--accent) 8%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 8%, transparent) 1px,
      transparent 1px
    );
  background-size: 22px 22px;
  border: 0;
  border-radius: 0;
  width: 55%;
  height: auto;
  inset: 0 0 0 auto;
  -webkit-mask-image: linear-gradient(100deg, #0000, #000);
  mask-image: linear-gradient(100deg, #0000, #000);
}
.catalog-hero:after,
.catalog-hero:before {
  pointer-events: none;
  content: "";
  position: absolute;
}
.catalog-hero:before {
  border-inline: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 4%, transparent)
  );
  width: 90px;
  top: -40px;
  bottom: -40px;
  right: 14%;
  transform: skew(-24deg);
}
.catalog-hero > :is(div, nav) {
  z-index: 1;
  min-width: 0;
  position: relative;
}
.catalog-hero-copy {
  grid-area: copy;
}
.catalog-hero .catalog-kicker {
  color: var(--accent);
  letter-spacing: 0.12em;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 650;
  display: flex;
}
.catalog-kicker i {
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.catalog-hero .catalog-hero-copy h1 {
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  margin: 5px 0;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.2;
}
.catalog-hero .catalog-hero-copy p {
  max-width: 560px;
  color: var(--muted);
  white-space: normal;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  overflow: visible;
}
.catalog-hero .catalog-total {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  flex-direction: row;
  grid-area: total;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  display: flex;
}
.catalog-total-label {
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 11px;
}
.catalog-total-value {
  align-items: baseline;
  gap: 5px;
  display: flex;
}
.catalog-total .catalog-total-value b {
  color: var(--text);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 750;
  line-height: 1.15;
}
.catalog-total small,
.catalog-total-value > span {
  color: var(--muted);
  white-space: nowrap;
  font-size: 10px;
}
.catalog-total-retry {
  color: var(--accent);
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
  font-size: 10px;
}
.catalog-hero-actions {
  grid-area: actions;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}
.catalog-hero-actions > :is(a, button) {
  border: 1px solid var(--line);
  min-height: 40px;
  color: var(--text);
  background: var(--surface-raised);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 550;
  transition:
    background 0.18s,
    border-color 0.18s;
  display: flex;
}
.catalog-hero-actions > .is-current {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: var(--accent-soft);
}
.catalog-hero-actions svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 16px;
  height: 16px;
}
.catalog-hero-actions .catalog-hero-arrow {
  opacity: 0.5;
  width: 12px;
  height: 12px;
  margin-left: 8px;
}
.catalog-hero :is(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (hover: hover) {
  .catalog-hero-actions > :is(a, button):hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: var(--accent-soft);
  }
}
@media (width<=719px) {
  .catalog-page .catalog-hero {
    border-radius: 14px;
    grid-template-areas: "copy total" "actions actions";
    gap: 14px 12px;
    padding: 16px;
  }
  .catalog-hero .catalog-hero-copy h1 {
    font-size: 23px;
  }
  .catalog-hero .catalog-hero-copy p {
    font-size: 11px;
  }
  .catalog-hero .catalog-total {
    border-left: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
    flex-direction: column;
    align-self: start;
    align-items: flex-end;
    gap: 5px;
    padding-left: 12px;
  }
  .catalog-total .catalog-total-value b {
    font-size: 28px;
  }
  .catalog-hero-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    display: grid;
  }
  .catalog-hero-actions > :is(a, button) {
    gap: 5px;
    min-width: 0;
    min-height: 40px;
    padding: 0 5px;
    font-size: 11px;
  }
  .catalog-hero-actions .catalog-hero-arrow {
    display: none;
  }
  .catalog-hero-actions svg {
    width: 14px;
    height: 14px;
  }
}
.catalog-search-bar {
  background: #f7f8fa;
  border: 1px solid #e8eaf0;
  border-radius: 24px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin: 16px 0 12px;
  padding-left: 15px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  display: grid;
}
.catalog-search-bar:focus-within {
  border-color: #ffc1cd;
  box-shadow: 0 0 0 4px #fff1f4;
}
.catalog-search-bar svg {
  color: #9297a1;
  width: 20px;
}
.catalog-search-bar input {
  background: 0 0;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
}
.catalog-pagination {
  color: var(--muted);
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  font-size: 13px;
  display: flex;
}
.catalog-pagination button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  padding: 8px 15px;
}
.catalog-search-bar button {
  color: #fff;
  background: linear-gradient(135deg, #ff3158, #ff5f75);
  border: 0;
  border-radius: 23px;
  align-self: stretch;
  min-width: 78px;
  padding: 0 20px;
  font-weight: 700;
}
.catalog-search-assists {
  gap: 10px;
  margin: -2px 0 14px;
  display: grid;
}
.catalog-search-assists > div {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  display: grid;
}
.catalog-search-assists header {
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  display: flex;
}
.catalog-search-assists header strong {
  color: #666d79;
  white-space: nowrap;
  font-size: 12px;
}
.catalog-search-assists header button {
  color: #9a9faa;
  background: 0 0;
  border: 0;
  min-height: 36px;
  font-size: 11px;
}
.catalog-search-assists > div > span {
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  display: flex;
}
.catalog-search-assists > div > span button {
  color: #565d69;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 999px;
  max-width: 180px;
  min-height: 36px;
  padding: 0 11px;
  overflow: hidden;
}
.catalog-search-assists > div > span button:hover {
  color: var(--accent);
  background: #fff7f8;
  border-color: #ffc4cf;
}
.catalog-type-tabs {
  overscroll-behavior-x: none;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
  align-items: center;
  gap: 27px;
  min-height: 48px;
  padding: 0 4px;
  display: flex;
  overflow: auto hidden;
}
.catalog-filter-row > div::-webkit-scrollbar {
  display: none;
}
.catalog-type-tabs::-webkit-scrollbar {
  display: none;
}
.catalog-type-tabs :is(button, a) {
  color: #777d88;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  flex: none;
  align-items: center;
  height: 48px;
  padding: 0 1px;
  display: inline-flex;
  position: relative;
}
.catalog-type-tabs button.active {
  color: #15171c;
  font-weight: 800;
}
.catalog-type-tabs button.active:after {
  background: var(--accent);
  content: "";
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
}
.catalog-filter-panel {
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  position: relative;
}
.catalog-filter-row {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 39px;
  display: grid;
}
.catalog-filter-row > strong {
  color: #9a9fa8;
  font-size: 12px;
}
.catalog-filter-row > div {
  scrollbar-width: none;
  gap: 5px;
  display: flex;
  overflow-x: auto;
}
.catalog-filter-row button {
  color: #5f6570;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 15px;
  flex: none;
  padding: 6px 11px;
  font-size: 12px;
}
.catalog-filter-row button.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 10px #ff31582e;
}
.catalog-reset {
  color: #8c919b;
  background: #f2f3f5;
  border: 0;
  border-radius: 12px;
  padding: 5px 9px;
  font-size: 11px;
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.catalog-scope-tip {
  color: #68707d;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12px;
  display: flex;
}
.catalog-scope-tip span {
  color: #fff;
  background: #35b978;
  border-radius: 50%;
  place-items: center;
  width: 17px;
  height: 17px;
  font-size: 10px;
  display: grid;
}
.catalog-page > .ad-slot-group {
  width: 100%;
  margin: 13px 0 0;
}
.catalog-page > .ad-slot-group .ad-item {
  background: #fafbfc;
}
.catalog-results {
  padding-top: 24px;
}
.catalog-results > header {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 15px;
  display: flex;
}
.catalog-results > header > div {
  align-items: baseline;
  gap: 9px;
  display: flex;
}
.catalog-results h2 {
  letter-spacing: -0.02em;
  margin: 0;
  font-size: 21px;
}
.catalog-results header span {
  color: #9a9fa8;
  font-size: 11px;
}
.catalog-results > header > .catalog-order {
  background: var(--surface-soft);
  border-radius: 15px;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  height: 29px;
  padding: 3px;
  display: inline-flex;
}
.catalog-order > button {
  height: 23px;
  min-height: 0;
  color: var(--muted);
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 12px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 23px;
}
.catalog-order > button.active {
  color: var(--accent);
  background: var(--surface-raised);
  font-weight: 600;
  box-shadow: 0 1px 3px #14192a1a;
}
.catalog-order > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (hover: hover) {
  .catalog-order > button:not(.active):hover {
    color: var(--text);
  }
}
.catalog-poster-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 23px 15px;
  display: grid;
}
.catalog-skeleton > span {
  aspect-ratio: 2/3;
  background: linear-gradient(100deg, #eef0f3 25%, #f8f9fa 40%, #eef0f3 55%) 0
    0/220% 100%;
  border-radius: 11px;
  animation: 1.35s linear infinite catalog-shimmer;
  display: block;
}
@keyframes catalog-shimmer {
  to {
    background-position-x: -220%;
  }
}
.catalog-empty {
  color: #969ba5;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  display: flex;
}
.catalog-empty > span {
  color: #b3b7bf;
  background: #f4f5f7;
  border-radius: 22px;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 13px;
  font-size: 30px;
  display: grid;
}
.catalog-empty strong {
  color: #4a4f58;
  font-size: 16px;
}
.catalog-empty p {
  margin: 7px 0 15px;
  font-size: 12px;
}
.catalog-empty button {
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  border-radius: 17px;
  padding: 8px 14px;
  font-weight: 700;
}
.feed-ad-slot {
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, #ffffff47, #0000 28%),
    linear-gradient(125deg, #6550d8, #3f70dc);
  border-radius: 15px;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  margin: 2px 16px;
  padding: 17px;
  display: flex;
  overflow: hidden;
}
.feed-ad-slot div {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.feed-ad-slot small {
  color: #ffffffb8;
}
.feed-ad-slot > b {
  color: #4f52b3;
  background: #fff;
  border-radius: 15px;
  flex: none;
  padding: 7px 10px;
  font-size: 11px;
}
.ad-slot-group {
  gap: 7px;
  width: calc(100% - 32px);
  margin: 7px 16px;
  display: grid;
}
.detail-page > .ad-slot-group,
.simple-app-page > .ad-slot-group {
  width: 100%;
  margin-inline: 0;
}
.ad-slot-banner,
.ad-slot-inline {
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  grid-auto-columns: minmax(76%, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
}
.ad-slot-banner::-webkit-scrollbar {
  display: none;
}
.ad-slot-inline::-webkit-scrollbar {
  display: none;
}
.ad-item {
  border: 1px solid var(--line);
  min-width: 0;
  min-height: 68px;
  color: var(--text);
  background: var(--surface-raised);
  text-align: left;
  scroll-snap-align: start;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.ad-item img,
.ad-item video {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 7px;
  flex: none;
  width: 88px;
  height: 50px;
}
.ad-copy {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.ad-copy small,
.ad-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ad-copy small {
  color: var(--muted);
  font-size: 10px;
}
.ad-item > b {
  color: var(--muted);
  flex: none;
  font-size: 11px;
  font-weight: 600;
}
.ad-slot-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ad-slot-grid .ad-item {
  min-height: 0;
  color: var(--text);
  box-shadow: none;
  background: #fff;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0 0 7px;
}
.ad-slot-grid .ad-item img,
.ad-slot-grid .ad-item video {
  aspect-ratio: 1;
  border-radius: 0;
  width: 100%;
  height: auto;
}
.ad-slot-grid .ad-copy {
  text-align: center;
  padding: 0 8px;
}
.ad-slot-grid .ad-item > b {
  display: none;
}
.ad-slot-hero {
  isolation: isolate;
  background: #15171c;
  border-radius: 14px;
  display: block;
  position: relative;
  overflow: hidden;
}
.hero-ad-item {
  border-radius: inherit;
  color: #fff;
  background: #15171c;
  border: 0;
  width: 100%;
  height: clamp(210px, 50vw, 430px);
  padding: 0;
}
.hero-ad-item > img,
.hero-ad-item > video {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
  width: 100%;
  height: 100%;
  transition: transform 5s;
  position: absolute;
  inset: 0;
}
.hero-ad-dots {
  z-index: 3;
  align-items: center;
  gap: 6px;
  display: flex;
  position: absolute;
  bottom: 17px;
  right: 18px;
}
.hero-ad-dots button {
  background: #ffffff80;
  border: 0;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  padding: 0;
  transition:
    width 0.2s,
    background 0.2s;
}
.hero-ad-dots button.active {
  background: #fff;
  width: 19px;
}
.hero-ad-fade-enter-active,
.hero-ad-fade-leave-active {
  transition: opacity 0.28s;
}
.hero-ad-fade-enter-from,
.hero-ad-fade-leave-to {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero-ad-fade-enter-active,
  .hero-ad-fade-leave-active,
  .hero-ad-item > img,
  .hero-ad-item > video {
    transition: none;
  }
}
.home-page > [data-ad-slot="home_feed_banner"] {
  grid-auto-columns: 100%;
  gap: 8px;
  margin-block: 5px;
}
.home-page > [data-ad-slot="home_feed_banner"] .ad-item {
  background: #eceef2;
  border: 0;
  border-radius: 12px;
  width: 100%;
  height: clamp(96px, 22vw, 210px);
  min-height: 0;
  padding: 0;
}
.home-page > [data-ad-slot="home_feed_banner"] .ad-item img,
.home-page > [data-ad-slot="home_feed_banner"] .ad-item video {
  border-radius: inherit;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.home-page > [data-ad-slot="home_feed_banner"] .ad-copy,
.home-page > [data-ad-slot="home_feed_banner"] .ad-item > b {
  display: none;
}
.home-page > [data-ad-slot="home_quick_links"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-block: 7px 4px;
}
.home-page > [data-ad-slot="home_quick_links"] .ad-item {
  min-height: 0;
  box-shadow: none;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
}
.home-page > [data-ad-slot="home_quick_links"] .ad-item img,
.home-page > [data-ad-slot="home_quick_links"] .ad-item video {
  aspect-ratio: 1;
  border-radius: 13px;
  width: min(100%, 56px);
  height: auto;
}
.home-page > [data-ad-slot="home_quick_links"] .ad-copy {
  text-align: center;
  width: 100%;
  padding: 0;
}
.home-page > [data-ad-slot="home_quick_links"] .ad-copy strong {
  font-size: 11px;
  font-weight: 600;
}
.home-page > [data-ad-slot="home_quick_links"] .ad-copy small {
  display: none;
}
.community-page > [data-ad-slot="community_feed_inline"],
.detail-page > [data-ad-slot="video_recommendation_inline"],
.home-page > [data-ad-slot="home_section_inline"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-block: 8px 12px;
  overflow: visible;
}
.community-page > [data-ad-slot="community_feed_inline"] .ad-item,
.detail-page > [data-ad-slot="video_recommendation_inline"] .ad-item,
.home-page > [data-ad-slot="home_section_inline"] .ad-item {
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 8px;
}
.community-page > [data-ad-slot="community_feed_inline"] .ad-item img,
.community-page > [data-ad-slot="community_feed_inline"] .ad-item video,
.detail-page > [data-ad-slot="video_recommendation_inline"] .ad-item img,
.detail-page > [data-ad-slot="video_recommendation_inline"] .ad-item video,
.home-page > [data-ad-slot="home_section_inline"] .ad-item img,
.home-page > [data-ad-slot="home_section_inline"] .ad-item video {
  aspect-ratio: auto;
  border-radius: 6px;
  width: 88px;
  height: 50px;
}
.community-page > [data-ad-slot="community_feed_inline"] .ad-copy,
.detail-page > [data-ad-slot="video_recommendation_inline"] .ad-copy,
.home-page > [data-ad-slot="home_section_inline"] .ad-copy {
  padding: 0;
}
.community-page > [data-ad-slot="community_feed_inline"] .ad-copy small,
.detail-page > [data-ad-slot="video_recommendation_inline"] .ad-copy small,
.home-page > [data-ad-slot="home_section_inline"] .ad-copy small {
  display: block;
}
.ad-slot-short {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #080808;
  width: min(100%, 560px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.ad-slot-short .ad-item {
  background: #080808;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
.ad-slot-short .ad-copy,
.ad-slot-short .ad-item:not(:first-child),
.ad-slot-short .ad-item > b {
  display: none;
}
.ad-slot-short .ad-item img,
.ad-slot-short .ad-item video {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
  width: 100%;
  height: 100%;
}
@media (width<=719px) {
  .ad-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ad-slot-grid .ad-copy strong {
    font-size: 12px;
  }
  .community-page > [data-ad-slot="community_feed_inline"],
  .detail-page > [data-ad-slot="video_recommendation_inline"],
  .home-page > [data-ad-slot="home_section_inline"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .community-page > [data-ad-slot="community_feed_inline"] .ad-item,
  .detail-page > [data-ad-slot="video_recommendation_inline"] .ad-item,
  .home-page > [data-ad-slot="home_section_inline"] .ad-item {
    border-radius: 10px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: 7px;
  }
  .community-page > [data-ad-slot="community_feed_inline"] .ad-item img,
  .community-page > [data-ad-slot="community_feed_inline"] .ad-item video,
  .detail-page > [data-ad-slot="video_recommendation_inline"] .ad-item img,
  .detail-page > [data-ad-slot="video_recommendation_inline"] .ad-item video,
  .home-page > [data-ad-slot="home_section_inline"] .ad-item img,
  .home-page > [data-ad-slot="home_section_inline"] .ad-item video {
    aspect-ratio: auto;
    border-radius: 9px;
    width: 54px;
    height: 54px;
  }
  .community-page > [data-ad-slot="community_feed_inline"] .ad-copy,
  .detail-page > [data-ad-slot="video_recommendation_inline"] .ad-copy,
  .home-page > [data-ad-slot="home_section_inline"] .ad-copy {
    padding: 0;
  }
  .community-page > [data-ad-slot="community_feed_inline"] .ad-copy small,
  .detail-page > [data-ad-slot="video_recommendation_inline"] .ad-copy small,
  .home-page > [data-ad-slot="home_section_inline"] .ad-copy small {
    display: none;
  }
}
.global-floating-ad {
  z-index: 2147482975;
  top: max(
    160px,
    calc(140px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
  );
  width: clamp(92px, 10vw, 124px);
  position: fixed;
  right: max(12px, 50vw - 578px);
}
:is(
  .global-ad-bar:not(:has(.ad-slot-group)),
  .global-floating-ad:not(:has(.ad-slot-group))
) {
  display: none;
}
.global-floating-ad .ad-slot-floating {
  width: 100%;
  margin: 0;
}
.global-floating-ad .ad-item {
  aspect-ratio: 1;
  background: var(--surface-raised);
  border: 1px solid #ffffffb3;
  border-radius: 18px;
  width: 100%;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  box-shadow: 0 12px 28px #1218253d;
}
.global-floating-ad .ad-item img,
.global-floating-ad .ad-item video {
  border-radius: inherit;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.global-floating-ad .ad-copy {
  color: #fff;
  background: linear-gradient(#0000, #04060cb8);
  padding: 20px 7px 7px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.global-floating-ad .ad-copy strong {
  font-size: 10px;
  line-height: 1.25;
  display: block;
}
.global-floating-ad .ad-copy small,
.global-floating-ad .ad-item > b {
  display: none;
}
.global-floating-ad-label {
  color: #fff;
  pointer-events: none;
  background: #05070cad;
  border-radius: 5px;
  padding: 2px 5px;
  font-size: 9px;
  line-height: 1.2;
  position: absolute;
  top: 6px;
  left: 6px;
}
.global-floating-ad-close {
  color: #fff;
  background: #262b35;
  border: 1px solid #fffc;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: -9px;
  right: -9px;
  box-shadow: 0 3px 12px #0000003d;
}
.global-ad-bar {
  z-index: 2147482970;
  bottom: calc(var(--bottom-promotion-anchor) + var(--bottom-promotion-gap));
  border: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: 18px;
  width: min(100% - 24px, 520px);
  padding: 4px 44px 4px 5px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 10px 30px #0f142033;
}
.global-ad-bar .ad-slot-group {
  grid-auto-columns: 100%;
  gap: 0;
  width: 100%;
  margin: 0;
}
.global-ad-bar .ad-item {
  color: #fff;
  background: #1b2030;
  border: 0;
  border-radius: 12px;
  height: 56px;
  min-height: 56px;
  padding: 0;
}
.global-ad-bar .ad-item img,
.global-ad-bar .ad-item video {
  border-radius: inherit;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.global-ad-bar .ad-copy {
  z-index: 1;
  background: linear-gradient(90deg, #050810b3, #0000);
  justify-content: center;
  align-self: stretch;
  max-width: 64%;
  padding: 6px 10px;
  position: relative;
}
.global-ad-bar .ad-copy strong {
  font-size: 11px;
}
.global-ad-bar .ad-copy small,
.global-ad-bar .ad-item > b {
  display: none;
}
.global-ad-close {
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 0;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.popup-ad-layer {
  z-index: 2147483100;
  background: #0000008a;
  place-items: center;
  padding: clamp(18px, 4dvh, 30px);
  display: grid;
  position: fixed;
  inset: 0;
  overflow: auto;
}
.popup-ad-card {
  width: min(100%, 380px);
  max-height: calc(100dvh - 40px);
  position: relative;
}
.popup-ad-close {
  z-index: 3;
  color: #fff;
  background: #24252a;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 24px;
  display: grid;
  position: absolute;
  top: -14px;
  right: -14px;
}
.popup-ad-creative {
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 18px;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: calc(100dvh - 40px);
  padding: 0 0 16px;
  display: flex;
  overflow: auto;
}
.popup-ad-creative img,
.popup-ad-creative video {
  -o-object-fit: contain;
  object-fit: contain;
  background: #101116;
  width: 100%;
  max-height: min(62dvh, 560px);
  display: block;
}
.popup-ad-creative small,
.popup-ad-creative strong {
  margin-inline: 16px;
}
.popup-ad-creative small {
  color: var(--muted);
}
.player-ad-layer {
  z-index: 20;
  background: #000;
  position: absolute;
  inset: 0;
}
.player-ad-main {
  background: #000;
  border: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
.player-ad-main > img,
.player-ad-main > video {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.player-ad-main > span {
  color: #fff;
  text-shadow: 0 2px 7px #000;
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 13px;
  left: 14px;
  right: 14px;
}
.player-ad-skip {
  z-index: 2;
  color: #fff;
  background: #0000009e;
  border: 0;
  border-radius: 18px;
  padding: 7px 12px;
  position: absolute;
  top: 12px;
  right: 12px;
}
.short-preview-row {
  scroll-snap-type: x proximity;
  grid-auto-columns: minmax(130px, 28%);
  grid-auto-flow: column;
  gap: 11px;
  display: grid;
  overflow-x: auto;
}
.short-preview-card {
  aspect-ratio: 9/14;
  scroll-snap-align: start;
  background: #111;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.short-preview-card img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.short-preview-card:after {
  content: "";
  background: linear-gradient(#0000, #000c);
  position: absolute;
  inset: 45% 0 0;
}
.short-preview-card strong {
  z-index: 2;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  overflow: hidden;
}
.short-play {
  z-index: 2;
  color: #fff;
  filter: drop-shadow(0 2px 4px #000);
  position: absolute;
  top: 12px;
  right: 12px;
}
.state-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
  flex-direction: column;
  gap: 9px;
  padding: 24px;
  display: flex;
}
.error-state button {
  border: 0;
  border-radius: 9px;
  width: max-content;
  padding: 8px 13px;
}
.shorts-page {
  z-index: 0;
  inset: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom));
  color: #fff;
  background: var(--shorts-page-bg);
  position: fixed;
  overflow: hidden;
}
.shorts-feed {
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  height: 100%;
  overflow-y: auto;
}
.shorts-feed.shorts-feed-fullscreen-locked {
  overscroll-behavior: none;
  scroll-snap-type: none;
  touch-action: none;
  overflow: hidden;
}
.short-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #070707;
  width: min(100%, 560px);
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.short-card > .hls-video-frame,
.short-card > img {
  background: #000;
}
.short-card > .hls-video-frame,
.short-card > .hls-video-frame .hls-video,
.short-card > img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.short-card.short-card-contained-media > .hls-video-frame .hls-video {
  -o-object-fit: contain;
  object-fit: contain;
}
.short-card:after {
  pointer-events: none;
  content: "";
  background: linear-gradient(#0000, #000000d1);
  position: absolute;
  inset: 42% 0 0;
}
.short-landscape-fullscreen {
  z-index: 10;
  color: #fff;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #101217b8;
  border: 1px solid #ffffff6b;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 7px 24px #00000057;
}
.short-landscape-fullscreen svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 17px;
  height: 17px;
}
.short-landscape-fullscreen:active {
  transform: translate(-50%) scale(0.96);
}
:-webkit-any(
  .short-card.short-card-web-fullscreen .short-landscape-fullscreen,
  .short-card:-webkit-full-screen .short-landscape-fullscreen,
  .short-card:fullscreen .short-landscape-fullscreen
) {
  display: none;
}
:is(
  .short-card.short-card-web-fullscreen .short-landscape-fullscreen,
  .short-card:fullscreen .short-landscape-fullscreen,
  .short-card:fullscreen .short-landscape-fullscreen
) {
  display: none;
}
.short-fullscreen-notice {
  z-index: 21;
  top: max(
    74px,
    calc(var(--video-cms-safe-top, env(safe-area-inset-top, 0px)) + 58px)
  );
  background: #16181de0;
  border-radius: 999px;
  max-width: min(86%, 360px);
  margin: 0;
  padding: 9px 14px;
  font-size: 11px;
  transform: translate(-50%);
  box-shadow: 0 8px 28px #00000047;
}
.short-access-card,
.short-fullscreen-notice {
  color: #fff;
  text-align: center;
  position: absolute;
  left: 50%;
}
.short-access-card {
  z-index: 8;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0c0e14db;
  border: 1px solid #ffffff29;
  border-radius: 18px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100% - 64px, 330px);
  padding: 20px 18px;
  display: flex;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 55px #0000006b;
}
.short-access-card strong {
  font-size: 15px;
  line-height: 1.45;
}
.short-access-card small {
  color: #ffffffa6;
  font-size: 10px;
  line-height: 1.55;
}
.short-access-card button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 16px;
  margin-top: 5px;
  padding: 9px 15px;
  font-size: 10px;
  font-weight: 850;
}
.short-access-card button.secondary {
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #ffffff47;
}
.short-access-actions {
  justify-content: center;
  gap: 8px;
  display: flex;
}
.short-access-loading {
  color: #ffffffbf;
}
.shorts-top {
  z-index: 15;
  width: min(100%, 560px);
  min-height: 72px;
  padding: max(11px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    15px 9px;
  text-shadow:
    0 2px 8px #000,
    0 0 2px #000;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  display: grid;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%);
}
.shorts-top:before {
  z-index: -1;
  pointer-events: none;
  content: "";
  background: linear-gradient(#000000c2, #0000004d 58%, #0000);
  position: absolute;
  inset: 0 0 -24px;
}
.shorts-top > a,
.shorts-top > button {
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #00000094;
  border: 1px solid #ffffff47;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  box-shadow: 0 3px 14px #0000004d;
}
.shorts-top svg {
  width: 23px;
  height: 23px;
}
.shorts-top .short-feed-random-icon {
  vertical-align: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  display: inline-block;
}
.shorts-top > div {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0000007a;
  border: 1px solid #ffffff2e;
  border-radius: 20px;
  justify-content: center;
  justify-self: center;
  gap: 22px;
  width: max-content;
  padding: 2px 15px;
  display: flex;
}
.shorts-top > div button {
  color: #ffffffe0;
  text-shadow: 0 1px 5px #000;
  background: 0 0;
  border: 0;
  padding: 5px 0;
  font-weight: 650;
  position: relative;
}
.shorts-top > div button.active {
  color: #fff;
  font-weight: 800;
}
.shorts-top > div button.active:after {
  content: "";
  background: #fff;
  border-radius: 3px;
  height: 3px;
  position: absolute;
  bottom: -5px;
  left: 22%;
  right: 22%;
}
.short-overlay {
  z-index: 3;
  right: 76px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  pointer-events: none;
  position: absolute;
  left: 16px;
}
.short-author {
  color: #fff;
  pointer-events: auto;
  text-shadow: 0 2px 7px #000;
  background: 0 0;
  border: 0;
  width: max-content;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
}
.short-overlay h1 {
  margin: 9px 0 6px;
  font-size: 16px;
  font-weight: 500;
}
.short-overlay p {
  color: #fffc;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.short-actions {
  z-index: 5;
  gap: 11px;
  width: 50px;
  position: absolute;
  bottom: 57px;
  right: 8px;
}
.short-actions,
.short-actions button {
  flex-direction: column;
  align-items: center;
  display: flex;
}
.short-actions button {
  color: #fff;
  text-shadow: 0 2px 6px #000;
  background: 0 0;
  border: 0;
  justify-content: center;
  gap: 2px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 9px;
}
.short-actions svg {
  filter: drop-shadow(0 2px 4px #000);
  width: 27px;
  height: 27px;
}
.short-actions button.active svg {
  color: #ff4164;
  fill: #ff4164;
}
.short-creator-action {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  min-height: 62px;
  display: flex;
  position: relative;
}
.short-actions .short-avatar-button {
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  display: grid !important;
}
.short-avatar {
  background: linear-gradient(145deg, var(--accent), #ff8a3d);
  border: 2px solid #fff;
  width: 40px;
  height: 40px;
  font-size: 13px;
  display: grid;
}
.short-actions .short-follow-button,
.short-avatar {
  color: #fff;
  border-radius: 50%;
  place-items: center;
  font-weight: 900;
}
.short-actions .short-follow-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  line-height: 1;
  transition:
    transform 0.16s,
    background 0.16s;
  position: relative;
  box-shadow: 0 3px 9px #00000059;
  background: var(--accent) !important;
  border: 2px solid #fff !important;
  padding: 0 !important;
  font-size: 15px !important;
  display: grid !important;
}
.short-follow-button:after {
  content: "";
  position: absolute;
  inset: -8px;
}
.short-follow-button span {
  place-items: center;
  display: grid;
  transform: translateY(-1px);
}
.short-follow-button.followed {
  background: #262a31eb !important;
  font-size: 11px !important;
}
.short-follow-button:active {
  transform: scale(0.9);
}
.detail-toast,
.short-toast {
  z-index: 2147483200;
  bottom: calc(var(--nav-height) + 22px + env(safe-area-inset-bottom));
  color: #fff;
  background: #17191feb;
  border-radius: 18px;
  margin: 0;
  padding: 9px 14px;
  font-size: 11px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 8px 30px #0000003d;
}
.short-sound {
  z-index: 7;
  top: calc(94px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px)));
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  filter: drop-shadow(0 1px 1px #000);
  background: #000000a8;
  border: 1px solid #ffffff57;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
  position: absolute;
  right: 15px;
  box-shadow: 0 3px 14px #0000005c;
}
.short-sound svg {
  width: 20px;
  height: 20px;
}
.short-player-controls {
  z-index: 8;
  min-height: 52px;
  padding: 6px 12px max(6px, env(safe-area-inset-bottom));
  color: #fff;
  text-shadow: 0 1px 4px #000;
  background: linear-gradient(#0000, #000000d6);
  grid-template-columns: 44px auto minmax(60px, 1fr) auto 44px;
  align-items: center;
  gap: 9px;
  display: grid;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.short-player-controls button {
  color: #fff;
  background: 0 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
}
.short-player-controls button:focus-visible {
  outline-offset: -2px;
  background: #ffffff24;
  outline: 2px solid #fff;
}
.short-player-controls button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
  width: 19px;
  height: 19px;
}
.short-player-controls button svg.short-play-symbol {
  fill: currentColor;
  stroke: none;
}
.short-player-controls button {
  transition:
    background 0.16s,
    transform 0.16s;
}
.short-player-controls button:active {
  background: #ffffff1f;
  transform: scale(0.94);
}
.short-player-controls > span {
  color: #ffffffc7;
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 35px;
  font-size: 10px;
  font-weight: 400;
}
.short-player-controls input[type="range"] {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 40px;
  box-shadow: none;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.short-player-controls input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #fffffff0 var(--short-progress, 0),
    #ffffff47 var(--short-progress, 0)
  );
  border-radius: 99px;
  height: 3px;
}
.short-player-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  box-shadow: 0 1px 4px #0000004d;
}
.short-player-controls input[type="range"]::-moz-range-track {
  background: #ffffff47;
  border-radius: 99px;
  height: 3px;
}
.short-player-controls input[type="range"]::-moz-range-progress {
  background: #fffffff0;
  border-radius: 99px;
  height: 3px;
}
.short-player-controls input[type="range"]::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 9px;
  height: 9px;
}
.short-player-controls input[type="range"]:focus-visible {
  outline-offset: 2px;
  border-radius: 8px;
  outline: 1px solid #ffffffbf;
}
.short-player-controls input[type="range"]:disabled {
  cursor: default;
  opacity: 0.5;
}
.short-card:fullscreen {
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}
.shorts-page.shorts-web-fullscreen {
  z-index: 2147483000;
  inset: 0;
}
.shorts-page.shorts-native-fullscreen {
  inset: 0;
}
.short-card.short-card-web-fullscreen {
  z-index: 2147483001;
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  position: fixed;
  inset: 0;
}
/* A short-video fullscreen card must cover the application navigation on
   browser fullscreen, WebKit fullscreen, and the CSS fallback used by
   installed clients. Keep the video portrait unless the source itself is
   landscape; orientation is handled separately by the player bridge. */
body:has(.short-card:fullscreen) .bottom-nav,
body:has(.short-card:-webkit-full-screen) .bottom-nav,
body:has(.short-card-web-fullscreen) .bottom-nav,
body:has(.shorts-web-fullscreen) .bottom-nav,
body:has(.shorts-native-fullscreen) .bottom-nav {
  display: none !important;
}
.shorts-empty {
  color: #ffffffb3;
  height: 100%;
}
.short-loading,
.shorts-empty {
  place-items: center;
  display: grid;
}
.short-loading {
  color: #fff9;
  background: #000;
  height: 54px;
  font-size: 12px;
}
.shorts-error-state {
  text-align: center;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
}
.shorts-error-state strong {
  color: #fff;
  font-size: 17px;
}
.shorts-error-state small {
  color: #ffffff94;
}
.short-load-error button,
.shorts-error-state button {
  color: #fff;
  background: var(--accent);
  border: 1px solid #fff3;
  border-radius: 22px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
}
.short-load-error {
  color: #ffffffb8;
  background: #090909;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  font-size: 12px;
  display: flex;
}
.creator-page {
  width: min(100%, 760px);
  min-height: 100dvh;
  color: var(--creator-text);
  background: var(--creator-bg);
  margin: 0 auto;
}
.creator-nav {
  border-bottom: 1px solid var(--creator-line);
  background: var(--creator-nav-bg);
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 56px;
  padding: 6px 14px;
  display: grid;
  position: relative;
}
.creator-nav > a {
  width: 44px;
  height: 44px;
  color: var(--creator-text);
  background: var(--surface-soft);
  border-radius: 50%;
  place-items: center;
  display: grid;
}
.creator-nav svg {
  width: 22px;
  height: 22px;
}
.creator-nav strong {
  text-align: center;
}
.creator-hero {
  background: radial-gradient(circle at 90% 0, #ff355830, #0000 36%);
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 26px 20px 18px;
  display: grid;
}
.creator-avatar-large {
  background: linear-gradient(145deg, var(--accent), #ff8a3d);
  border: 2px solid #ffffffc7;
  border-radius: 50%;
  place-items: center;
  width: 84px;
  height: 84px;
  font-size: 28px;
  font-weight: 900;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 28px #00000052;
}
.creator-avatar-large img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.creator-identity {
  min-width: 0;
}
.creator-identity h1 {
  margin: 0 0 8px;
  font-size: 24px;
}
.creator-identity p {
  color: var(--creator-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}
.creator-follow {
  border: 1px solid var(--accent);
  color: #fff;
  background: var(--accent);
  border-radius: 17px;
  min-width: 68px;
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 800;
}
.creator-follow.followed {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}
.creator-metrics {
  border-top: 1px solid var(--creator-line);
  border-bottom: 1px solid var(--creator-line);
  grid-template-columns: repeat(3, 1fr);
  margin: 0 20px 22px;
  padding: 16px 0;
  display: grid;
}
.creator-metrics span {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  display: flex;
}
.creator-metrics span + span {
  border-left: 1px solid var(--creator-line);
}
.creator-metrics b {
  font-size: 17px;
}
.creator-metrics small {
  color: var(--creator-muted);
  font-size: 10px;
}
.creator-works {
  padding: 0 12px 24px;
}
.creator-works > header {
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 13px;
  display: flex;
}
.creator-works h2 {
  margin: 0;
  font-size: 16px;
}
.creator-works header span {
  color: var(--creator-muted);
  font-size: 10px;
}
.creator-work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  display: grid;
}
.creator-work-card {
  aspect-ratio: 9/14;
  color: #fff;
  background: #17191f;
  position: relative;
  overflow: hidden;
}
.creator-work-card img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.25s;
}
.creator-work-card:after {
  content: "";
  background: linear-gradient(#0000, #000000e0);
  position: absolute;
  inset: 48% 0 0;
}
.creator-work-card div {
  z-index: 2;
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
}
.creator-work-card small,
.creator-work-card strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}
.creator-work-card strong {
  font-size: 11px;
}
.creator-work-card small {
  color: #ffffffb8;
  margin-top: 4px;
  font-size: 8px;
}
.creator-work-card:hover img {
  transform: scale(1.035);
}
.creator-empty,
.creator-state {
  min-height: 112px;
  color: var(--creator-muted);
  text-align: center;
  place-content: center;
  justify-items: center;
  padding: 18px;
  font-size: 12px;
  display: grid;
}
.creator-content-tabs {
  border-bottom: 1px solid var(--creator-line);
  gap: 24px;
  margin: 0 20px 18px;
  display: flex;
}
.creator-content-tabs button {
  min-height: 44px;
  color: var(--creator-muted);
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 8px 0;
  font-size: 14px;
  position: relative;
}
.creator-content-tabs button[aria-selected="true"] {
  color: var(--creator-text);
  font-weight: 600;
}
.creator-content-tabs button[aria-selected="true"]:after {
  content: "";
  background: var(--accent);
  border-radius: 3px;
  width: 20px;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translate(-50%);
}
.creator-content-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.creator-more,
.creator-state button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 18px;
  margin-top: 12px;
  padding: 9px 16px;
}
.creator-more {
  margin: 18px auto 0;
  display: block;
}
.simple-app-page {
  background: var(--bg);
  width: min(100%, 820px);
  min-height: calc(100dvh - 62px);
  margin: 0 auto;
}
.page-title-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}
.page-title-row span {
  color: var(--muted);
  font-size: 12px;
}
.page-title-row h1 {
  margin: 3px 0 0;
  font-size: 28px;
}
.page-title-row > button {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 8px 13px;
}
.benefit-hero {
  color: #362614;
  background:
    radial-gradient(circle at 88% 12%, #fffc, #0000 27%),
    linear-gradient(125deg, #f9df9f, #eebc61);
  border-radius: 20px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 13px 35px #ba7f2433;
}
.benefit-hero:after {
  content: "";
  border: 26px solid #ffffff3b;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: -55px;
  right: -22px;
}
.benefit-hero > span {
  font-size: 12px;
  font-weight: 800;
}
.benefit-hero h2 {
  margin: 8px 0 4px;
  font-size: 28px;
}
.benefit-hero p {
  margin: 0 0 19px;
  font-size: 13px;
}
.benefit-hero button {
  z-index: 1;
  color: #f5d486;
  background: #2c2117;
  border: 0;
  border-radius: 18px;
  padding: 9px 16px;
  font-weight: 800;
  position: relative;
}
.checkin-card,
.task-section {
  background: #fff;
  border-radius: 17px;
  margin-top: 16px;
  padding: 19px;
}
.checkin-card .mobile-section-heading > strong {
  color: #e49a27;
  font-size: 13px;
}
.checkin-days {
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  display: grid;
}
.checkin-days span {
  background: #f7f7f8;
  border-radius: 9px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 2px;
  display: flex;
}
.checkin-days b {
  color: #ee9b2d;
  font-size: 11px;
}
.checkin-days small {
  color: var(--muted);
  white-space: nowrap;
  font-size: 9px;
}
.checkin-days span.active {
  background: #fff1d8;
}
.checkin-card > button {
  color: #fff;
  background: linear-gradient(90deg, #ff663d, #ff3158);
  border: 0;
  border-radius: 22px;
  width: 100%;
  margin-top: 16px;
  padding: 11px;
  font-weight: 800;
}
.benefit-ad-slot {
  color: #fff;
  background: linear-gradient(120deg, #252838, #454c70);
  border-radius: 15px;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  margin-top: 16px;
  padding: 15px;
  display: flex;
}
.benefit-ad-slot div {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.benefit-ad-slot small {
  color: #fff9;
  font-size: 10px;
}
.benefit-ad-slot > b {
  font-size: 11px;
}
.task-list {
  gap: 5px;
  display: grid;
}
.task-list article {
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}
.task-list article > span {
  background: #fff4e5;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}
.task-list article > div {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.task-list small {
  color: var(--muted);
}
.task-list button {
  color: var(--accent);
  background: #fff;
  border: 1px solid #ffd0d9;
  border-radius: 15px;
  padding: 7px 11px;
  font-size: 11px;
}
.community-page {
  padding-top: 18px;
}
.simple-app-page.community-page.page-with-nav {
  padding-bottom: calc(
    var(--nav-height) + 32px + env(safe-area-inset-bottom, 0px)
  );
}
.community-page-heading {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  display: flex;
}
.community-page-heading > div {
  min-width: 0;
}
.community-page-heading span {
  color: #8b909a;
  font-size: 11px;
}
.community-page-heading h1 {
  letter-spacing: -0.035em;
  margin: 3px 0 0;
  font-size: 26px;
}
.community-compose-entry,
.community-page-heading > a {
  color: #fff;
  background: #272c36;
  border: 0;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
  box-shadow: 0 5px 16px #1c222f1f;
}
.community-compose-entry svg,
.community-page-heading > a svg {
  width: 16px;
  height: 16px;
}
.community-intro-card {
  color: #fff;
  background:
    radial-gradient(circle at 92% 0, #ff658047, #0000 34%),
    linear-gradient(135deg, #1c202b, #303747);
  border-radius: 18px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin-top: 11px;
  padding: 14px 16px;
  display: grid;
  box-shadow: 0 10px 27px #191e2b1a;
}
.community-intro-card > span {
  background: #ffffff1a;
  border-radius: 14px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}
.community-intro-card svg {
  width: 23px;
  height: 23px;
}
.community-intro-card > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.community-intro-card strong {
  font-size: 14px;
}
.community-intro-card small {
  color: #ffffff94;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}
.community-intro-card > b,
.community-intro-card > button {
  color: #fff;
  white-space: nowrap;
  background: #ffffff1a;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 9px;
  font-weight: 850;
}
.community-feed-tabs {
  background: #e9ebef;
  border-radius: 15px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 14px 0 8px;
  padding: 4px;
  display: grid;
}
.community-feed-tabs button {
  color: #737985;
  background: 0 0;
  border: 0;
  border-radius: 12px;
  min-height: 38px;
  font-size: 12px;
  font-weight: 750;
}
.community-feed-tabs button.active {
  color: #20242c;
  background: #fff;
  font-weight: 900;
  box-shadow: 0 3px 11px #1a1f2b14;
}
.community-content-tabs {
  scrollbar-width: none;
  background: #e9ebef;
  border-radius: 14px;
  gap: 3px;
  margin: 12px 0 10px;
  padding: 4px;
  display: flex;
  overflow-x: auto;
}
.community-content-tabs::-webkit-scrollbar {
  display: none;
}
.community-content-tabs button {
  color: #747a85;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 11px;
  flex: 1 0 auto;
  min-width: 66px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}
.community-content-tabs button.active {
  color: #20242c;
  background: #fff;
  font-weight: 900;
  box-shadow: 0 3px 10px #1a1f2b12;
}
.community-comment-feed {
  gap: 10px;
  display: grid;
}
.community-comment-card {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 7px 23px #1c223009;
}
.community-comment-card > header {
  align-items: center;
  gap: 10px;
  display: flex;
}
.community-comment-card > header > div {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.community-comment-card > header > div strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}
.comment-origin-badge {
  color: #747a84;
  vertical-align: middle;
  background: #eef0f3;
  border-radius: 999px;
  align-items: center;
  min-height: 17px;
  margin-left: 5px;
  padding: 1px 6px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
}
.community-comment-card > header > div small {
  color: #959aa3;
  font-size: 9px;
}
.community-comment-card > header > button {
  color: #626975;
  background: #fff;
  border: 1px solid #e1e4e9;
  border-radius: 999px;
  min-width: 62px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
}
.community-comment-card > header > button.active {
  color: #9297a0;
  background: #f3f4f6;
  border-color: #edf0f3;
}
.community-comment-avatar {
  color: #fff;
  background: linear-gradient(145deg, #ff6e54, #ff3158);
  border-radius: 14px;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 15px;
  font-weight: 900;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 14px #ff315829;
}
.community-comment-avatar img,
.community-comment-avatar span {
  width: 100%;
  height: 100%;
}
.community-comment-avatar img {
  -o-object-fit: cover;
  object-fit: cover;
}
.community-comment-avatar span {
  place-items: center;
  display: grid;
}
.community-comment-text {
  color: #30343c;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 13px 1px 12px;
  font-size: 14px;
  line-height: 1.72;
}
.community-post-title {
  margin: 14px 1px -5px;
  font-size: 15px;
  line-height: 1.45;
}
.community-comment-source {
  background: #f5f6f8;
  border-radius: 13px;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  min-height: 82px;
  padding: 8px;
  transition:
    background 0.18s,
    transform 0.18s;
  display: grid;
}
.community-comment-source:active {
  background: #eceef2;
  transform: scale(0.992);
}
.community-comment-source > img {
  -o-object-fit: cover;
  object-fit: cover;
  background: #e7e9ed;
  border-radius: 9px;
  width: 52px;
  height: 66px;
}
.community-comment-source > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.community-comment-source > div > span {
  align-items: center;
  gap: 5px;
  display: flex;
}
.community-comment-source > div > span b,
.community-comment-source > div > span i {
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}
.community-comment-source > div > span b {
  color: #d72c4c;
  background: #ffe9ee;
}
.community-comment-source > div > span i {
  color: #6c7380;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #e8eaee;
  max-width: 120px;
  overflow: hidden;
}
.community-comment-source > div > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}
.community-comment-source > div > small {
  color: #999ea7;
  font-size: 9px;
}
.community-comment-source > svg {
  color: #adb1b9;
  width: 17px;
}
.community-comment-card > footer {
  border-top: 1px solid #f0f1f3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 13px -5px -4px;
  padding-top: 11px;
  display: grid;
}
.community-comment-card > footer a,
.community-comment-card > footer button {
  color: #7d838e;
  background: 0 0;
  border: 0;
  border-left: 1px solid #f0f1f3;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 5px;
  font-size: 10px;
  display: inline-flex;
}
.community-comment-card > footer > :first-child {
  border-left: 0;
}
.community-comment-card > footer svg {
  width: 16px;
  height: 16px;
}
.community-comment-card > footer button.active {
  color: var(--accent);
}
.community-comment-card > footer button.active svg {
  fill: currentColor;
}
.community-load-more {
  color: #5e6571;
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 999px;
  width: min(100%, 260px);
  min-height: 39px;
  margin: 4px auto 0;
  font-size: 11px;
  font-weight: 800;
}
.community-feed-end {
  color: #a0a5ad;
  text-align: center;
  margin: 5px 0 0;
  font-size: 9px;
}
.community-feed-state {
  text-align: center;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 18px;
  place-content: center;
  justify-items: center;
  min-height: 240px;
  padding: 24px;
  display: grid;
}
.community-feed-state > span {
  color: #8d939d;
  background: #f0f2f5;
  border-radius: 18px;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 900;
  display: grid;
}
.community-feed-state strong {
  font-size: 14px;
}
.community-feed-state p {
  color: #959aa3;
  margin: 6px 0 13px;
  font-size: 10px;
}
.community-feed-state a,
.community-feed-state button {
  color: #fff;
  background: #262b35;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
}
.community-feed-skeleton {
  gap: 10px;
  display: grid;
}
.community-feed-skeleton article {
  background: #fff;
  border-radius: 18px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  min-height: 176px;
  padding: 16px;
  display: grid;
}
.community-feed-skeleton b,
.community-feed-skeleton i,
.community-feed-skeleton span {
  background: linear-gradient(90deg, #f0f1f3, #f7f8f9, #f0f1f3) 0 0/200% 100%;
  border-radius: 10px;
  animation: 1.35s infinite community-loading;
  display: block;
}
.community-feed-skeleton i {
  border-radius: 14px;
  width: 40px;
  height: 40px;
}
.community-feed-skeleton div {
  align-content: start;
  gap: 7px;
  display: grid;
}
.community-feed-skeleton span {
  width: 34%;
  height: 10px;
}
.community-feed-skeleton span + span {
  width: 22%;
  height: 8px;
}
.community-feed-skeleton b {
  grid-column: 1/-1;
  height: 86px;
}
@keyframes community-loading {
  to {
    background-position: -200% 0;
  }
}
.community-compose-modal {
  z-index: 2147483000;
  background: #080a1094;
  justify-content: center;
  align-items: flex-end;
  padding-top: 36px;
  display: flex;
  position: fixed;
  inset: 0;
}
.community-compose-modal > form {
  width: min(100%, 680px);
  max-height: calc(100dvh - 36px);
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  color: var(--text);
  background: #fff;
  border-radius: 22px 22px 0 0;
  flex-direction: column;
  gap: 14px;
  display: flex;
  overflow-y: auto;
  box-shadow: 0 -20px 60px #0000003d;
}
.community-compose-modal > form > header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.community-compose-modal > form > header small {
  color: #969ba4;
  font-size: 9px;
}
.community-compose-modal h2 {
  margin: 2px 0 0;
  font-size: 19px;
}
.community-compose-modal > form > header > button {
  color: #555b65;
  background: #f2f3f5;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 25px;
  display: grid;
}
.community-compose-modal > form > label {
  flex-direction: column;
  gap: 7px;
  display: flex;
}
.community-compose-modal > form > label > span {
  font-size: 11px;
  font-weight: 850;
}
.community-compose-modal > form > label > span small {
  color: #999ea7;
  font-weight: 500;
}
.community-compose-modal > form > label input,
.community-compose-modal > form > label textarea {
  width: 100%;
  color: var(--text);
  font: inherit;
  resize: vertical;
  background: #f8f9fa;
  border: 1px solid #e3e5e9;
  border-radius: 12px;
  outline: none;
  padding: 12px 13px;
}
.community-compose-modal > form > label input:focus,
.community-compose-modal > form > label textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #ff315814;
}
.community-related-picker {
  background: #fafbfc;
  border: 1px solid #e9ebef;
  border-radius: 15px;
  padding: 13px;
}
.community-related-picker > header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
.community-related-picker > header div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.community-related-picker > header strong {
  font-size: 11px;
}
.community-related-picker > header small {
  color: #999ea7;
  font-size: 9px;
}
.community-related-picker > header > button {
  color: #747a84;
  background: #eceef1;
  border: 0;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 9px;
}
.community-related-picker > article,
.community-video-result {
  width: 100%;
  color: var(--text);
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px;
  display: grid;
}
.community-related-picker img {
  -o-object-fit: cover;
  object-fit: cover;
  background: #e8eaee;
  border-radius: 8px;
  width: 42px;
  height: 54px;
}
.community-related-picker article div,
.community-video-result span {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.community-related-picker article strong,
.community-video-result strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}
.community-related-picker article small,
.community-video-result small {
  color: #8c929c;
  font-size: 8px;
}
.community-related-picker article b,
.community-video-result b {
  color: var(--accent);
  font-size: 9px;
}
.community-video-search {
  gap: 7px;
  margin-top: 10px;
  display: flex;
}
.community-video-search input {
  background: #fff;
  border: 1px solid #e0e3e7;
  border-radius: 10px;
  outline: none;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
}
.community-video-search button {
  color: #fff;
  background: #292e38;
  border: 0;
  border-radius: 10px;
  min-width: 62px;
  font-size: 10px;
  font-weight: 800;
}
.community-video-search button:disabled {
  opacity: 0.55;
}
.community-search-hint {
  color: #9a5361;
  margin: 8px 1px 0;
  font-size: 9px;
}
.community-compose-modal > form > footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.community-compose-modal > form > footer small {
  color: #969ba4;
  font-size: 9px;
}
.community-compose-modal > form > footer button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 21px;
  min-width: 104px;
  min-height: 42px;
  font-size: 11px;
  font-weight: 900;
}
.community-compose-modal > form > footer button:disabled {
  opacity: 0.48;
}
.submission-closed-card {
  background: #fff;
  border: 1px solid #e8eaee;
  border-radius: 18px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  display: grid;
  box-shadow: 0 7px 22px #1c22300a;
}
.submission-closed-card > span {
  color: #717885;
  background: #f0f2f5;
  border-radius: 14px;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
}
.submission-closed-card svg {
  width: 23px;
  height: 23px;
}
.submission-closed-card > div {
  min-width: 0;
}
.submission-closed-card strong {
  font-size: 14px;
}
.submission-closed-card p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.55;
}
.submission-closed-card > a {
  color: #fff;
  background: #272c36;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
}
.content-reward-notice {
  color: #493d22;
  background: linear-gradient(135deg, #fffaf0, #fff4d7);
  border: 1px solid #f1dfae;
  border-radius: 15px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 10px 0;
  padding: 12px 14px;
  display: grid;
}
.content-reward-notice > i {
  color: #fff;
  background: #c9931c;
  border-radius: 12px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.content-reward-notice > div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.content-reward-notice strong {
  font-size: 12px;
}
.content-reward-notice small {
  color: #897348;
  font-size: 9px;
  line-height: 1.55;
}
.content-reward-notice > a {
  color: #8d650e;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 850;
}
.channel-row .submission-reward-status {
  color: #9a741d;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.45;
  overflow: visible;
}
.profile-header {
  align-items: center;
  gap: 12px;
  padding: 10px 2px 18px;
  display: flex;
}
.profile-avatar {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), #ff893e);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 22px;
  font-weight: 900;
  display: grid;
}
.profile-header > div {
  flex: 1;
  min-width: 0;
}
.profile-header h1 {
  margin: 0;
  font-size: 20px;
}
.profile-header p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 11px;
}
.profile-header button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 16px;
  flex: none;
  padding: 8px 11px;
  font-size: 11px;
}
.vip-card {
  color: #f5d18b;
  background: linear-gradient(125deg, #2b2928, #17171a);
  border-radius: 18px;
  align-items: end;
  gap: 15px;
  padding: 20px;
  display: flex;
}
.vip-card div {
  flex: 1;
}
.vip-card p,
.vip-card span {
  color: #b9a680;
  font-size: 11px;
}
.vip-card h2 {
  color: #ffe0a2;
  margin: 6px 0;
  font-size: 19px;
}
.vip-card p {
  margin: 0;
}
.vip-card button {
  color: #352617;
  background: linear-gradient(90deg, #f5ce80, #fff0bd);
  border: 0;
  border-radius: 15px;
  flex: none;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 800;
}
.profile-page {
  width: min(100%, 720px);
  min-height: 100dvh;
  padding: max(12px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    14px calc(var(--nav-height) + 30px + env(safe-area-inset-bottom));
  background: var(--bg);
  margin: 0 auto;
  position: relative;
}
.mine-identity-card {
  color: #fff;
  background:
    radial-gradient(circle at 96% 0, #7a66d64d, #0000 34%),
    radial-gradient(circle at 0 100%, #ff31581a, #0000 38%),
    linear-gradient(138deg, #171b28, #252c40);
  border-radius: 24px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px #181d3029;
}
.mine-identity-card:after {
  content: "";
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 210px;
  height: 210px;
  position: absolute;
  top: -82px;
  right: -36px;
}
.mine-account-row {
  z-index: 1;
  align-items: center;
  gap: 12px;
  display: flex;
  position: relative;
}
.mine-avatar {
  background: linear-gradient(145deg, #6f62c9, #ff3158);
  border: 2px solid #ffffff3d;
  border-radius: 18px;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 22px;
  font-weight: 900;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 22px #0a0d1938;
}
.mine-avatar img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.mine-account-copy {
  flex: 1;
  min-width: 0;
}
.mine-account-row h1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 20px;
  overflow: hidden;
}
.mine-account-guest {
  color: #ffffff9e;
  margin: 6px 0 0;
  font-size: 12px;
}
.mine-membership-badge {
  letter-spacing: 0.02em;
  vertical-align: top;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 25px;
  margin-top: 6px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.mine-membership-badge > svg {
  z-index: 1;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.15px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 15px;
  height: 15px;
  position: relative;
}
.mine-membership-badge > strong {
  z-index: 1;
  font-size: inherit;
  white-space: nowrap;
  font-weight: 900;
  position: relative;
}
.mine-membership-badge.is-normal {
  color: #ffffffb8;
  background: #fff1;
  padding-right: 5px;
  box-shadow: inset 0 1px #ffffff0d;
}
.mine-vip-off {
  color: #ffffff6b;
  background: #00000024;
  border-radius: 999px;
  align-items: center;
  gap: 1px;
  height: 19px;
  padding: 0 5px 0 3px;
  display: inline-flex;
  position: relative;
}
.mine-vip-off svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 13px;
  height: 13px;
}
.mine-vip-off b {
  letter-spacing: 0.04em;
  font-size: 8px;
  font-weight: 950;
}
.mine-vip-off .mine-vip-off-line {
  stroke: #ff8396;
  stroke-width: 2.2px;
}
.mine-membership-badge.is-vip {
  color: #5b3500;
  background: linear-gradient(118deg, #fff2bb, #ffc959 48%, #ffe9a0);
  border-color: #ffe085e6;
  box-shadow:
    0 5px 16px #ffbb3947,
    inset 0 1px #fffc;
}
.mine-membership-badge.is-svip {
  color: #fff9e7;
  background: linear-gradient(
    112deg,
    #7358dc,
    #c348b8 43%,
    #ff9c57 72%,
    #f4cd68
  );
  border-color: #ffe4a2d6;
  box-shadow:
    0 6px 19px #d749a657,
    0 0 0 1px #ffe9ae1f,
    inset 0 1px #ffffff61;
}
.mine-membership-badge.is-svip:after {
  content: "";
  opacity: 0.72;
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff6b, #0000);
  width: 24px;
  height: 60px;
  animation: 3.8s ease-in-out infinite mine-membership-shine;
  position: absolute;
  top: -18px;
  left: -12px;
  transform: rotate(24deg);
}
@keyframes mine-membership-shine {
  0%,
  58% {
    opacity: 0;
    left: -30px;
  }
  66% {
    opacity: 0.72;
  }
  84%,
  to {
    opacity: 0;
    left: calc(100% + 18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mine-membership-badge.is-svip:after {
    display: none;
  }
}
.mine-account-actions {
  z-index: 2;
  flex: none;
  gap: 6px;
  min-width: 72px;
  display: grid;
  position: relative;
}
.mine-account-actions > button {
  color: #fff;
  white-space: nowrap;
  background: #ffffff17;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff14;
}
.mine-profile-edit {
  color: #202536 !important;
  background: #fffffff2 !important;
}
.mine-profile-edit:disabled {
  opacity: 0.64;
}
.mine-mode-toggle,
.mine-mode-toggle.is-green {
  color: #fff;
  box-shadow: none;
  background: #ffffff17;
}
.mine-mode-toggle span {
  font-size: 13px;
  line-height: 1;
}
.mine-mode-toggle em {
  font-size: 10px;
  font-style: normal;
}
.mine-mode-toggle.has-guide {
  background: #59b4803d;
  border-color: #bef0d37a;
  box-shadow:
    0 0 0 3px #76d29e1f,
    inset 0 1px #ffffff1f;
}
.mine-green-guide {
  z-index: 2147483000;
  top: calc(
    max(12px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px))) + 58px
  );
  color: #26312b;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffffa;
  border: 1px solid #dceee3;
  border-radius: 18px;
  gap: 9px;
  width: min(310px, 100vw - 60px);
  padding: 16px;
  display: grid;
  position: fixed;
  right: max(30px, 50vw - 326px);
  box-shadow: 0 18px 48px #14241c3d;
}
.mine-green-guide:before {
  content: "";
  background: #fff;
  border-top: 1px solid #dceee3;
  border-left: 1px solid #dceee3;
  width: 13px;
  height: 13px;
  position: absolute;
  top: -7px;
  right: 28px;
  transform: rotate(45deg);
}
.mine-green-guide-close {
  z-index: 1;
  color: #819088;
  background: #f2f6f3;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 8px;
  right: 8px;
}
.mine-green-guide-label {
  color: #397454;
  background: #e9f7ef;
  border-radius: 999px;
  width: max-content;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 850;
}
.mine-green-guide-heading {
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 32px;
  display: flex;
}
.mine-green-guide-heading > strong {
  letter-spacing: -0.02em;
  flex: none;
  font-size: 19px;
  font-weight: 950;
}
.mine-green-guide-words {
  color: #4a8b66;
  white-space: nowrap;
  width: 76px;
  height: 20px;
  font-size: 10px;
  font-weight: 850;
  line-height: 20px;
  display: block;
  position: relative;
  overflow: hidden;
}
.mine-green-guide-words > span {
  opacity: 0;
  max-width: 100%;
  animation: mine-green-word-cycle var(--green-guide-word-duration, 6s)
    ease-in-out var(--green-guide-word-delay, 0s) infinite;
  text-overflow: ellipsis;
  position: absolute;
  inset: 0 auto auto 0;
  overflow: hidden;
}
.mine-green-guide-words.is-static > span {
  opacity: 1;
  animation: none;
  transform: none;
}
.mine-green-guide > p {
  color: #68766e;
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}
.mine-green-guide > footer {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  margin-top: 2px;
  display: grid;
}
.mine-green-guide > footer button {
  border: 0;
  border-radius: 12px;
  min-height: 42px;
  font-size: 10px;
  font-weight: 900;
}
.mine-green-guide > footer button:first-child {
  color: #fff;
  background: linear-gradient(105deg, #4b9a6c, #347b54);
  box-shadow: 0 7px 16px #347b5433;
}
.mine-green-guide > footer button:last-child {
  color: #68766e;
  background: #f1f5f2;
}
.mine-green-guide-enter-active,
.mine-green-guide-leave-active {
  transform-origin: 88% 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.mine-green-guide-enter-from,
.mine-green-guide-leave-to {
  opacity: 0;
  transform: translateY(-7px) scale(0.97);
}
@keyframes mine-green-word-cycle {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  21%,
  4% {
    opacity: 1;
    transform: translateY(0);
  }
  25%,
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.mine-assets-row {
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  display: grid;
  position: relative;
}
.mine-assets-row > * {
  width: 100%;
  min-width: 0;
}
.mine-points-summary {
  background: linear-gradient(115deg, #ffffff1b, #ffffff0e);
  border: 1px solid #ffd67a33;
  border-radius: 18px;
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 118px;
  padding: 15px 16px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff14;
}
.mine-points-summary:after {
  content: "";
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: -74px;
  right: -38px;
}
.mine-points-card-head {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  display: flex;
  position: relative;
}
.mine-points-card-head > span {
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  display: flex;
}
.mine-points-card-head small {
  color: #ffffffeb;
  font-size: 13px;
  font-weight: 900;
}
.mine-points-card-head em {
  color: #ffffff80;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.mine-payout-account-action {
  color: #ffffffe6;
  background: #ffffff14;
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff0f;
}
.mine-payout-account-action i {
  color: #ffffff85;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.mine-points-main {
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  display: grid;
  position: relative;
}
.mine-points-inline {
  white-space: nowrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 5px;
  width: 100%;
  min-width: 0;
  display: flex;
}
.mine-points-inline strong {
  color: #ffdf92;
  letter-spacing: -0.03em;
  text-shadow: 0 5px 20px #0a0d193d;
  font-size: clamp(21px, 5.8vw, 26px);
  font-weight: 950;
}
.mine-points-inline em,
.mine-points-inline strong {
  white-space: nowrap;
  flex: none;
  min-width: 0;
  line-height: 1;
}
.mine-points-inline em {
  color: #ffffffdb;
  letter-spacing: -0.025em;
  font-size: clamp(18px, 5vw, 22px);
  font-style: normal;
  font-weight: 850;
}
.mine-points-inline.is-compact {
  gap: 5px;
}
.mine-points-inline.is-compact strong {
  font-size: clamp(21px, 6.2vw, 26px);
}
.mine-points-inline.is-compact em {
  font-size: clamp(18px, 5.5vw, 23px);
}
.mine-points-inline.is-tight strong {
  font-size: clamp(17px, 5vw, 22px);
}
.mine-points-inline.is-tight em {
  font-size: clamp(15px, 4.5vw, 20px);
}
.mine-points-inline.is-ultra-tight {
  gap: 3px;
}
.mine-points-inline.is-ultra-tight strong {
  font-size: clamp(14px, 4.2vw, 19px);
}
.mine-points-inline.is-ultra-tight em {
  font-size: clamp(13px, 3.9vw, 17px);
}
.mine-points-action {
  color: #202536;
  white-space: nowrap;
  background: #fff;
  border: 0;
  border-radius: 999px;
  min-width: 78px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 6px 16px #080c1829;
}
.mine-id-row {
  color: #fff;
  background: linear-gradient(110deg, #ffffff17, #ffffff0b);
  border: 1px solid #ffffff1a;
  border-radius: 18px;
  align-content: center;
  gap: 11px;
  min-height: 108px;
  padding: 13px 14px;
  display: grid;
}
.mine-id-row > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  display: grid;
}
.mine-id-row > header > span {
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  display: flex;
}
.mine-id-row > header small {
  color: #ffffffb3;
  flex: none;
  font-size: 11px;
  font-weight: 800;
}
.mine-id-row > header b {
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
}
.mine-share-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}
.mine-share-actions button {
  color: #ffffffe6;
  white-space: nowrap;
  background: #ffffff14;
  border: 1px solid #ffffff1c;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
}
.mine-share-actions button:active {
  background: #ffffff2e;
  transform: translateY(1px);
}
.mine-share-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  display: grid;
}
.mine-share-metrics > span {
  border-left: 1px solid #ffffff1a;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 9px;
  display: flex;
}
.mine-share-metrics > span:first-child {
  border-left: 0;
  padding-left: 0;
}
.mine-share-metrics > span:last-child {
  padding-right: 0;
}
.mine-share-metrics small {
  color: #ffffff8a;
  font-size: 10px;
  font-weight: 700;
}
.mine-share-metrics b,
.mine-share-metrics small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mine-share-metrics b {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}
.mine-share-metrics i {
  color: #ffffff9e;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
@media (width<=360px) {
  .mine-identity-card {
    padding: 16px;
  }
  .mine-account-row {
    gap: 9px;
  }
  .mine-avatar {
    border-radius: 16px;
    width: 50px;
    height: 50px;
  }
  .mine-account-actions {
    min-width: 68px;
  }
  .mine-account-actions > button {
    padding-inline: 8px;
  }
  .mine-green-guide {
    top: calc(
      max(12px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px))) + 54px
    );
    width: min(300px, 100vw - 60px);
    padding: 15px;
    right: 30px;
  }
  .mine-points-card-head {
    gap: 6px;
  }
  .mine-points-card-head em,
  .mine-points-card-head small {
    white-space: nowrap;
  }
  .mine-payout-account-action i {
    display: none;
  }
  .mine-id-row > header {
    grid-template-columns: minmax(0, 1fr);
  }
  .mine-share-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    display: grid;
  }
  .mine-share-actions button {
    width: 100%;
    padding-inline: 5px;
  }
}
.mine-modal-layer {
  z-index: 2147483150;
  padding: 22px 16px
    calc(var(--nav-height) + 18px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #090c13a3;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}
.mine-form-card {
  width: min(100%, 430px);
  max-height: min(680px, calc(100dvh - var(--nav-height) - 55px));
  background: #fff;
  border-radius: 20px;
  gap: 11px;
  padding: 19px;
  display: grid;
  overflow-y: auto;
  box-shadow: 0 22px 70px #0000003d;
}
.mine-form-card header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3px;
  display: flex;
}
.mine-form-card header > div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.mine-form-card header strong {
  font-size: 16px;
}
.mine-form-card header small {
  color: var(--muted);
  font-size: 10px;
}
.mine-form-card header button {
  color: #9297a1;
  background: 0 0;
  border: 0;
  font-size: 22px;
}
.mine-form-card > input,
.mine-form-card > textarea {
  border: 1px solid var(--line);
  resize: vertical;
  background: #f7f8fa;
  border-radius: 10px;
  outline: 0;
  width: 100%;
  padding: 11px 12px;
}
.mine-form-card > input:focus,
.mine-form-card > textarea:focus {
  background: #fff;
  border-color: #ff9caf;
}
.mine-forgot-password {
  color: #636b7a;
  justify-self: end;
  margin-top: -4px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.mine-forgot-password:hover {
  color: var(--accent);
}
.mine-payout-tabs {
  background: #f1f2f5;
  border-radius: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  display: grid;
}
.mine-payout-tabs > button {
  color: #777e89;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  min-height: 38px;
  font-size: 12px;
  font-weight: 800;
}
.mine-payout-tabs > button.active {
  color: #fff;
  background: linear-gradient(100deg, #ff704f, #ff3158);
  box-shadow: 0 5px 14px #ff315830;
}
.mine-payout-current {
  background: #fff9e9;
  border: 1px solid #f1e0b7;
  border-radius: 12px;
  gap: 3px;
  margin: 0;
  padding: 11px 68px 11px 12px;
  display: grid;
  position: relative;
}
.mine-payout-current span {
  color: #a37a31;
  font-size: 9px;
  font-weight: 800;
}
.mine-payout-current strong {
  color: #5c4218;
  font-size: 14px;
}
.mine-payout-current small {
  color: #a38d66;
  font-size: 9px;
}
.mine-payout-current > button {
  color: #9b6d21;
  background: #fff;
  border: 1px solid #ead6a5;
  border-radius: 999px;
  min-width: 44px;
  min-height: 28px;
  font-size: 9px;
  font-weight: 800;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.mine-payout-current > button:disabled {
  opacity: 0.5;
}
.mine-payout-field {
  gap: 7px;
  display: grid;
}
.mine-payout-field > span {
  color: #555c67;
  font-size: 10px;
  font-weight: 800;
}
.mine-payout-field > input {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 11px;
  outline: 0;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  font-size: 14px;
}
.mine-payout-field > input:focus {
  background: #fff;
  border-color: #ff8da2;
  box-shadow: 0 0 0 3px #ff315814;
}
.mine-payout-safety {
  color: var(--muted);
  margin: -1px 0 1px;
  font-size: 9px;
  line-height: 1.6;
}
.mine-quick-register {
  background: linear-gradient(135deg, #fff0f3, #fff7ed);
  border-radius: 14px;
  gap: 7px;
  padding: 14px;
  display: grid;
}
.mine-quick-register > button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(100deg, #ff6449, #ff3158);
  border: 0;
  border-radius: 12px;
  min-height: 46px;
  font-weight: 800;
}
.mine-quick-register small {
  color: #8e6370;
  text-align: center;
  font-size: 11px;
}
.mine-register-divider {
  color: #a3a7af;
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  display: flex;
}
.mine-register-divider:after,
.mine-register-divider:before {
  background: var(--line);
  content: "";
  flex: 1;
  height: 1px;
}
.mine-auth-card {
  --auth-tabs-bg: #eff1f4;
  --auth-control-text: #4f5663;
  --auth-action-start: #c82349;
  --auth-action-end: #c22b5d;
  --auth-action-text: #fff;
  --auth-input-border: #868d99;
  --auth-placeholder: #646d7a;
  --auth-help-text: #626a77;
  --auth-focus: #b71940;
  --auth-focus-ring: #b7194038;
  --auth-error-bg: #fff0ed;
  --auth-error-text: #8c2b27;
  --auth-error-border: #d99b94;
  --auth-disabled-bg: #646b76;
  --auth-disabled-text: #fff;
}
.mine-auth-card .mine-forgot-password,
.mine-auth-card .mine-register-divider,
.mine-auth-card header small {
  color: var(--auth-help-text);
}
.mine-auth-card header button {
  color: var(--auth-control-text);
}
.mine-auth-card .account-tabs {
  border: 1px solid var(--auth-input-border);
  background: var(--auth-tabs-bg);
}
.mine-auth-card .account-tabs button {
  color: var(--auth-control-text);
  font-weight: 750;
}
.mine-auth-card .account-tabs button.active {
  color: var(--auth-action-text);
  background: linear-gradient(
    100deg,
    var(--auth-action-start),
    var(--auth-action-end)
  );
  box-shadow: 0 4px 12px #810f3738;
}
.mine-auth-card > input {
  border-color: var(--auth-input-border);
  color: var(--text);
  background: var(--input-bg);
}
.mine-auth-card > input::placeholder {
  color: var(--auth-placeholder);
  opacity: 1;
}
.mine-auth-card > input:focus {
  border-color: var(--auth-focus);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px var(--auth-focus-ring);
}
.mine-auth-card > input[readonly] {
  border-color: var(--auth-input-border);
  background: var(--auth-tabs-bg);
  cursor: text;
}
.mine-auth-card > .mine-invite-lock-note {
  color: var(--auth-help-text);
  margin-top: -5px;
  font-size: 10px;
  line-height: 1.5;
}
.mine-auth-card > input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
}
.mine-auth-card .mine-quick-register > button,
.mine-auth-card > .primary-action {
  min-height: 46px;
  color: var(--auth-action-text);
  background: linear-gradient(
    100deg,
    var(--auth-action-start),
    var(--auth-action-end)
  );
  box-shadow: 0 8px 20px #810f3733;
}
.mine-auth-card .mine-quick-register small {
  color: var(--auth-help-text);
}
.mine-auth-card > .form-error {
  border: 1px solid var(--auth-error-border);
  color: var(--auth-error-text);
  background: var(--auth-error-bg);
}
.mine-auth-card :is(button, a, input):focus-visible {
  outline: 3px solid var(--auth-focus);
  outline-offset: 2px;
}
.mine-auth-card :is(.mine-quick-register > button, .primary-action):disabled {
  color: var(--auth-disabled-text);
  background: var(--auth-disabled-bg);
  box-shadow: none;
  opacity: 1;
}
.generated-account-layer {
  z-index: 2147483350;
  padding-bottom: 22px;
}
.generated-account-card {
  width: min(100%, 440px);
  max-height: min(800px, 100dvh - 36px);
}
.generated-account-preview {
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 13px;
  width: min(100%, 260px);
  max-height: 330px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 8px 28px #1418272e;
}
.generated-account-fields {
  gap: 7px;
  display: grid;
}
.generated-account-fields span {
  color: #6e7480;
  background: #f6f7fa;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  display: flex;
}
.generated-account-fields b {
  color: #1b1d25;
  overflow-wrap: anywhere;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
}
.generated-account-warning {
  color: #8e6370;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.generated-account-save {
  text-align: center;
  border: 0;
  width: 100%;
  display: block;
}
.generated-account-album-hint {
  color: #737a87;
  text-align: center;
  margin-top: -6px;
  font-size: 10px;
  line-height: 1.4;
}
.generated-account-manual-save {
  color: #5d6675;
  text-underline-offset: 3px;
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-self: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
}
.generated-account-save-feedback {
  color: #276a50;
  text-align: center;
  background: #edf9f3;
  border-radius: 10px;
  margin: -1px 0 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
}
.generated-account-album-guide {
  z-index: 2;
  inset: max(12px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    12px max(12px, env(safe-area-inset-bottom));
  width: min(100% - 24px, 460px);
  max-height: calc(
    100dvh - 24px - var(--video-cms-safe-top, env(safe-area-inset-top, 0px)) -
      env(safe-area-inset-bottom)
  );
  background: #fff;
  border-radius: 22px;
  flex-direction: column;
  place-self: center;
  padding: 18px;
  display: flex;
  position: absolute;
  overflow: auto;
  box-shadow: 0 20px 80px #00000061;
}
.generated-account-album-guide > header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.generated-account-album-guide > header strong {
  font-size: 18px;
}
.generated-account-album-guide > header button {
  color: #626977;
  background: #f1f2f5;
  border: 0;
  border-radius: 50%;
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 22px;
}
.generated-account-album-guide > p {
  color: #6c7380;
  margin: 10px 0 14px;
  font-size: 12px;
  line-height: 1.65;
}
.generated-account-album-guide > img {
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
  border-radius: 14px;
  width: min(100%, 310px);
  max-height: min(62dvh, 520px);
  margin: auto;
  display: block;
  box-shadow: 0 8px 28px #14182733;
}
.generated-account-album-guide > .primary-action {
  border: 0;
  width: 100%;
  margin-top: 15px;
}
.generated-account-dismiss {
  border: 1px solid var(--line);
  color: #69707c;
  cursor: pointer;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  font-weight: 700;
}
.mine-modal-enter-active,
.mine-modal-leave-active {
  transition: opacity 0.2s;
}
.mine-modal-enter-active .mine-form-card,
.mine-modal-leave-active .mine-form-card {
  transition:
    transform 0.22s,
    opacity 0.22s;
}
.mine-modal-enter-from,
.mine-modal-leave-to {
  opacity: 0;
}
.mine-modal-enter-from .mine-form-card,
.mine-modal-leave-to .mine-form-card {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}
.mine-service-panel {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 20px;
  margin-top: 12px;
  padding: 17px;
  box-shadow: 0 9px 26px #191f2f0b;
}
.mine-section-heading {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  display: flex;
}
.mine-section-heading h2 {
  margin: 0;
  font-size: 17px;
}
.mine-section-heading p {
  color: #747b87;
  margin: 4px 0 0;
  font-size: 11px;
}
.mine-primary-menu {
  border-bottom: 1px solid #edf0f4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 15px;
  display: grid;
}
.mine-primary-menu > button {
  color: #292e3a;
  background: #f7f8fa;
  border: 0;
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 82px;
  padding: 8px 3px;
  display: flex;
}
.mine-primary-icon {
  width: 38px;
  height: 38px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 13px;
  place-items: center;
  display: grid;
}
.mine-primary-icon svg {
  width: 20px;
  height: 20px;
}
.mine-primary-menu strong {
  font-size: 12px;
}
.mine-primary-menu small {
  color: #7b818d;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 10px;
  overflow: hidden;
}
.mine-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}
.mine-feature-item {
  color: #292e3a;
  text-align: left;
  background: linear-gradient(145deg, #fff, #f8f9fb);
  border: 1px solid #eceef3;
  border-radius: 16px;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
  min-height: 80px;
  padding: 8px 11px;
  display: grid;
}
.mine-feature-icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 13px;
  grid-area: 1/1;
  align-self: center;
  place-items: center;
  display: grid;
}
.mine-feature-icon svg {
  width: 21px;
  height: 21px;
}
.mine-feature-copy {
  display: contents;
}
.mine-feature-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-area: 1/2;
  align-self: center;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
}
.mine-feature-copy small {
  color: #747b87;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  grid-area: 2/1 / auto/3;
  min-width: 0;
  font-size: 10px;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}
.mine-feature-item > i {
  color: #a2a7b0;
  grid-area: 1/3/3;
  place-self: center end;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
}
.mine-feature-item:active,
.mine-primary-menu > button:active {
  background: #f1f3f6;
  transform: scale(0.985);
}
.mine-feature-item:focus-visible,
.mine-primary-menu > button:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #ff315833;
}
.mine-content-card {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 20px;
  margin-top: 12px;
  padding: 17px;
  box-shadow: 0 9px 26px #191f2f0b;
}
.mine-library-card {
  min-height: 206px;
}
.mine-content-tabs {
  background: #f3f4f7;
  border-radius: 13px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: -5px -5px 14px;
  padding: 4px;
  display: grid;
}
.mine-content-tabs.has-offline-tab {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mine-content-tabs > button {
  color: #747b87;
  white-space: nowrap;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
}
.mine-content-tabs > button small {
  color: #969ba5;
  background: #e8e9ed;
  border-radius: 9px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
  display: inline-grid;
}
.mine-content-tabs > button.active {
  color: var(--text);
  background: #fff;
  box-shadow: 0 3px 11px #1b1f2b14;
}
.mine-content-tabs > button.active small {
  color: var(--accent);
  background: var(--accent-soft);
}
.mine-content-tabs > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.mine-tab-summary {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 10px;
  display: flex;
}
.mine-tab-summary > span {
  color: #747b87;
  font-size: 11px;
  line-height: 1.5;
}
.mine-tab-summary > a,
.mine-tab-summary > button {
  color: #737a86;
  background: 0 0;
  border: 0;
  flex: none;
  min-height: 24px;
  padding: 0;
  font-size: 11px;
}
.mine-content-card > header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 13px;
  display: flex;
}
.mine-content-card > header > div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.mine-content-card h2 {
  margin: 0;
  font-size: 17px;
}
.mine-content-card header span {
  color: var(--muted);
  font-size: 9px;
}
.mine-content-card header > a,
.mine-content-card header > button {
  color: #9297a1;
  background: 0 0;
  border: 0;
  padding: 2px 0;
  font-size: 10px;
}
.mine-media-row {
  scrollbar-width: none;
  align-items: flex-start;
  gap: 9px;
  display: flex;
  overflow-x: auto;
}
.mine-media-row::-webkit-scrollbar {
  display: none;
}
.mine-media-row .video-card {
  flex: none;
  width: 98px;
}
.mine-media-row .video-card-landscape {
  width: max(120px, calc(33.3333% - var(--video-card-column-gap, 8px) * 2 / 3));
}
.mine-media-row .video-card-landscape .poster-badges {
  max-width: calc(100% - 12px);
  top: 6px;
  left: 6px;
}
.mine-media-row .video-card-landscape .badge {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.mine-media-row .video-card-landscape .poster-quality {
  max-width: calc(100% - 12px);
  bottom: 6px;
  right: 6px;
}
.mine-media-row .poster-wrap {
  border-radius: 8px;
}
.mine-media-row .video-card > strong {
  font-size: 11px;
}
.mine-media-row .video-card > span {
  font-size: 9px;
}
.mine-media-row .play-indicator,
.mine-media-row .poster-badges .badge:nth-child(n + 2) {
  display: none;
}
.mine-following-row {
  scrollbar-width: thin;
  gap: 7px;
  max-height: 260px;
  display: grid;
  overflow-y: auto;
}
.mine-following-more {
  color: #596171;
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 999px;
  min-height: 38px;
  font-size: 11px;
  font-weight: 800;
}
.offline-download-library {
  min-width: 0;
}
.offline-download-summary {
  align-items: center;
}
.offline-download-items {
  gap: 9px;
  display: grid;
}
.offline-download-item {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 15px;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px;
  display: grid;
}
.offline-download-cover {
  aspect-ratio: 2/3;
  width: 68px;
  color: var(--muted);
  background: var(--surface-muted);
  border-radius: 10px;
  place-items: center;
  font-size: 10px;
  font-weight: 850;
  display: grid;
  overflow: hidden;
}
.offline-download-cover img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.offline-download-copy {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.offline-download-copy > small,
.offline-download-copy > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.offline-download-copy > strong {
  color: var(--text);
  font-size: 12px;
}
.offline-download-copy > small {
  color: var(--muted);
  font-size: 10px;
}
.offline-download-progress {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
}
.offline-download-progress > span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ff8a6c);
  height: 100%;
  transition: width 0.2s;
  display: block;
}
.offline-download-copy > p {
  min-width: 0;
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 9px;
  display: flex;
}
.offline-download-copy > p b {
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  overflow: hidden;
}
.offline-download-copy > p b.is-failed {
  color: #c32d4d;
}
.offline-download-copy > p b.is-completed {
  color: #20855a;
}
.offline-download-copy > p span {
  font-variant-numeric: tabular-nums;
  flex: none;
}
.offline-download-copy > em {
  color: #b32b46;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
  font-size: 9px;
  font-style: normal;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}
.offline-download-actions {
  gap: 6px;
  width: 58px;
  display: grid;
}
.offline-download-actions a,
.offline-download-actions button,
.offline-download-more {
  border: 1px solid var(--line);
  min-height: 32px;
  color: var(--text);
  background: var(--surface-raised);
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 800;
}
.offline-download-actions a {
  text-align: center;
  place-items: center;
  text-decoration: none;
  display: grid;
}
.offline-download-actions a.primary,
.offline-download-actions button.primary {
  color: var(--action-fg);
  background: var(--action-bg);
  border-color: #0000;
}
.offline-download-actions button.danger {
  color: #b62945;
}
.offline-download-actions button:disabled,
.offline-download-more:disabled {
  color: var(--disabled-fg);
  background: var(--disabled-bg);
}
.offline-download-inline-error {
  color: #b62a46;
  text-align: center;
  margin: 10px 0 0;
  font-size: 10px;
}
.offline-download-more {
  border-radius: 999px;
  min-width: 150px;
  min-height: 38px;
  margin: 12px auto 0;
  display: block;
}
.mine-creator-card {
  min-height: 58px;
  color: var(--text);
  background: #fafbfc;
  border: 1px solid #f0f1f4;
  border-radius: 13px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  display: grid;
}
.mine-creator-avatar {
  color: #fff;
  background: linear-gradient(145deg, #ff3158, #ff8548);
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 15px;
  font-weight: 900;
  display: grid;
  overflow: hidden;
}
.mine-creator-avatar img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.mine-creator-copy {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.mine-creator-copy small,
.mine-creator-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mine-creator-copy strong {
  font-size: 12px;
}
.mine-creator-copy small {
  color: var(--muted);
  font-size: 9px;
}
.mine-creator-card > i {
  color: var(--accent);
  white-space: nowrap;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.mine-empty.mine-empty-compact {
  min-height: 90px;
}
.mine-empty {
  color: #a2a6ae;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 110px;
  display: flex;
}
.mine-empty > span {
  font-size: 25px;
}
.mine-empty p {
  margin: 7px 0;
  font-size: 11px;
}
.mine-empty a,
.mine-empty button {
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  border-radius: 13px;
  padding: 5px 10px;
  font-size: 10px;
}
.profile-page > .ad-slot-group {
  width: 100%;
  margin: 12px 0 0;
}
.profile-page > .ad-slot-group .ad-item {
  background: #fff;
  min-height: 64px;
}
.mine-logout-button {
  color: #737a86;
  background: #fff;
  border: 1px solid #e8ebf0;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 750;
  display: flex;
}
.mine-logout-button svg {
  width: 17px;
  height: 17px;
}
.mine-version {
  color: #b1b4bb;
  text-align: center;
  margin: 17px 0 0;
  font-size: 9px;
}
.mine-toast {
  z-index: 2147483200;
  bottom: calc(var(--nav-height) + 22px + env(safe-area-inset-bottom));
  color: #fff;
  background: #17191feb;
  border-radius: 18px;
  margin: 0;
  padding: 9px 14px;
  font-size: 11px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 8px 30px #0000002e;
}
.reward-page {
  width: min(100%, 720px);
  margin: 0 auto;
  padding-inline: 14px;
}
.reward-topbar {
  text-align: center;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  height: 58px;
  display: grid;
}
.reward-topbar button {
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 27px;
  box-shadow: 0 4px 14px #191f2f0e;
}
.reward-topbar strong {
  font-size: 17px;
}
.reward-loading,
.reward-login-card {
  text-align: center;
  background: #fff;
  border-radius: 22px;
  margin-top: 12px;
  padding: 32px 22px;
}
.reward-login-card span,
.reward-section header span {
  color: var(--accent);
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 900;
}
.reward-login-card h1 {
  margin: 8px 0;
  font-size: 20px;
}
.reward-login-card p {
  color: #747b87;
  font-size: 12px;
  line-height: 1.65;
}
.reward-login-card a {
  color: #fff;
  background: #202536;
  border-radius: 21px;
  min-height: 42px;
  margin-top: 10px;
  padding: 11px 22px;
  font-size: 12px;
  font-weight: 800;
  display: inline-block;
}
.reward-error {
  color: #b72b43;
  background: #fff0f3;
  border-radius: 10px;
  margin: 0 0 10px;
  padding: 10px 13px;
  font-size: 11px;
}
.reward-wallet {
  color: #fff;
  background:
    radial-gradient(circle at 96% 0, #7a66d64d, #0000 34%),
    radial-gradient(circle at 0 100%, #ff31581a, #0000 38%),
    linear-gradient(138deg, #171b28, #252c40);
  border-radius: 24px;
  grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.05fr);
  gap: 20px;
  min-height: 184px;
  padding: 22px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px #181d3026;
}
.reward-wallet:after {
  content: "";
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 210px;
  height: 210px;
  position: absolute;
  bottom: -90px;
  right: -35px;
}
.reward-wallet-points {
  z-index: 1;
  border-right: 1px solid #ffffff1c;
  flex-direction: column;
  min-width: 0;
  padding-right: 20px;
  display: flex;
}
.reward-wallet-points > span {
  color: #ffffffb8;
  font-size: 12px;
  font-weight: 850;
}
.reward-wallet-points > strong {
  color: #ffdf92;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 8px;
  font-size: clamp(40px, 7vw, 52px);
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
}
.reward-wallet-points > small {
  color: #ffffff94;
  margin-top: 7px;
  font-size: 11px;
}
.reward-wallet-totals {
  color: #fff9;
  gap: 18px;
  margin-top: auto;
  padding-top: 15px;
  font-size: 11px;
  display: flex;
}
.reward-wallet-totals b {
  color: #fff;
  font-size: 12px;
}
.reward-wallet-points > button {
  color: #33260e;
  background: linear-gradient(135deg, #ffe5a4, #e8b954);
  border: 0;
  border-radius: 18px;
  width: max-content;
  margin-top: auto;
  padding: 8px 15px;
  font-size: 9px;
  font-weight: 900;
}
.points-wallet {
  grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.05fr);
}
.points-wallet-actions {
  z-index: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
.points-wallet-actions > a {
  color: #fff;
  background: #ffffff12;
  border: 1px solid #ffffff1c;
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 126px;
  padding: 15px;
  display: flex;
  position: relative;
}
.points-wallet-actions > a > span {
  color: #fff;
  background: #ffffff1f;
  border-radius: 13px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}
.points-wallet-actions > a > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin-top: 11px;
  display: flex;
}
.points-wallet-actions b {
  font-size: 14px;
}
.points-wallet-actions small {
  color: #ffffff9c;
  font-size: 11px;
  line-height: 1.4;
}
.points-wallet-actions i {
  color: #ffffff8f;
  font-size: 19px;
  font-style: normal;
  line-height: 1;
  position: absolute;
  top: 15px;
  right: 14px;
}
.reward-section {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 20px;
  margin-top: 12px;
  padding: 18px;
  scroll-margin-top: 12px;
  box-shadow: 0 9px 26px #191f2f0a;
}
.reward-section > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}
.reward-section header h2 {
  margin: 0;
  font-size: 18px;
}
.reward-section header p {
  color: #747b87;
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.5;
}
.reward-section header > small {
  color: #747b87;
  text-align: right;
  font-size: 10px;
  line-height: 1.5;
}
.points-earning-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}
.points-earning-grid > a {
  color: #30343c;
  background: linear-gradient(145deg, #fff, #f8f9fb);
  border: 1px solid #e9ecf1;
  border-radius: 17px;
  flex-direction: column;
  min-width: 0;
  min-height: 106px;
  padding: 13px;
  display: flex;
}
.points-earning-title {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}
.points-earning-title > i {
  width: 38px;
  height: 38px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 13px;
  flex: 0 0 38px;
  place-items: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.points-earning-title > strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
}
.points-earning-grid > a > small {
  color: #747b87;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 32px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}
.points-earning-note {
  color: #71623e;
  background: #fff8e8;
  border-radius: 11px;
  margin: 10px 2px 0;
  padding: 9px 11px;
  font-size: 10px;
  line-height: 1.65;
}
.membership-hero {
  color: #fff;
  background:
    radial-gradient(circle at 88% 0, #ffda784d, #0000 34%),
    linear-gradient(132deg, #171a23, #40372f);
  border-radius: 24px;
  grid-template-columns: 58px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 16px;
  min-height: 174px;
  padding: 22px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 35px #16192224;
}
.membership-hero:after {
  content: "";
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 230px;
  height: 230px;
  position: absolute;
  bottom: -108px;
  right: -55px;
}
.membership-level-mark {
  z-index: 1;
  color: #513611;
  background: linear-gradient(145deg, #ffe9aa, #e9b94e);
  border-radius: 19px;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 20px;
  font-weight: 950;
  display: grid;
  box-shadow: 0 9px 24px #00000029;
}
.membership-hero.normal .membership-level-mark {
  color: #4a505a;
  background: linear-gradient(145deg, #f5f6f8, #cfd3d9);
}
.membership-hero-copy {
  z-index: 1;
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.membership-hero-copy > span {
  color: #f1cf83;
  letter-spacing: 0.14em;
  font-size: 8px;
  font-weight: 900;
}
.membership-hero-copy h1 {
  margin: 4px 0 7px;
  font-size: 24px;
}
.membership-hero-copy strong {
  font-size: 12px;
}
.membership-hero-copy p {
  color: #ffffff94;
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.55;
}
.membership-hero-copy time {
  color: #ffffff70;
  margin-top: 8px;
  font-size: 8px;
}
.membership-hero > a {
  z-index: 1;
  color: #fff;
  background: #ffffff12;
  border: 1px solid #ffffff1c;
  border-radius: 17px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  padding: 12px;
  display: flex;
}
.membership-hero > a small {
  color: #ffffff8c;
  font-size: 8px;
}
.membership-hero > a b {
  color: #f5d68c;
  margin: 3px 0 8px;
  font-size: 23px;
}
.membership-hero > a i {
  color: #ffffffb8;
  font-size: 8px;
  font-style: normal;
}
.membership-scope-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 9px 0;
  display: grid;
}
.membership-scope-row:last-child {
  border-bottom: 0;
}
.membership-scope-row > strong {
  font-size: 11px;
}
.membership-scope-row > div {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.membership-scope-row span {
  color: #946219;
  background: #fff5df;
  border-radius: 11px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 750;
}
.membership-scope-row p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
}
.vip-plan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}
.vip-plan {
  background: linear-gradient(160deg, #fffdf8, #faf4e7);
  border: 1px solid #eee8dc;
  border-radius: 15px;
  padding: 15px 13px;
}
.vip-plan > span {
  color: #b7832c;
  font-size: 9px;
  font-weight: 900;
}
.vip-plan h3 {
  margin: 7px 0 2px;
  font-size: 13px;
}
.vip-plan p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
}
.vip-plan > strong {
  color: #a86c0b;
  margin: 13px 0 9px;
  font-size: 20px;
  display: block;
}
.vip-plan > strong small {
  font-size: 9px;
}
.vip-plan button {
  color: #fff;
  background: #2c2924;
  border: 0;
  border-radius: 14px;
  width: 100%;
  padding: 8px 4px;
  font-size: 9px;
  font-weight: 800;
}
.vip-plan button:disabled {
  opacity: 0.55;
}
.vip-plan.svip {
  background: linear-gradient(160deg, #fbfaff, #eeedff);
  border-color: #dad8ff;
}
.vip-plan.svip > span,
.vip-plan.svip > strong {
  color: #6555ce;
}
.point-ledger-list {
  display: grid;
}
.point-ledger-list article {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  display: flex;
}
.point-ledger-list article:last-child {
  border-bottom: 0;
}
.point-ledger-list article > div {
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 0;
  display: flex;
}
.point-ledger-list strong {
  font-size: 13px;
}
.point-ledger-list small {
  color: #747b87;
  font-size: 11px;
}
.point-ledger-list b {
  font-size: 15px;
}
.point-ledger-list b.credit {
  color: #1c8f65;
}
.point-ledger-list b.debit {
  color: #c64c60;
}
.point-ledger-list > p {
  color: #747b87;
  text-align: center;
  font-size: 11px;
}
.reward-pagination {
  border-top: 1px solid var(--line);
  color: #747b87;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  padding-top: 12px;
  font-size: 10px;
  display: flex;
}
.reward-pagination div {
  gap: 6px;
  display: flex;
}
.reward-pagination button {
  border: 1px solid var(--line);
  color: #4d535e;
  background: #f7f8fa;
  border-radius: 12px;
  min-height: 34px;
  padding: 6px 11px;
  font-size: 10px;
}
.reward-pagination button:disabled {
  opacity: 0.4;
}
.reward-exchange-tabs,
.reward-record-tabs {
  background: #f2f3f5;
  border-radius: 13px;
  gap: 3px;
  margin: 0 0 14px;
  padding: 3px;
  display: flex;
}
.reward-exchange-tabs button,
.reward-record-tabs button {
  color: #686f7b;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  flex: 1;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 750;
}
.reward-exchange-tabs button.active,
.reward-record-tabs button.active {
  color: #20232b;
  background: #fff;
  box-shadow: 0 2px 9px #14192312;
}
.reward-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}
.reward-product {
  background: linear-gradient(155deg, #fff, #f5f8ff);
  border: 1px solid #e8ebef;
  border-radius: 15px;
  padding: 15px 13px;
  position: relative;
  overflow: hidden;
}
.reward-product.cash {
  background: linear-gradient(155deg, #fff, #eefaf4);
}
.reward-product.mobile_credit {
  background: linear-gradient(155deg, #fff, #fff5eb);
}
.reward-product > span {
  color: #1a825e;
  font-size: 10px;
  font-weight: 900;
}
.reward-product.mobile_credit > span {
  color: #c56f22;
}
.reward-product h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 7px 0 10px;
  font-size: 13px;
  overflow: hidden;
}
.reward-product > strong {
  font-size: 25px;
  display: block;
}
.reward-product p {
  color: #747b87;
  margin: 4px 0 12px;
  font-size: 11px;
}
.reward-product p b {
  color: #333842;
}
.reward-product button {
  color: #fff;
  background: #262a31;
  border: 0;
  border-radius: 14px;
  width: 100%;
  min-height: 40px;
  padding: 8px 5px;
  font-size: 11px;
  font-weight: 800;
}
.reward-product button:disabled {
  opacity: 0.42;
}
.reward-inline-state {
  color: var(--muted);
  text-align: center;
  padding: 24px 12px;
  font-size: 10px;
}
.redemption-list {
  display: grid;
}
.redemption-list > article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 9px 0;
  display: grid;
}
.redemption-list > article > i {
  color: #14825b;
  background: #e4f7ef;
  border-radius: 11px;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.redemption-list > article > i.mobile_credit {
  color: #c56b18;
  background: #fff0df;
}
.redemption-list article > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.redemption-list article strong {
  font-size: 12px;
}
.redemption-list article small {
  color: #747b87;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}
.redemption-list article em {
  color: #b74b5e;
  font-size: 10px;
  font-style: normal;
}
.redemption-list > p {
  color: #747b87;
  text-align: center;
  font-size: 11px;
}
.redemption-status {
  color: #8c6018;
  white-space: nowrap;
  background: #fff2d8;
  border-radius: 9px;
  padding: 6px 8px;
  font-size: 10px;
}
.redemption-status.approved {
  color: #306db5;
  background: #eaf3ff;
}
.redemption-status.fulfilled {
  color: #167852;
  background: #e5f7ef;
}
.redemption-status.rejected {
  color: #b34454;
  background: #ffebee;
}
.redemption-more {
  border: 1px solid var(--line);
  color: #555c67;
  background: #f8f9fa;
  border-radius: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 9px;
  font-size: 10px;
}
.reward-exchange-layer {
  z-index: 2147483300;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #07090e94;
  justify-content: center;
  align-items: flex-end;
  padding: 18px 14px;
  display: flex;
  position: fixed;
  inset: 0;
}
.reward-exchange-dialog {
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 22px;
  width: min(100%, 460px);
  max-height: calc(100dvh - 36px);
  padding: 20px;
  overflow-y: auto;
  box-shadow: 0 24px 70px #00000047;
}
.reward-exchange-dialog > header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.reward-exchange-dialog header > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.reward-exchange-dialog header span {
  color: #c8861d;
  letter-spacing: 0.13em;
  font-size: 8px;
  font-weight: 900;
}
.reward-exchange-dialog header strong {
  font-size: 19px;
}
.reward-exchange-dialog header small {
  color: var(--muted);
  font-size: 10px;
}
.reward-exchange-dialog header button {
  background: #f1f2f4;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 21px;
  display: grid;
}
.reward-bound-account {
  background: #f1f2f5;
  border-radius: 13px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  margin-top: 17px;
  padding: 4px;
  display: grid;
}
.reward-bound-account > button {
  color: #777e89;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  min-height: 42px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
}
.reward-bound-account > button:first-child {
  text-align: left;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.reward-bound-account > button span,
.reward-bound-account > button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.reward-bound-account > button strong {
  color: #4d535e;
  font-size: 12px;
}
.reward-bound-account > button.active {
  color: #8b5a09;
  background: #fff;
  box-shadow: 0 3px 11px #1b1f2b14;
}
.reward-bound-account > button.active strong {
  color: #8b5a09;
}
.reward-bound-account > button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.reward-exchange-dialog > label {
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
  display: flex;
}
.reward-exchange-dialog label span {
  color: #555c67;
  font-size: 10px;
  font-weight: 800;
}
.reward-exchange-dialog input {
  border: 1px solid #dfe2e6;
  border-radius: 12px;
  outline: none;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  font-size: 13px;
}
.reward-exchange-dialog input:focus {
  border-color: #e6ad4e;
  box-shadow: 0 0 0 3px #e6ad4e1f;
}
.reward-bound-account-tip {
  color: #7f632a;
  background: #fff8e6;
  border-radius: 11px;
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.55;
}
.reward-exchange-safety {
  color: var(--muted);
  margin: 12px 0;
  font-size: 9px;
  line-height: 1.6;
}
.reward-exchange-error {
  color: #b33348;
  background: #fff0f3;
  border-radius: 10px;
  margin: 0 0 11px;
  padding: 9px 11px;
  font-size: 10px;
  line-height: 1.5;
}
.reward-exchange-error.uncertain {
  color: #8a5c12;
  background: #fff6df;
}
.reward-exchange-check {
  color: #8a641e;
  background: #fffaf0;
  border: 1px solid #ead8ad;
  border-radius: 14px;
  width: 100%;
  min-height: 38px;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
}
.reward-exchange-submit {
  color: #fff;
  background: linear-gradient(100deg, #252932, #414855);
  border: 0;
  border-radius: 16px;
  width: 100%;
  min-height: 43px;
  font-size: 11px;
  font-weight: 900;
}
.reward-exchange-submit:disabled {
  opacity: 0.56;
}
@media (width<=700px) {
  .vip-plan-grid {
    scrollbar-width: none;
    grid-template-columns: none;
    grid-auto-columns: 145px;
    grid-auto-flow: column;
    overflow-x: auto;
  }
  .points-wallet,
  .reward-wallet {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 0.78fr);
    gap: 12px;
    min-height: 188px;
    padding: 17px;
  }
  .reward-wallet-points {
    border-bottom: 0;
    border-right: 1px solid #ffffff1c;
    min-height: 154px;
    padding: 2px 12px 2px 0;
  }
  .reward-wallet-points > strong {
    font-size: clamp(34px, 10vw, 46px);
  }
  .reward-wallet-points > small {
    line-height: 1.45;
  }
  .reward-wallet-totals {
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;
  }
  .points-wallet-actions {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .points-wallet-actions > a {
    -moz-column-gap: 7px;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    column-gap: 7px;
    min-height: 0;
    padding: 10px 25px 10px 10px;
    display: grid;
  }
  .points-wallet-actions > a > span {
    border-radius: 10px;
    width: 31px;
    height: 31px;
  }
  .points-wallet-actions > a > div {
    gap: 2px;
    margin-top: 0;
  }
  .points-wallet-actions b {
    font-size: 13px;
  }
  .points-wallet-actions small {
    font-size: 10px;
  }
  .points-wallet-actions i {
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
  }
  .points-earning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .points-earning-grid > a {
    min-height: 106px;
    padding: 12px;
  }
  .points-earning-title {
    gap: 5px;
  }
  .points-earning-title > i {
    border-radius: 10px;
    flex-basis: 31px;
    width: 31px;
    height: 31px;
  }
  .points-earning-title > strong {
    font-size: 13px;
  }
  .membership-hero {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
  }
  .membership-level-mark {
    border-radius: 15px;
    width: 46px;
    height: 46px;
    font-size: 16px;
  }
  .membership-hero > a {
    flex-direction: row;
    grid-column: 1/-1;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
    min-height: auto;
    padding: 10px 12px;
  }
  .membership-hero > a b {
    margin: 0;
    font-size: 17px;
  }
  .membership-hero > a i {
    margin-left: auto;
  }
}
@media (width<=360px) {
  .points-wallet,
  .reward-wallet {
    grid-template-columns: minmax(0, 1fr) 122px;
    gap: 10px;
    padding: 14px;
  }
  .reward-wallet-points {
    padding-right: 10px;
  }
  .reward-wallet-points > strong {
    font-size: 32px;
  }
  .reward-wallet-points > small,
  .reward-wallet-totals {
    font-size: 10px;
  }
  .points-wallet-actions > a {
    padding: 9px 20px 9px 9px;
  }
  .points-wallet-actions b {
    font-size: 12px;
  }
  .points-wallet-actions small {
    font-size: 9px;
  }
  .points-wallet-actions i {
    right: 7px;
  }
}
@media (width<=700px) {
  .reward-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reward-exchange-layer {
    padding: 0;
  }
  .reward-exchange-dialog {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
}
.activity-page {
  width: min(100%, 760px);
  min-height: 100dvh;
  padding: 0 12px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
  background: var(--bg);
  margin: 0 auto;
}
.activity-topbar {
  text-align: center;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  height: 56px;
  display: grid;
}
.activity-topbar > button {
  color: #333842;
  background: #fff;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 25px;
  line-height: 1;
  display: grid;
}
.activity-topbar > button:last-child {
  color: #6d737e;
  font-size: 18px;
}
.activity-topbar > button:disabled {
  opacity: 0.42;
}
.activity-topbar > strong {
  font-size: 17px;
}
.activity-error {
  color: #ad3447;
  background: #fff0f3;
  border-radius: 12px;
  margin: 0 0 10px;
  padding: 10px 13px;
  font-size: 10px;
  line-height: 1.5;
}
.activity-login,
.activity-state {
  text-align: center;
  background: #fff;
  border-radius: 22px;
  margin-top: 12px;
  padding: 40px 22px;
}
.activity-login > i {
  color: #fff;
  background: linear-gradient(145deg, #ff7048, #ed2f61);
  border-radius: 18px;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 13px;
  font-size: 24px;
  font-style: normal;
  display: grid;
  box-shadow: 0 9px 24px #e7325933;
}
.activity-login > span {
  color: #d34b63;
  letter-spacing: 0.12em;
  font-size: 9px;
  font-weight: 900;
}
.activity-login h1 {
  margin: 8px 0;
  font-size: 20px;
}
.activity-login p {
  max-width: 440px;
  color: var(--muted);
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.7;
}
.activity-login a {
  color: #fff;
  background: #262a32;
  border-radius: 20px;
  margin-top: 17px;
  padding: 10px 24px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.activity-balance-card {
  color: #fff;
  background:
    radial-gradient(circle at 85% 0, #ffd87947, #0000 34%),
    linear-gradient(132deg, #171a23, #37323d);
  border-radius: 24px;
  justify-content: space-between;
  align-items: center;
  min-height: 132px;
  padding: 22px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 35px #16192226;
}
.activity-balance-card:after {
  content: "";
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 220px;
  height: 220px;
  position: absolute;
  bottom: -100px;
  right: -54px;
}
.activity-balance-card > div {
  z-index: 1;
  flex-direction: column;
  display: flex;
}
.activity-balance-card span {
  color: #f4d58a;
  letter-spacing: 0.14em;
  font-size: 8px;
  font-weight: 900;
}
.activity-balance-card strong {
  margin-top: 4px;
  font-size: 39px;
  line-height: 1;
}
.activity-balance-card small {
  color: #ffffff80;
  margin-top: 6px;
  font-size: 9px;
}
.activity-balance-card > a {
  z-index: 1;
  color: #fff;
  background: #ffffff14;
  border: 1px solid #ffffff21;
  border-radius: 17px;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}
.activity-balance-card a b {
  font-size: 17px;
  line-height: 0.7;
}
.activity-card {
  background: #fff;
  border-radius: 20px;
  margin-top: 12px;
  padding: 19px;
  box-shadow: 0 6px 22px #171c2609;
}
.activity-card > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}
.activity-card > header > div {
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.activity-card > header span {
  color: #d65367;
  letter-spacing: 0.13em;
  font-size: 8px;
  font-weight: 900;
}
.activity-card > header h2 {
  margin: 3px 0 0;
  font-size: 18px;
}
.activity-card > header p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 10px;
}
.activity-card > header p b {
  color: #d4445c;
}
.checkin-card > header > button {
  color: #fff;
  background: linear-gradient(105deg, #ff6849, #ed315f);
  border: 0;
  border-radius: 18px;
  min-width: 105px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 7px 18px #e731592b;
}
.checkin-card > header > button:disabled {
  color: #8c919a;
  box-shadow: none;
  background: #eff0f2;
}
.checkin-base {
  background: #fff6f2;
  border-radius: 14px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 12px;
  margin-top: 16px;
  padding: 11px 13px;
  display: grid;
}
.checkin-base span {
  color: #a94c39;
  font-size: 9px;
  font-weight: 800;
}
.checkin-base strong {
  color: #e34c3a;
  text-align: right;
  font-size: 12px;
}
.checkin-base small {
  color: #a77a70;
  grid-column: 1/-1;
  font-size: 8px;
  line-height: 1.45;
}
.checkin-milestones {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  display: grid;
}
.checkin-milestones article {
  color: #858a94;
  background: #fafbfc;
  border: 1px solid #eceef1;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 75px;
  padding: 10px 5px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.checkin-milestones article:after {
  content: "";
  background: #e8e9ec;
  width: 100%;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
}
.checkin-milestones article.reached {
  color: #9a6818;
  background: #fff9eb;
  border-color: #f1d9ab;
}
.checkin-milestones article.reached:after {
  background: #edbc58;
}
.checkin-milestones article.today {
  box-shadow: 0 0 0 2px #edbc5833;
}
.checkin-milestones span {
  font-size: 8px;
}
.checkin-milestones strong {
  color: currentColor;
  margin-top: 5px;
  font-size: 17px;
}
.checkin-milestones small {
  margin-top: 1px;
  font-size: 7px;
}
.lottery-card {
  background:
    radial-gradient(circle at 50% 23%, #ffe5abcc, #0000 31%),
    linear-gradient(160deg, #fff9ed, #fff2e2);
  overflow: hidden;
}
.lottery-card > header > p {
  color: #9c7244;
  margin: 4px 0 0;
  font-size: 10px;
}
.lottery-card > header > p b {
  color: #e4493f;
  font-size: 14px;
}
.lottery-grid {
  background: #ffffff8c;
  border: 1px solid #d0813529;
  border-radius: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  max-width: 520px;
  margin: 17px auto 0;
  padding: 8px;
  display: grid;
  box-shadow: inset 0 0 28px #e99d4b14;
}
.lottery-grid article {
  color: #7d552d;
  background: linear-gradient(155deg, #fff, #fff8ef);
  border: 1px solid #f0dfca;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 91px;
  padding: 9px 5px;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    transform 0.12s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px #814d1f0e;
}
.lottery-grid article:after {
  content: "";
  background: #edb85e17;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  position: absolute;
  top: -38px;
  right: -34px;
}
.lottery-grid article i {
  color: #a66522;
  background: #ffe8b8;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.lottery-grid article strong {
  color: #4f3824;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-top: 6px;
  font-size: 10px;
  overflow: hidden;
}
.lottery-grid article span {
  color: #e0503e;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 900;
}
.lottery-grid article.active {
  z-index: 1;
  border-color: #ff875c;
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 0 0 3px #ff624429,
    0 8px 19px #e2463c29;
}
.lottery-grid article.winner {
  background: linear-gradient(150deg, #fff8db, #ffe6ad);
}
.lottery-grid article.disabled {
  color: #9b9894;
  box-shadow: none;
  background: #f2f0ed;
  border-color: #e5e2de;
}
.lottery-grid article.disabled i {
  color: #8e8982;
  background: #e5e1db;
}
.lottery-grid article.disabled span,
.lottery-grid article.disabled strong {
  color: #99958f;
}
.lottery-unavailable {
  color: #9b795c;
  text-align: center;
  background: #ffffff8c;
  border-radius: 16px;
  margin-top: 17px;
  padding: 36px 12px;
  font-size: 11px;
}
.lottery-draw-button {
  color: #fff;
  background: linear-gradient(100deg, #ff6a40, #ee2f61);
  border: 0;
  border-radius: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(100%, 330px);
  min-height: 51px;
  margin: 15px auto 0;
  display: flex;
  box-shadow: 0 10px 24px #e0364f38;
}
.lottery-draw-button span {
  font-size: 13px;
  font-weight: 900;
}
.lottery-draw-button small {
  color: #ffffffb3;
  margin-top: 2px;
  font-size: 8px;
}
.lottery-draw-button:disabled {
  color: #9a8e86;
  box-shadow: none;
  background: #e9e2dc;
}
.lottery-result {
  color: #845314;
  background: #fff8de;
  border: 1px solid #f0d390;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 12px;
  display: flex;
}
.lottery-result i {
  color: #ed9f28;
  font-style: normal;
}
.lottery-result span {
  font-size: 10px;
}
.lottery-result strong {
  color: #df4b36;
  font-size: 15px;
}
.activity-result-enter-active,
.activity-result-leave-active {
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.activity-result-enter-from,
.activity-result-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
.activity-record-card > header small {
  color: var(--muted);
  font-size: 8px;
}
.activity-record-list {
  margin-top: 11px;
  display: grid;
}
.activity-record-list article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 7px 0;
  display: grid;
}
.activity-record-list article > i {
  color: #9b6717;
  background: #fff0cf;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.activity-record-list article > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.activity-record-list article strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}
.activity-record-list article small {
  color: var(--muted);
  font-size: 8px;
}
.activity-record-list article > b {
  color: #1b9365;
  font-size: 13px;
}
.activity-record-list > p {
  color: var(--muted);
  text-align: center;
  padding: 20px;
  font-size: 10px;
}
.activity-pagination {
  border-top: 1px solid var(--line);
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 11px;
  font-size: 9px;
  display: flex;
}
.activity-pagination div {
  gap: 6px;
  display: flex;
}
.activity-pagination button {
  border: 1px solid var(--line);
  color: #565c66;
  background: #f7f8fa;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 9px;
}
.activity-pagination button:disabled {
  opacity: 0.4;
}
@media (width<=520px) {
  .activity-card {
    padding: 16px;
  }
  .activity-balance-card {
    min-height: 116px;
    padding: 19px;
  }
  .activity-balance-card strong {
    font-size: 34px;
  }
  .checkin-milestones {
    gap: 6px;
  }
  .checkin-milestones article {
    min-height: 68px;
    padding-inline: 3px;
  }
  .lottery-grid {
    gap: 5px;
    padding: 6px;
  }
  .lottery-grid article {
    min-height: 84px;
    padding-inline: 3px;
  }
}
.promotion-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding-inline: 12px;
}
.promotion-topbar {
  text-align: center;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  height: 56px;
  display: grid;
}
.promotion-topbar > a {
  color: #252932;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 27px;
  line-height: 1;
  display: grid;
}
.promotion-topbar strong {
  font-size: 17px;
}
.promotion-login,
.promotion-state {
  text-align: center;
  background: #fff;
  border-radius: 22px;
  margin-top: 12px;
  padding: 34px 22px;
}
.promotion-login > i {
  color: #745218;
  background: #f5d792;
  border-radius: 18px;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 13px;
  font-size: 24px;
  font-style: normal;
  display: grid;
}
.promotion-card > header span,
.promotion-login > span {
  color: #c68a25;
  letter-spacing: 0.12em;
  font-size: 9px;
  font-weight: 900;
}
.promotion-login h1 {
  margin: 7px 0;
  font-size: 20px;
}
.promotion-login p {
  max-width: 430px;
  color: var(--muted);
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.65;
}
.promotion-login a {
  color: #fff;
  background: #242830;
  border-radius: 20px;
  margin-top: 16px;
  padding: 10px 24px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.promotion-error {
  color: #ad3447;
  background: #fff0f3;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
  padding: 10px 13px;
  font-size: 10px;
  display: flex;
}
.promotion-error button {
  color: #a3283e;
  background: #ffdce3;
  border: 0;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 9px;
}
.promotion-hero {
  color: #fff;
  background:
    radial-gradient(circle at 95% 0, #ffd57c47, #0000 34%),
    linear-gradient(135deg, #171a22, #34313b);
  border-radius: 24px;
  padding: 21px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 13px 35px #191c2524;
}
.promotion-hero:after {
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 240px;
  height: 240px;
  position: absolute;
  bottom: -118px;
  right: -70px;
}
.promotion-hero-heading {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}
.promotion-hero-heading > div {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.promotion-hero-heading span {
  color: #f2cf83;
  letter-spacing: 0.13em;
  font-size: 8px;
  font-weight: 900;
}
.promotion-hero-heading small {
  color: #ffffff8c;
  font-size: 9px;
}
.promotion-hero-heading button {
  color: #fff;
  background: #ffffff14;
  border: 1px solid #ffffff24;
  border-radius: 13px;
  padding: 6px 10px;
  font-size: 9px;
}
.promotion-hero > strong {
  z-index: 1;
  overflow-wrap: anywhere;
  color: #ffe2a2;
  letter-spacing: 0.08em;
  margin: 13px 0 16px;
  font-size: 27px;
  display: block;
  position: relative;
}
.promotion-link-box {
  z-index: 1;
  background: #ffffff12;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 7px 7px 11px;
  display: flex;
  position: relative;
}
.promotion-link-box span {
  color: #ffffffb3;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: 9px;
  overflow: hidden;
}
.promotion-link-box button {
  color: #302512;
  background: #f5d486;
  border: 0;
  border-radius: 11px;
  flex: none;
  padding: 7px 11px;
  font-size: 9px;
  font-weight: 900;
}
.promotion-share-action {
  z-index: 1;
  color: #28231b;
  background: linear-gradient(100deg, #ffe5a7, #eabb5d);
  border: 0;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  margin-top: 11px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  position: relative;
}
.promotion-share-action svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 17px;
  height: 17px;
}
.promotion-hero > p {
  z-index: 1;
  color: #ffffff80;
  margin: 10px 1px 0;
  font-size: 9px;
  line-height: 1.55;
  position: relative;
}
.promotion-metrics {
  background: var(--line);
  border-radius: 18px;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 12px;
  display: grid;
  overflow: hidden;
}
.promotion-metrics article {
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 82px;
  display: flex;
}
.promotion-metrics strong {
  font-size: 19px;
}
.promotion-metrics span {
  color: var(--muted);
  margin-top: 5px;
  font-size: 9px;
}
.promotion-card {
  background: #fff;
  border-radius: 18px;
  margin-top: 12px;
  padding: 18px;
}
.promotion-card > header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  display: flex;
}
.promotion-card > header h2 {
  margin: 3px 0 0;
  font-size: 17px;
}
.promotion-card > header > small {
  color: var(--muted);
  font-size: 9px;
}
.promotion-rules > article {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 11px;
  padding: 11px;
  display: flex;
}
.promotion-rules > article:last-child {
  border-bottom: 0;
}
.promotion-rules article > i {
  color: #8d631c;
  background: #f9e2b0;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.promotion-rules article > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.promotion-rules article strong {
  font-size: 11px;
}
.promotion-rules article small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}
.promotion-levels {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  display: grid;
}
.promotion-levels article {
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  min-height: 76px;
  padding: 12px;
  display: flex;
}
.promotion-levels span {
  color: var(--muted);
  font-size: 9px;
}
.promotion-levels strong {
  margin-top: auto;
  font-size: 20px;
}
.promotion-detail-tabs {
  background: #f2f3f5;
  border-radius: 13px;
  gap: 3px;
  margin-bottom: 11px;
  padding: 3px;
  display: flex;
}
.promotion-detail-tabs button {
  color: #747983;
  background: 0 0;
  border: 0;
  border-radius: 10px;
  flex: 1;
  min-height: 34px;
  font-size: 10px;
  font-weight: 800;
}
.promotion-detail-tabs button.active {
  color: #20232b;
  background: #fff;
  box-shadow: 0 2px 9px #14192312;
}
.promotion-level-filter {
  scrollbar-width: none;
  gap: 6px;
  margin-bottom: 7px;
  display: flex;
  overflow-x: auto;
}
.promotion-level-filter button {
  color: #777d87;
  white-space: nowrap;
  background: #f4f5f7;
  border: 0;
  border-radius: 12px;
  min-width: 49px;
  padding: 6px 10px;
  font-size: 9px;
}
.promotion-level-filter button.active {
  color: #6a4911;
  background: #f6dda4;
  font-weight: 900;
}
.promotion-record-list {
  display: grid;
}
.promotion-record-list > article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 7px 0;
  display: grid;
}
.promotion-record-list > article:last-of-type {
  border-bottom: 0;
}
.promotion-record-list i {
  color: #a16b11;
  background: #fff0d3;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}
.promotion-record-list i.muted {
  color: #818791;
  background: #eceef1;
}
.promotion-record-list article > div {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.promotion-record-list article strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}
.promotion-record-list article small {
  color: var(--muted);
  font-size: 8px;
}
.promotion-record-list article > span {
  color: #18815b;
  text-align: right;
  max-width: 160px;
  font-size: 9px;
}
.promotion-record-list article > span.skipped {
  color: #a96f15;
}
.promotion-record-list > p {
  color: var(--muted);
  text-align: center;
  padding: 23px 0 12px;
  font-size: 10px;
}
@media (width<=600px) {
  .promotion-levels,
  .promotion-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .promotion-hero {
    padding: 19px;
  }
  .promotion-record-list article > span {
    max-width: 110px;
  }
}
.account-form {
  background: #fff;
  border-radius: 18px;
  gap: 14px;
  padding: 20px;
  display: grid;
}
.account-form label {
  gap: 7px;
  display: grid;
}
.account-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.account-form input {
  border: 1px solid var(--line);
  background: #f8f9fa;
  border-radius: 11px;
  outline: none;
  width: 100%;
  padding: 12px 13px;
}
.account-form input:focus {
  border-color: var(--accent);
}
.account-tabs {
  background: #f2f3f5;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  display: grid;
}
.account-tabs button {
  background: 0 0;
  border: 0;
  border-radius: 9px;
  padding: 9px;
}
.account-tabs button.active {
  color: #fff;
  background: var(--accent);
  font-weight: 800;
}
.primary-action {
  color: #fff;
  background: linear-gradient(90deg, #ff663d, #ff3158);
  border: 0;
  border-radius: 22px;
  padding: 12px;
  font-weight: 800;
}
.benefit-message,
.form-error {
  color: #9b3c2f;
  background: #fff0ed;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12px;
}
.vip-card > a {
  color: #352617;
  background: linear-gradient(90deg, #f5ce80, #fff0bd);
  border-radius: 15px;
  flex: none;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 800;
}
.plans-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
  display: grid;
}
.plans-grid article {
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  min-width: 0;
  padding: 17px;
  display: flex;
}
.plans-grid span {
  color: #d18c29;
  font-size: 10px;
  font-weight: 800;
}
.plans-grid h2 {
  margin: 7px 0;
  font-size: 16px;
}
.plans-grid strong {
  font-size: 24px;
}
.plans-grid p {
  color: var(--muted);
  font-size: 11px;
}
.plans-grid button {
  color: #fff;
  background: #202126;
  border: 0;
  border-radius: 16px;
  margin-top: auto;
  padding: 9px;
  font-size: 11px;
}
.ledger-list article {
  border-top: 1px solid var(--line);
  align-items: center;
  padding: 12px 0;
  display: flex;
}
.ledger-list article > div {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.ledger-list small {
  color: var(--muted);
  font-size: 10px;
}
.ledger-list b.credit {
  color: #1d9b55;
}
.ledger-list b.debit {
  color: var(--accent);
}
.feature-page {
  width: min(100%, 700px);
  min-height: calc(100dvh - 62px);
  padding: 0 14px calc(var(--nav-height) + 14px + env(safe-area-inset-bottom));
  color: var(--text);
  background: var(--bg);
  margin: 0 auto;
}
.benefit-directory {
  gap: 0;
  display: grid;
}
.benefit-directory-header {
  z-index: 12;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  gap: 9px;
  margin: 0 -14px;
  padding: 10px 14px 8px;
  display: grid;
  position: sticky;
  top: 62px;
}
.benefit-directory-header h1 {
  margin: 0;
  font-size: 19px;
}
.benefit-directory-header nav {
  background: var(--surface-soft);
  border-radius: 10px;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 3px;
  display: grid;
}
.benefit-directory-header nav button {
  min-height: 31px;
  color: var(--muted);
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
}
.benefit-directory-header nav button.active {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: 0 1px 7px #0000001f;
}
.benefit-ad-section {
  border-bottom: 1px solid var(--line);
  background: 0 0;
  padding: 13px 0 10px;
}
.benefit-ad-section h2 {
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 14px;
  display: flex;
}
.benefit-ad-section h2 i {
  background: #ff4c64;
  border-radius: 3px;
  width: 3px;
  height: 14px;
}
.benefit-hot-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 6px;
  display: grid;
}
.benefit-hot-grid button {
  min-width: 0;
  color: var(--text);
  cursor: pointer;
  background: 0 0;
  border: 0;
  justify-items: center;
  gap: 5px;
  padding: 0;
  display: grid;
}
.benefit-hot-grid button > strong {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}
.benefit-ad-icon,
.benefit-list-icon {
  background: var(--surface-soft);
  border-radius: 11px;
  display: block;
  overflow: hidden;
}
.benefit-ad-icon {
  aspect-ratio: 1;
  width: min(100%, 52px);
}
.benefit-ad-icon img,
.benefit-ad-icon video,
.benefit-list-icon img,
.benefit-list-icon video {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.benefit-recommend-list {
  display: grid;
}
.benefit-recommend-list > button {
  border: 0;
  border-top: 1px solid var(--line);
  min-height: 66px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: 0 0;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  display: grid;
}
.benefit-recommend-list > button:first-child {
  border-top: 0;
}
.benefit-list-icon {
  width: 50px;
  height: 50px;
}
.benefit-list-copy {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.benefit-list-copy small,
.benefit-list-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.benefit-list-copy strong {
  font-size: 14px;
}
.benefit-list-copy small {
  color: var(--muted);
  font-size: 10px;
}
.benefit-recommend-list > button > b {
  min-width: 58px;
  min-height: 34px;
  color: var(--action-fg);
  background: var(--action-solid);
  white-space: nowrap;
  border-radius: 17px;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition:
    background 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
  display: inline-flex;
  box-shadow: 0 3px 9px #b2184633;
}
@media (hover: hover) {
  .benefit-recommend-list > button:hover > b {
    background: #b71d43;
    transform: translateY(-1px);
    box-shadow: 0 5px 13px #b2184645;
  }
  :root[data-theme="dark"] .benefit-recommend-list > button:hover > b {
    background: #bf2049;
    box-shadow: 0 5px 13px #00000061;
  }
}
.benefit-recommend-list > button:active > b {
  transform: scale(0.96);
  box-shadow: 0 2px 5px #b218462e;
}
.benefit-recommend-list > button:focus-visible > b {
  outline: 2px solid var(--premium-focus-ring, #8d1740);
  outline-offset: 2px;
}
.benefit-empty {
  color: var(--muted);
  text-align: center;
  margin: 18px 0;
  font-size: 12px;
}
.loading-grid span,
.loading-list span {
  background: linear-gradient(90deg, #1a1b20, #25272d, #1a1b20) 0 0/200% 100%;
  border-radius: 10px;
  animation: 1.4s infinite feature-loading;
  display: block;
}
.loading-grid span {
  aspect-ratio: 1;
}
.loading-list {
  gap: 9px;
}
.loading-list span {
  height: 70px;
}
@keyframes feature-loading {
  to {
    background-position: -200% 0;
  }
}
.channel-row {
  border-top: 1px solid var(--line);
  align-items: center;
  padding: 13px 0;
  display: flex;
}
.channel-row > div {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.channel-row small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}
.channel-row > b {
  color: var(--accent);
  font-size: 11px;
}
.simple-app-page.partner-page {
  width: min(100%, 720px);
  min-height: 100dvh;
  padding: 0 14px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
  background: #f4f5f7;
}
.partner-topbar {
  text-align: center;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  height: 58px;
  display: grid;
}
.partner-topbar > a {
  color: #2e3440;
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  box-shadow: 0 4px 14px #191f2f0e;
}
.partner-topbar svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9px;
  width: 20px;
  height: 20px;
}
.partner-topbar > strong {
  font-size: 17px;
}
.partner-hero {
  color: #fff;
  background:
    radial-gradient(circle at 92% 4%, #7660da61, #0000 33%),
    radial-gradient(circle at 10% 110%, #ff315833, #0000 41%),
    linear-gradient(138deg, #171b28, #272d43);
  border-radius: 25px;
  min-height: 226px;
  padding: 27px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px #181d3029;
}
.partner-hero:after,
.partner-hero:before {
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  position: absolute;
}
.partner-hero:before {
  width: 260px;
  height: 260px;
  top: -116px;
  right: -50px;
}
.partner-hero:after {
  width: 190px;
  height: 190px;
  bottom: -118px;
  right: 66px;
}
.partner-hero-copy {
  z-index: 1;
  max-width: 470px;
  padding-right: 120px;
  position: relative;
}
.partner-hero-copy > span {
  color: #ffbcc8;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 900;
}
.partner-hero-copy h1 {
  letter-spacing: -0.035em;
  margin: 8px 0 10px;
  font-size: clamp(27px, 5vw, 39px);
  line-height: 1.12;
}
.partner-hero-copy p {
  color: #ffffffa6;
  max-width: 430px;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}
.partner-hero-mark {
  z-index: 1;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(145deg, #ffffff26, #ffffff0f);
  border: 1px solid #ffffff1f;
  border-radius: 25px;
  place-items: center;
  width: 78px;
  height: 78px;
  display: grid;
  position: absolute;
  top: 36px;
  right: 32px;
  transform: rotate(4deg);
  box-shadow: 0 18px 42px #0508133d;
}
.partner-hero-mark svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55px;
  width: 42px;
  height: 42px;
}
.partner-preparing {
  z-index: 1;
  color: #ffffffd1;
  background: #ffffff12;
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  bottom: 24px;
  left: 27px;
}
.partner-preparing i {
  background: #ff6682;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px #ff668221;
}
.partner-application-card,
.partner-section {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 20px;
  margin-top: 12px;
  padding: 19px;
  box-shadow: 0 9px 26px #191f2f0a;
}
.partner-section-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}
.partner-section-heading > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.partner-application-card > header span,
.partner-section-heading span {
  color: var(--accent);
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 900;
}
.partner-application-card h2,
.partner-section-heading h2 {
  margin: 0;
  font-size: 18px;
}
.partner-section-heading > small {
  color: #8a909a;
  font-size: 10px;
}
.partner-benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}
.partner-benefit-grid article {
  background: linear-gradient(145deg, #fff, #f8f9fb);
  border: 1px solid #e9ecf1;
  border-radius: 17px;
  flex-direction: column;
  min-width: 0;
  min-height: 132px;
  padding: 14px;
  display: flex;
}
.partner-benefit-grid article > i {
  width: 40px;
  height: 40px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 13px;
  place-items: center;
  font-style: normal;
  display: grid;
}
.partner-benefit-grid svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 21px;
  height: 21px;
}
.partner-benefit-grid article > div {
  flex-direction: column;
  gap: 5px;
  margin-top: 11px;
  display: flex;
}
.partner-benefit-grid strong {
  font-size: 13px;
}
.partner-benefit-grid small {
  color: #747b87;
  font-size: 10px;
  line-height: 1.55;
}
.partner-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.partner-flow li {
  background: #f6f7f9;
  border-radius: 15px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  display: flex;
  position: relative;
}
.partner-flow li > b {
  color: #fff;
  background: #272c3c;
  border-radius: 10px;
  flex: 0 0 31px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 11px;
  display: grid;
}
.partner-flow li > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.partner-flow strong {
  font-size: 12px;
}
.partner-flow small {
  color: #777e89;
  font-size: 9px;
  line-height: 1.45;
}
.partner-application-card > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  display: flex;
}
.partner-application-card > header > div {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}
.partner-application-card > header p {
  color: #747b87;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}
.partner-application-card > header > i {
  color: #fff;
  background: linear-gradient(145deg, #6f62c9, #ff3158);
  border-radius: 14px;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 17px;
  font-style: normal;
  display: grid;
  box-shadow: 0 8px 20px #71439433;
}
.partner-status-message {
  color: #815e1f;
  background: #fff8e8;
  border: 1px solid #f4d7a0;
  border-radius: 12px;
  margin: 15px 0 0;
  padding: 11px 13px;
  font-size: 11px;
  line-height: 1.55;
}
.partner-application-card form {
  gap: 14px;
  margin-top: 17px;
  display: grid;
}
.partner-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}
.partner-application-card label {
  gap: 7px;
  min-width: 0;
  display: grid;
}
.partner-application-card label > span {
  color: #555c67;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}
.partner-application-card label em {
  color: #a1a5ae;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}
.partner-application-card input,
.partner-application-card select,
.partner-application-card textarea {
  color: #30343c;
  width: 100%;
  font: inherit;
  background: #f8f9fa;
  border: 1px solid #dfe2e7;
  border-radius: 12px;
  outline: 0;
}
.partner-application-card input,
.partner-application-card select {
  height: 45px;
  padding: 0 12px;
}
.partner-application-card textarea {
  resize: vertical;
  min-height: 122px;
  padding: 12px;
  line-height: 1.65;
}
.partner-application-card input:focus,
.partner-application-card select:focus,
.partner-application-card textarea:focus {
  background: #fff;
  border-color: #f397aa;
  box-shadow: 0 0 0 3px #ff315814;
}
.partner-submit {
  color: #fff;
  background: linear-gradient(110deg, #252a39, #414961);
  border: 0;
  border-radius: 16px;
  width: 100%;
  min-height: 46px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 9px 22px #1e233324;
}
.partner-form-note {
  color: #91969f;
  text-align: center;
  font-size: 9px;
  line-height: 1.5;
}
@media (width<=600px) {
  .partner-hero {
    min-height: 218px;
    padding: 22px;
  }
  .partner-hero-copy {
    padding-right: 76px;
  }
  .partner-hero-copy h1 {
    font-size: 28px;
  }
  .partner-hero-mark {
    border-radius: 20px;
    width: 62px;
    height: 62px;
    top: 30px;
    right: 20px;
  }
  .partner-hero-mark svg {
    width: 34px;
    height: 34px;
  }
  .partner-preparing {
    bottom: 20px;
    left: 22px;
  }
  .partner-benefit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .partner-benefit-grid article {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 0;
    padding: 12px;
  }
  .partner-benefit-grid article > i {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }
  .partner-benefit-grid article > div {
    margin-top: 0;
  }
  .partner-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .partner-flow li {
    min-height: 62px;
  }
  .partner-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.splash-ad {
  z-index: 2147483050;
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #06080f9e;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: auto;
}
.splash-panel {
  background:
    radial-gradient(circle at 20% 20%, #ff546f8c, #0000 32%),
    radial-gradient(circle at 85% 68%, #6e57ff8c, #0000 34%), #0d0e13;
  border: 1px solid #ffffff1f;
  border-radius: 24px;
  flex-direction: column;
  width: min(100%, 520px);
  min-height: 0;
  max-height: calc(100dvh - 40px);
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 90px #00000073;
}
.splash-panel:before {
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff2b;
  border-radius: 50%;
  height: 48%;
  position: absolute;
  inset: 15% -20% auto;
  transform: rotate(-18deg);
}
.splash-skip {
  z-index: 2;
  color: #fff;
  cursor: pointer;
  background: #00000061;
  border: 1px solid #ffffff3d;
  border-radius: 18px;
  padding: 7px 12px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.splash-brand {
  z-index: 1;
  align-items: center;
  gap: 8px;
  padding-right: 90px;
  font-size: 18px;
  font-weight: 900;
  display: flex;
  position: relative;
}
.splash-brand span {
  background: var(--accent);
  place-items: center;
  display: grid;
}
.splash-brand img,
.splash-brand span {
  border-radius: 12px;
  width: 38px;
  height: 38px;
}
.splash-brand img {
  -o-object-fit: contain;
  object-fit: contain;
  background: #fff;
}
.splash-creative {
  z-index: 1;
  color: #fff;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 22px 0;
  padding: 0;
  display: flex;
  position: relative;
  overflow: auto;
}
.splash-asset {
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 16px;
  align-self: center;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(50dvh, 500px);
  display: block;
  box-shadow: 0 22px 70px #00000059;
}
.splash-creative h2 {
  overflow-wrap: anywhere;
  max-width: 100%;
  margin: 16px 0 8px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
}
.splash-creative small {
  color: #ffffffa3;
}
.splash-progress {
  z-index: 1;
  background: #ffffff2e;
  border-radius: 3px;
  flex: none;
  width: 100%;
  height: 3px;
  position: relative;
  overflow: hidden;
}
.splash-progress span {
  border-radius: inherit;
  background: #fff;
  height: 100%;
  transition: width 1s linear;
  display: block;
}
.splash-fade-enter-active,
.splash-fade-leave-active {
  transition: opacity 0.3s;
}
.splash-fade-enter-from,
.splash-fade-leave-to {
  opacity: 0;
}
@media (width<=719px) {
  .splash-ad {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #0d0e13;
    padding: 0;
    display: flex;
    overflow: hidden;
  }
  .splash-panel {
    width: 100%;
    height: 100dvh;
    max-height: none;
    padding: max(28px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
      24px max(30px, env(safe-area-inset-bottom));
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }
  .splash-skip {
    top: max(20px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)));
    right: 18px;
  }
  .splash-creative {
    margin: auto 0;
  }
  .splash-asset {
    width: min(100%, 620px);
    max-height: 48dvh;
  }
  .splash-creative h2 {
    font-size: clamp(34px, 10vw, 56px);
  }
}
.history-page {
  padding: 22px 16px
    calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
}
.detail-page,
.history-page {
  background: var(--surface);
  width: min(100%, 1180px);
  min-height: 100vh;
  margin: 0 auto;
}
.detail-page {
  padding: 18px 16px
    calc(var(--nav-height) + 42px + env(safe-area-inset-bottom));
}
.video-detail {
  width: 100%;
}
.detail-stage {
  color: #fff;
  background: #0d0f14;
  border-radius: 22px;
  grid-template-columns: minmax(0, 1.85fr) minmax(280px, 0.75fr);
  display: grid;
  overflow: hidden;
  box-shadow: 0 18px 48px #11141d24;
}
.player-shell {
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  overflow: hidden;
}
.player-shell:has(> .hls-video-frame) {
  aspect-ratio: auto;
}
.hls-video-frame {
  background: #000;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}
.player-shell > .hls-video-frame {
  height: auto;
}
.player-media {
  background: #000;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.player-shell > .hls-video-frame > .player-media {
  aspect-ratio: 16/9;
  flex: none;
}
.hls-video {
  -o-object-fit: contain;
  object-fit: contain;
  background: #000;
  width: 100%;
  height: 100%;
  display: block;
}
.hls-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
.hls-video::-webkit-media-controls-overflow-button {
  display: none !important;
}
.hls-video-frame.has-pause-overlay
  .hls-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}
.hls-video-frame.has-pause-overlay
  .hls-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}
.player-fullscreen-topbar,
.player-shell-fullscreen-topbar {
  z-index: 18;
  min-height: calc(
    52px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px))
  );
  padding: max(8px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    max(14px, var(--video-cms-safe-right, env(safe-area-inset-right, 0px))) 8px
    max(14px, var(--video-cms-safe-left, env(safe-area-inset-left, 0px)));
  pointer-events: none;
  background: linear-gradient(#000000c7, #00000038 70%, #0000);
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: end;
  gap: 9px;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.player-shell-fullscreen-topbar {
  display: none;
}
.player-fullscreen-topbar > button,
.player-shell-fullscreen-topbar > button {
  pointer-events: auto;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0a0c1194;
  border: 1px solid #ffffff38;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
}
.player-fullscreen-topbar svg,
.player-shell-fullscreen-topbar svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 21px;
  height: 21px;
}
.player-fullscreen-topbar strong,
.player-shell-fullscreen-topbar strong {
  color: #fff;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 9px #000;
  white-space: nowrap;
  align-self: center;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
}
.player-click-surface {
  z-index: 3;
  pointer-events: none;
  color: #fff;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0 0 50px;
}
.player-tap-toggle {
  pointer-events: auto;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}
.player-tap-toggle:focus-visible {
  outline-offset: -4px;
  outline: 2px solid #ffffffeb;
}
.player-paused-overlay {
  z-index: 4;
  color: #fff;
  cursor: pointer;
  background: #00000052;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
  position: absolute;
  inset: 0;
}
.player-paused-overlay .player-paused-label {
  color: #fff;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px #0009;
  pointer-events: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.player-paused-overlay .player-resume:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #fff;
}
.player-paused-actions {
  z-index: 2;
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 5vw, 42px);
  display: flex;
  position: relative;
}
.player-paused-actions > button {
  color: #fff;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background: #080a0fab;
  border: 1px solid #fff3;
  border-radius: 50%;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  position: relative;
  box-shadow: 0 12px 36px #0000004d;
}
.player-paused-actions > button.player-resume {
  background: #fff3;
  width: 64px;
  height: 64px;
}
.player-paused-actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.player-paused-actions svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 27px;
  height: 27px;
}
.player-paused-actions .player-resume svg {
  fill: currentColor;
  stroke: none;
  width: 31px;
  height: 31px;
  margin-left: 4px;
}
.player-paused-actions small {
  font-size: 8px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
}
.player-unmute {
  z-index: 5;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0c0e14c7;
  border: 1px solid #ffffff38;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 750;
  display: flex;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 8px 24px #00000047;
}
.player-unmute svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 17px;
  height: 17px;
}
.player-landscape-advice {
  z-index: 15;
  top: calc(
    max(8px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px))) + 56px
  );
  background: #090b10ad;
  border: 1px solid #ffffff29;
  border-radius: 17px;
  min-height: 30px;
  padding: 7px 13px;
  font-weight: 750;
  box-shadow: 0 8px 24px #0000003d;
}
.player-inline-notice,
.player-landscape-advice {
  pointer-events: none;
  color: #fff;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  font-size: 10px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.player-inline-notice {
  z-index: 26;
  background: #080a0fd1;
  border: 1px solid #ffffff26;
  border-radius: 18px;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 8px 13px;
  bottom: 16px;
  box-shadow: 0 8px 28px #00000052;
}
.player-control-dock {
  z-index: 10;
  color: #fff;
  background: linear-gradient(#151821, #0c0e13);
  border-top: 1px solid #ffffff17;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 5px 8px;
  display: flex;
  position: relative;
}
.player-control-dock > button {
  color: #ffffffdb;
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-radius: 9px;
  flex: none;
  min-height: 34px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 800;
}
.player-control-dock > button:hover {
  color: #fff;
  background: #ffffff1c;
}
.player-control-dock > button:disabled {
  cursor: default;
  opacity: 0.48;
}
.player-line-trigger {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
}
.player-control-slot {
  flex: 1;
  min-width: 0;
}
.player-rate-trigger {
  min-width: 46px;
}
.player-download-trigger {
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  display: flex;
  color: #ffd1da !important;
}
.player-download-trigger svg {
  width: 15px;
  height: 15px;
}
.player-fullscreen,
.player-pip-trigger {
  place-items: center;
  width: 36px;
  height: 34px;
  display: grid;
  padding: 0 !important;
}
.player-download-trigger svg,
.player-fullscreen svg,
.player-pip-trigger svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-pip-trigger.active {
  color: #fff;
  background: #ff31583d;
  border-color: #ff496c80;
}
.player-pip-trigger.unavailable {
  opacity: 0.45;
}
.player-tool-panel {
  z-index: 20;
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #0c0e14f5;
  border: 1px solid #ffffff29;
  border-radius: 17px;
  width: min(100% - 16px, 330px);
  max-height: calc(100% - 70px);
  padding: 10px;
  position: absolute;
  bottom: 53px;
  left: 8px;
  overflow: auto;
  box-shadow: 0 18px 50px #0006;
}
.player-tool-panel header {
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  padding: 0 3px 7px 7px;
  display: flex;
}
.player-tool-panel header strong {
  font-size: 13px;
}
.player-tool-panel header button {
  color: #fff;
  background: #ffffff1a;
  border: 0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
}
.player-line-panel > button {
  color: #fff;
  text-align: left;
  background: 0 0;
  border: 0;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
}
.player-line-panel > button.active,
.player-line-panel > button:hover {
  background: #ffffff1a;
}
.player-line-panel > button.unavailable {
  opacity: 0.58;
}
.player-line-panel > button span {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.player-line-panel > button strong {
  font-size: 12px;
}
.player-line-panel > button small {
  color: #ffffff8c;
  font-size: 9px;
}
.player-line-panel > button b {
  color: #ff8ba0;
  flex: none;
  font-size: 9px;
}
.player-line-panel footer {
  padding: 8px 4px 2px;
}
.player-line-panel footer button {
  color: #fff;
  background: #ffffff14;
  border: 1px solid #ffffff29;
  border-radius: 17px;
  width: 100%;
  min-height: 34px;
  font-size: 10px;
  font-weight: 800;
}
.player-rate-panel {
  width: min(100% - 28px, 260px);
}
.player-rate-panel > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}
.player-rate-panel > div button {
  color: #ffffffb8;
  background: #ffffff12;
  border: 0;
  border-radius: 11px;
  min-height: 38px;
  font-size: 11px;
  font-weight: 800;
}
.player-rate-panel > div button.active {
  color: #fff;
  background: var(--accent);
}
:-webkit-any(
  .hls-video-frame.is-player-fallback-fullscreen,
  .hls-video-frame:-webkit-full-screen,
  .hls-video-frame:fullscreen,
  .player-shell.is-player-fallback-fullscreen,
  .player-shell:-webkit-full-screen,
  .player-shell:fullscreen
) {
  background: #000;
  border-radius: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}
:is(
  .hls-video-frame.is-player-fallback-fullscreen,
  .hls-video-frame:fullscreen,
  .hls-video-frame:fullscreen,
  .player-shell.is-player-fallback-fullscreen,
  .player-shell:fullscreen,
  .player-shell:fullscreen
) {
  background: #000;
  border-radius: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}
.hls-video-frame.is-player-fallback-fullscreen,
.player-shell.is-player-fallback-fullscreen {
  z-index: 2147483200;
  position: fixed;
  inset: 0;
}
:-webkit-any(
  .hls-video-frame.is-player-fallback-fullscreen .player-control-dock,
  .hls-video-frame:-webkit-full-screen .player-control-dock,
  .hls-video-frame:fullscreen .player-control-dock,
  .player-shell.is-player-fallback-fullscreen .player-control-dock,
  .player-shell:-webkit-full-screen .player-control-dock,
  .player-shell:fullscreen .player-control-dock
) {
  min-height: calc(46px + env(safe-area-inset-bottom));
  padding-right: max(
    8px,
    var(--video-cms-safe-right, env(safe-area-inset-right, 0px))
  );
  padding-bottom: max(5px, env(safe-area-inset-bottom));
  padding-left: max(
    8px,
    var(--video-cms-safe-left, env(safe-area-inset-left, 0px))
  );
}
:is(
  .hls-video-frame.is-player-fallback-fullscreen .player-control-dock,
  .hls-video-frame:fullscreen .player-control-dock,
  .hls-video-frame:fullscreen .player-control-dock,
  .player-shell.is-player-fallback-fullscreen .player-control-dock,
  .player-shell:fullscreen .player-control-dock,
  .player-shell:fullscreen .player-control-dock
) {
  min-height: calc(46px + env(safe-area-inset-bottom));
  padding-right: max(
    8px,
    var(--video-cms-safe-right, env(safe-area-inset-right, 0px))
  );
  padding-bottom: max(5px, env(safe-area-inset-bottom));
  padding-left: max(
    8px,
    var(--video-cms-safe-left, env(safe-area-inset-left, 0px))
  );
}
.player-shell:fullscreen > .hls-video-frame {
  height: 100% !important;
}
.player-shell:fullscreen > .hls-video-frame {
  height: 100% !important;
}
.player-shell.is-player-fallback-fullscreen > .hls-video-frame {
  height: 100% !important;
}
.player-shell:fullscreen > .hls-video-frame > .player-media {
  aspect-ratio: auto !important;
  flex: 1 1 0 !important;
}
.player-shell:fullscreen > .hls-video-frame > .player-media {
  aspect-ratio: auto !important;
  flex: 1 1 0 !important;
}
.player-shell.is-player-fallback-fullscreen > .hls-video-frame > .player-media {
  aspect-ratio: auto !important;
  flex: 1 1 0 !important;
}
.player-shell:fullscreen > .player-shell-fullscreen-topbar {
  display: grid;
}
.player-shell:fullscreen > .player-shell-fullscreen-topbar {
  display: grid;
}
.player-shell.is-player-fallback-fullscreen > .player-shell-fullscreen-topbar {
  display: grid;
}
.player-shell.is-native-pip-mode > .hls-video-frame {
  height: 100%;
}
.player-shell.is-native-pip-mode .player-media {
  aspect-ratio: auto;
  flex: 1;
}
.player-shell.is-native-pip-mode .player-click-surface,
.player-shell.is-native-pip-mode .player-control-dock,
.player-shell.is-native-pip-mode .player-fullscreen-topbar,
.player-shell.is-native-pip-mode .player-inline-notice,
.player-shell.is-native-pip-mode .player-landscape-advice,
.player-shell.is-native-pip-mode .player-paused-overlay,
.player-shell.is-native-pip-mode .player-shell-fullscreen-topbar,
.player-shell.is-native-pip-mode .player-tool-panel,
.player-shell.is-native-pip-mode .player-unmute {
  display: none !important;
}
html.video-fallback-fullscreen-active,
html.video-fallback-fullscreen-active body {
  overscroll-behavior: none;
  overflow: hidden;
}
.player-episode-dock {
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
  position: relative;
}
.player-episode-dock > button {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #ffffff1c;
  border-radius: 8px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 17px;
  font-weight: 850;
}
.player-episode-dock > button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}
.player-episode-dock > .player-episode-trigger {
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 210px;
  padding: 0 10px;
  font-size: 10px;
  display: flex;
}
.player-episode-trigger span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.player-episode-trigger b {
  color: #ff8da2;
  flex: none;
  font-size: 9px;
}
.player-episode-panel {
  z-index: 24;
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #0c0e14f7;
  border: 1px solid #ffffff29;
  border-radius: 16px;
  width: min(390px, 100vw - 32px);
  max-height: min(48dvh, 320px);
  padding: 10px;
  position: absolute;
  bottom: calc(100% + 30px);
  left: 50%;
  overflow: hidden;
  transform: translate(-50%);
  box-shadow: 0 18px 55px #0000007a;
}
.player-episode-panel header {
  grid-template-columns: 1fr auto 30px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 2px 8px;
  display: grid;
}
.player-episode-panel header strong {
  font-size: 13px;
}
.player-episode-panel header small {
  color: #ffffff8c;
  font-size: 9px;
}
.player-episode-panel header button {
  color: #fff;
  background: #ffffff1a;
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
}
.player-episode-panel > div {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: min(38dvh, 248px);
  padding-right: 3px;
  display: grid;
  overflow-y: auto;
}
.player-episode-panel > div > button {
  color: #ffffffb8;
  text-align: left;
  background: #ffffff0f;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 40px;
  padding: 5px 8px;
  display: flex;
}
.player-episode-panel > div > button.active {
  color: #fff;
  background: #ff31584d;
}
.player-episode-panel > div > button span {
  background: #ffffff14;
  border-radius: 7px;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 9px;
  display: grid;
}
.player-episode-panel > div > button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 9px;
  overflow: hidden;
}
@media (width<=560px) {
  .player-unmute {
    white-space: nowrap;
    max-width: calc(100% - 28px);
    min-height: 34px;
    font-size: 10px;
    top: 10px;
  }
  .player-control-dock {
    gap: 2px;
    min-height: 43px;
    padding: 4px;
  }
  .player-control-dock > button {
    min-height: 31px;
    padding-inline: 5px;
    font-size: 8px;
  }
  .player-line-trigger {
    max-width: 58px;
  }
  .player-rate-trigger {
    min-width: 34px;
  }
  .player-download-trigger {
    min-width: 47px;
    padding-inline: 4px !important;
  }
  .player-fullscreen,
  .player-pip-trigger {
    width: 31px;
  }
  .player-episode-dock {
    gap: 2px;
  }
  .player-episode-dock > button {
    min-width: 25px;
    min-height: 30px;
    padding: 0 4px;
  }
  .player-episode-dock > .player-episode-trigger {
    max-width: 74px;
    padding-inline: 5px;
  }
  .player-episode-trigger b {
    display: none;
  }
  .player-tool-panel {
    width: min(100% - 10px, 330px);
    max-height: calc(100% - 62px);
    bottom: 49px;
    left: 5px;
  }
  .player-episode-panel {
    z-index: 2147483250;
    right: 10px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(55dvh, 360px);
    position: fixed;
    left: 10px;
    transform: none;
  }
  .player-episode-panel > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .player-fullscreen-topbar strong,
  .player-shell-fullscreen-topbar strong {
    font-size: 11px;
  }
  .player-paused-actions {
    gap: 20px;
  }
  .player-paused-actions > button {
    width: 44px;
    height: 44px;
  }
  .player-paused-actions > button.player-resume {
    width: 58px;
    height: 58px;
  }
  .player-inline-notice {
    white-space: normal;
    max-width: calc(100% - 20px);
    bottom: 10px;
  }
}
@media (width<=380px) {
  .player-line-trigger {
    max-width: 45px;
  }
  .player-episode-dock > .player-episode-trigger {
    max-width: 54px;
  }
  .player-fullscreen,
  .player-pip-trigger {
    width: 30px;
  }
}
@media (width<=820px) and (orientation: portrait) {
  :-webkit-any(
    .player-shell.is-player-fallback-fullscreen .is-landscape-source .hls-video,
    .player-shell:-webkit-full-screen .is-landscape-source .hls-video,
    .player-shell:fullscreen .is-landscape-source .hls-video
  ) {
    object-fit: contain;
  }
  :is(
    .player-shell.is-player-fallback-fullscreen .is-landscape-source .hls-video,
    .player-shell:fullscreen .is-landscape-source .hls-video,
    .player-shell:fullscreen .is-landscape-source .hls-video
  ) {
    object-fit: contain;
  }
}
.player-starting-overlay {
  z-index: 2;
  pointer-events: none;
  color: #ffffffb8;
  background: radial-gradient(
    circle at 50% 48%,
    #12162080,
    #00000014 46%,
    #0000 70%
  );
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
  position: absolute;
  inset: 0;
}
.player-starting-overlay > span {
  border: 2px solid #fff3;
  border-top-color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: 0.8s linear infinite detail-player-spin;
}
.player-placeholder {
  color: #888;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}
.paywall-card {
  color: #fff;
  background: radial-gradient(circle at 50% 20%, #2b3345, #0c0f15 70%);
  align-content: center;
  gap: 16px;
}
.paywall-card strong {
  font-size: 20px;
}
.paywall-card small {
  color: #ffffffa3;
  text-align: center;
  max-width: 78%;
  font-size: 11px;
  line-height: 1.6;
}
.paywall-card button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 22px;
  justify-self: center;
  padding: 11px 22px;
}
.player-gate {
  z-index: 12;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: linear-gradient(#07080c85, #0c0f15f5);
  position: absolute;
  inset: 0;
}
.player-gate-actions {
  justify-content: center;
  gap: 10px;
  display: flex;
}
.paywall-card .player-gate-actions button {
  margin: 0;
}
.paywall-card .player-gate-actions button.secondary {
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #ffffff4d;
}
.player-error {
  z-index: 14;
  color: #fff;
  background: #a8152ff0;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 8px 8px 12px;
  display: flex;
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
}
.player-error span {
  min-width: 0;
  font-size: 11px;
}
.player-error button {
  color: #fff;
  background: #ffffff24;
  border: 1px solid #ffffff57;
  border-radius: 17px;
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 850;
}
.detail-loading-skeleton {
  background: #fff;
  border-radius: 22px;
  width: min(100% - 32px, 1180px);
  min-height: 520px;
  margin: 18px auto;
  padding: 0 0 28px;
  overflow: hidden;
}
.detail-loading-skeleton > span {
  background: linear-gradient(100deg, #e9ebef 25%, #f5f6f8 40%, #e9ebef 55%) 0
    0/240% 100%;
  animation: 1.2s linear infinite route-skeleton;
  display: block;
}
.detail-loading-stage {
  aspect-ratio: 16/7;
  width: 100%;
}
.detail-loading-title {
  border-radius: 8px;
  width: 42%;
  height: 28px;
  margin: 24px 22px 13px;
}
.detail-loading-copy {
  border-radius: 7px;
  width: 68%;
  height: 16px;
  margin-left: 22px;
}
.player-loading {
  color: #ffffff8f;
  align-content: center;
  justify-items: center;
  gap: 12px;
  font-size: 12px;
}
.player-loading > span {
  border: 2px solid #ffffff2e;
  border-top-color: #ffffffc7;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: 0.8s linear infinite detail-player-spin;
}
@keyframes detail-player-spin {
  to {
    transform: rotate(1turn);
  }
}
.detail-hero {
  background:
    radial-gradient(circle at 100% 0, #ff315833, #0000 38%),
    linear-gradient(155deg, #191c25, #0d0f14 70%);
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(24px, 3vw, 38px) clamp(22px, 2.8vw, 34px);
  display: flex;
  position: relative;
  overflow: hidden;
}
.detail-hero:after {
  content: "";
  border: 1px solid #ffffff0f;
  border-radius: 50%;
  width: 240px;
  height: 240px;
  position: absolute;
  bottom: -112px;
  right: -84px;
}
.detail-actions,
.detail-hero-copy {
  z-index: 1;
  position: relative;
}
.detail-meta {
  color: #ffffff8f;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}
.detail-meta-values > span:first-child,
.detail-meta > span:first-child {
  color: #ff8199;
}
.detail-meta i {
  background: #ffffff4d;
  border-radius: 50%;
  width: 3px;
  height: 3px;
}
.detail-hero h1 {
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  margin: 14px 0 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}
.detail-now-playing {
  color: #ffffff94;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 11px;
  display: flex;
}
.detail-now-playing > span {
  background: #949aa6;
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px #949aa61a;
}
.detail-now-playing.is-live > span {
  background: #47d58b;
  box-shadow: 0 0 0 4px #47d58b1a;
}
.detail-now-playing.is-ad > span {
  background: #6ca8ff;
  box-shadow: 0 0 0 4px #6ca8ff1a;
}
.detail-now-playing.is-warning > span {
  background: #ffb44d;
  box-shadow: 0 0 0 4px #ffb44d1a;
}
.detail-now-playing.is-blocked > span {
  background: #ff627e;
  box-shadow: 0 0 0 4px #ff627e1a;
}
.detail-actions {
  border-top: 1px solid #ffffff17;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 28px;
  padding-top: 15px;
  display: grid;
}
.detail-actions.has-offline-action {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.detail-actions button {
  color: #ffffffad;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px;
  font-size: 11px;
  font-weight: 700;
  transition:
    color 0.18s,
    background 0.18s,
    transform 0.18s;
  display: flex;
}
.detail-actions button:hover {
  color: #fff;
  background: #ffffff14;
}
.detail-actions button:active {
  transform: scale(0.96);
}
.detail-actions button[aria-pressed="true"] {
  color: #fff;
  background: #ff315833;
}
.detail-actions button[aria-pressed="true"] svg {
  fill: currentColor;
}
.detail-actions svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.detail-actions button:disabled {
  color: #ffffff61;
  cursor: not-allowed;
  opacity: 1;
}
.detail-offline-hint {
  z-index: 1;
  color: #ffffff85;
  margin: 8px 2px 0;
  font-size: 9px;
  line-height: 1.45;
  position: relative;
}
.detail-ad-bridge {
  border-bottom: 1px solid var(--line);
  margin: 0 24px;
}
.detail-ad-bridge:not(:has(.ad-slot-group)) {
  display: none;
}
.detail-ad-bridge > .ad-slot-group {
  scrollbar-width: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 11px 0;
  display: flex;
  overflow-x: auto;
}
.detail-ad-bridge > .ad-slot-group::-webkit-scrollbar {
  display: none;
}
.detail-ad-bridge .ad-item {
  background: #f8f9fa;
  border: 0;
  border-radius: 9px;
  flex: 1;
  min-width: min(360px, 76vw);
  min-height: 48px;
  padding: 5px 8px;
}
.detail-ad-bridge .ad-item img,
.detail-ad-bridge .ad-item video {
  border-radius: 6px;
  width: 62px;
  height: 36px;
}
.detail-flow {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 0 18px;
}
.detail-section {
  border-top: 1px solid var(--line);
  padding: 36px 0;
}
.detail-flow > .detail-section:first-child {
  border-top: 0;
}
.detail-section-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}
.detail-section-heading > div > span {
  color: var(--accent);
  letter-spacing: 0.16em;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 900;
  display: block;
}
.detail-section-heading h2 {
  letter-spacing: -0.025em;
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
}
.detail-section-heading > p {
  color: #9499a2;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;
  display: flex;
}
.detail-section-heading > p b {
  color: #606671;
  background: #f1f2f4;
  border-radius: 12px;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  font-size: 10px;
  display: grid;
}
.episode-heading-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}
.episode-heading-actions p {
  color: #9499a2;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 5px 0 0;
  font-size: 10px;
  display: flex;
}
.episode-heading-actions p b {
  color: #606671;
  background: #f1f2f4;
  border-radius: 12px;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  font-size: 10px;
  display: grid;
}
.episode-heading-actions button {
  color: #555b66;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
}
.episode-heading-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.episode-list {
  overscroll-behavior: contain;
  scrollbar-color: #d9dce2 transparent;
  scrollbar-width: thin;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  max-height: 196px;
  padding-right: 4px;
  display: flex;
  overflow-y: auto;
}
.episode-list button {
  color: #777d87;
  text-align: left;
  background: #fff;
  border: 1px solid #e9ebef;
  border-radius: 12px;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px 9px;
  width: 170px;
  min-height: 60px;
  padding: 9px 11px;
  transition:
    border-color 0.18s,
    color 0.18s,
    background 0.18s,
    transform 0.18s;
  display: grid;
}
.episode-list button:hover {
  color: #343842;
  border-color: #ffc3ce;
}
.episode-list button:active {
  transform: scale(0.98);
}
.episode-list button > span {
  color: #9297a0;
  background: #f3f4f6;
  border-radius: 9px;
  grid-row: 1 / span 2;
  place-items: center;
  width: 29px;
  height: 29px;
  font-size: 10px;
  display: grid;
}
.episode-list button > strong {
  color: #353a43;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}
.episode-list button > i {
  color: var(--accent);
  grid-area: 1/3 / span 2;
  font-size: 8px;
  font-style: normal;
  display: none;
}
.episode-list button.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #ffd4dc;
}
.episode-list button.active > span {
  color: #fff;
  background: var(--accent);
}
.episode-list button.active > strong {
  color: #c92849;
}
.episode-list button.active > i {
  display: block;
}
.detail-description-copy {
  max-width: 800px;
}
.detail-description-copy > p {
  color: #606671;
  white-space: pre-line;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}
.detail-description-copy > p.collapsed {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.detail-description-copy > button {
  color: #747a85;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  margin-top: 9px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}
.detail-description-copy > button span,
.detail-description-copy > button:hover {
  color: var(--accent);
}
.detail-promotions:not(:has(.ad-slot-group)) {
  display: none;
}
.detail-promotions > .ad-slot-group {
  width: 100%;
  margin: 0;
}
.detail-promotions > .ad-slot-group + .ad-slot-group {
  margin-top: 10px;
}
.detail-promotions [data-ad-slot="video_detail_banner"] {
  grid-auto-columns: minmax(58%, 1fr);
}
.detail-promotions [data-ad-slot="video_detail_banner"] .ad-item {
  background: #f7f8fa;
  border: 0;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-promotions
  [data-ad-slot="video_recommendation_inline"]
  .ad-item:only-child {
  grid-column: 1/-1;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item {
  background: #f7f8fa;
  border: 0;
  border-radius: 10px;
  flex-direction: row;
  gap: 10px;
  min-height: 70px;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item img,
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item video {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 7px;
  width: 88px;
  height: 52px;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-copy {
  padding: 0;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-copy small {
  display: block;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item > b {
  display: none;
}
.content-section {
  padding-top: 26px;
}
.detail-toast {
  bottom: calc(var(--nav-height) + 18px + env(safe-area-inset-bottom));
}
.detail-comments {
  scroll-margin-top: 84px;
}
.detail-comment-form {
  background: #f7f8fa;
  border: 1px solid #eef0f3;
  border-radius: 15px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  display: grid;
}
.detail-comment-form:focus-within {
  background: #fff;
  border-color: #ffc8d2;
  box-shadow: 0 0 0 3px #ff315812;
}
.detail-comment-input {
  gap: 1px;
  min-width: 0;
  display: grid;
}
.detail-comment-input > small {
  color: #9a7a31;
  padding-left: 4px;
  font-size: 9px;
  line-height: 1.35;
}
.detail-comment-avatar {
  color: #fff;
  background: linear-gradient(145deg, #ff765b, #ff3158);
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  box-shadow: 0 5px 13px #ff315824;
}
.detail-comment-form input {
  min-width: 0;
  height: 38px;
  color: var(--text);
  background: 0 0;
  border: 0;
  outline: 0;
  padding: 0 4px;
}
.detail-comment-form input::placeholder {
  color: #a2a6ae;
}
.detail-comment-form button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  min-width: 60px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 800;
}
.detail-comments > .comment-list-error {
  margin: 12px 0 0;
}
.detail-comment-list article {
  border-bottom: 1px solid #eff0f3;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  padding: 20px 2px;
  display: grid;
}
.detail-comment-list article > div {
  min-width: 0;
}
.detail-comment-list article strong {
  align-items: center;
  gap: 2px;
  min-height: 20px;
  font-size: 12px;
  display: flex;
}
.detail-comment-list article p {
  color: #444a54;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.72;
}
.detail-comment-list article small {
  color: #a0a4ac;
  font-size: 9px;
}
.detail-comment-state {
  color: #999ea7;
  text-align: center;
  place-items: center;
  min-height: 112px;
  margin: 0;
  font-size: 11px;
  display: grid;
}
.detail-comments > .community-load-more {
  color: #686e78;
  background: #f2f3f5;
  border: 0;
  border-radius: 20px;
  min-height: 40px;
  margin: 18px auto 0;
  padding: 8px 18px;
  font-size: 11px;
  font-weight: 800;
  display: block;
}
@media (width<=899px) {
  .detail-stage {
    grid-template-columns: 1fr;
  }
  .detail-hero {
    min-height: 178px;
    padding: 22px;
  }
  .detail-hero-copy {
    padding-right: 180px;
  }
  .detail-actions {
    border: 0;
    width: 170px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .detail-actions.has-offline-action {
    width: 230px;
  }
  .detail-hero:has(.detail-actions.has-offline-action) .detail-hero-copy {
    padding-right: 240px;
  }
}
@media (width<=719px) {
  .detail-page {
    padding: 0 0 calc(var(--nav-height) + 34px + env(safe-area-inset-bottom));
    background: linear-gradient(
      180deg,
      #0d0f14 0,
      #0d0f14 190px,
      var(--surface) 420px
    );
  }
  .detail-stage {
    box-shadow: none;
    border-radius: 0;
  }
  .detail-hero {
    background:
      radial-gradient(circle at 100% 0, #ff315829, #0000 42%),
      linear-gradient(#151820, #0d0f14);
    min-height: 0;
    padding: 18px 16px 14px;
  }
  .detail-hero-copy {
    padding-right: 0;
  }
  .detail-hero:has(.detail-actions.has-offline-action) .detail-hero-copy {
    padding-right: 0;
  }
  .detail-meta {
    font-size: 10px;
  }
  .detail-hero h1 {
    margin-top: 10px;
    font-size: 22px;
  }
  .detail-now-playing {
    margin-top: 10px;
  }
  .detail-actions {
    border-top: 1px solid #ffffff14;
    width: auto;
    margin-top: 16px;
    padding-top: 10px;
    position: relative;
    bottom: auto;
    right: auto;
  }
  .detail-actions.has-offline-action {
    width: auto;
  }
  .detail-actions button {
    min-height: 44px;
  }
  .detail-ad-bridge {
    margin: 0 14px;
  }
  .detail-ad-bridge > .ad-slot-group {
    padding-block: 9px;
  }
  .detail-flow {
    padding: 0 14px;
  }
  .detail-section {
    padding: 27px 0;
  }
  .detail-section-heading {
    margin-bottom: 16px;
  }
  .detail-section-heading h2 {
    font-size: 20px;
  }
  .episode-heading-actions p {
    display: none;
  }
  .episode-heading-actions button {
    min-height: 34px;
    padding-inline: 11px;
  }
  .episode-list {
    scrollbar-width: none;
    flex-wrap: nowrap;
    max-height: none;
    margin-right: -14px;
    padding-right: 14px;
    overflow: auto hidden;
  }
  .episode-list::-webkit-scrollbar {
    display: none;
  }
  .episode-list button {
    flex: 0 0 140px;
    width: 140px;
    min-height: 56px;
  }
  .detail-description-copy > p {
    font-size: 13px;
    line-height: 1.8;
  }
  .detail-description-copy > button {
    min-height: 40px;
  }
  .detail-promotions [data-ad-slot="video_detail_banner"] {
    grid-auto-columns: 88%;
  }
  .detail-promotions [data-ad-slot="video_recommendation_inline"] {
    grid-template-columns: 1fr;
  }
  .detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item img,
  .detail-promotions
    [data-ad-slot="video_recommendation_inline"]
    .ad-item
    video {
    width: 68px;
    height: 48px;
  }
  .detail-comment-form {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
  }
  .detail-comment-avatar {
    border-radius: 11px;
    width: 34px;
    height: 34px;
  }
  .detail-comment-form button {
    min-width: 54px;
    padding-inline: 11px;
  }
  .detail-comment-list article {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .paywall-card {
    gap: 12px;
    padding: 18px;
  }
  .paywall-card strong {
    font-size: 17px;
  }
  .paywall-card small {
    max-width: 90%;
  }
  .paywall-card button {
    padding: 9px 16px;
  }
}
.section-heading {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 18px;
  display: flex;
}
.section-heading h1 {
  margin: 5px 0 0;
  font-size: 28px;
}
.history-item > button,
.text-button {
  color: var(--muted);
  background: 0 0;
  border: 0;
}
.history-item > button {
  padding: 8px 0;
}
.history-undo-toast {
  z-index: 2147483200;
  bottom: calc(var(--nav-height) + 22px + env(safe-area-inset-bottom));
  color: #fff;
  white-space: nowrap;
  background: #181b22f5;
  border-radius: 24px;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 6px 7px 6px 16px;
  display: flex;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 12px 34px #00000038;
}
.history-undo-toast button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 18px;
  min-width: 64px;
  min-height: 36px;
  font-weight: 850;
}
.route-loading-state {
  z-index: 2147483200;
  color: var(--muted);
  background: var(--bg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
  position: fixed;
  inset: 0;
}
.route-loading-state--immersive {
  background: #000;
}
.route-loading-state > span {
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: 0.7s linear infinite route-pulse;
}
.route-loading-state b {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
}
@keyframes route-pulse {
  to {
    transform: rotate(1turn);
  }
}
@keyframes route-skeleton {
  to {
    background-position: -240% 0;
  }
}
.follow-button {
  color: var(--accent);
  background: #fff;
  border: 1px solid #ffd0d9;
  border-radius: 15px;
  margin-left: auto;
  padding: 6px 12px;
}
.comment-sheet {
  z-index: 2147483000;
  background: #080a1094;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}
.comment-sheet > section {
  width: min(100%, 720px);
  height: min(75dvh, 720px);
  max-height: calc(100dvh - 54px);
  color: var(--text);
  background: #fff;
  border-radius: 22px 22px 0 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  display: grid;
  overflow: hidden;
  box-shadow: 0 -20px 60px #0000003d;
}
.comment-sheet form,
.comment-sheet header {
  align-items: center;
  gap: 10px;
  display: flex;
}
.comment-sheet header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 16px;
}
.comment-sheet header h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}
.comment-sheet header button {
  color: #4b5059;
  background: #f2f3f5;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 25px;
  display: grid;
}
.comment-sheet-list {
  overscroll-behavior: contain;
  min-height: 0;
  padding: 0 18px 14px;
  overflow-y: auto;
}
.comment-sheet article {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.comment-sheet article p {
  color: var(--muted);
  margin: 5px 0;
}
.comment-sheet article small {
  color: #9a9fa8;
  font-size: 10px;
}
.comment-empty-state {
  color: #9297a1;
  text-align: center;
  place-items: center;
  min-height: 150px;
  margin: 0;
  font-size: 12px;
  display: grid;
}
.comment-submit-message {
  color: #25704b;
  background: #eaf8f0;
  border-radius: 11px;
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 11px;
}
.comment-sheet-composer {
  z-index: 2;
  min-height: 68px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -8px 20px #1a1e280a;
}
.comment-composer-field {
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: grid;
}
.comment-composer-field > textarea {
  width: 100%;
}
.comment-composer-field > small {
  color: #9a7a31;
  padding-left: 8px;
  font-size: 9px;
  line-height: 1.35;
}
.comment-sheet form textarea {
  border: 1px solid var(--line);
  min-width: 0;
  max-height: 96px;
  font: inherit;
  resize: none;
  background: #f7f8fa;
  border-radius: 20px;
  outline: none;
  flex: 1;
  padding: 11px 14px;
}
.comment-sheet form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #ff315814;
}
.comment-sheet form button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 20px;
  min-width: 60px;
  min-height: 40px;
  padding: 10px 16px;
  font-weight: 800;
}
.comment-sheet form button:disabled {
  opacity: 0.48;
}
.short-comment-sheet {
  z-index: 2147483210;
  background:
    radial-gradient(circle at 50% 100%, #ff31581f, #0000 40%), #05070c47;
  padding: 12px 12px 0;
}
.short-comment-sheet:focus {
  outline: 0;
}
.short-comment-sheet > section {
  width: min(100%, 680px);
  height: min(58dvh, 560px);
  max-height: calc(
    100dvh - max(12px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
  );
  color: var(--text);
  background: #f6f7fa;
  border: 1px solid #ffffffc7;
  border-radius: 28px 28px 0 0;
  grid-template-rows: 18px auto minmax(0, 1fr) auto;
  animation: 0.24s cubic-bezier(0.2, 0.78, 0.25, 1) short-comment-sheet-in;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 -24px 80px #00000061,
    0 -1px #ffffff73;
}
@keyframes short-comment-sheet-in {
  0% {
    opacity: 0.45;
    transform: translateY(38px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.short-comment-grabber {
  background: #d5d8de;
  border-radius: 999px;
  place-self: center;
  width: 38px;
  height: 4px;
}
.short-comment-sheet .short-comment-header {
  background: linear-gradient(#fff 0, #ffffffe0 68%, #f6f7fac7);
  border: 0;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 8px 17px 14px;
  display: grid;
}
.short-comment-cover-fallback,
.short-comment-header > img {
  background: #e7e9ee;
  border: 1px solid #12161f0f;
  border-radius: 13px;
  width: 48px;
  height: 60px;
  box-shadow: 0 6px 18px #161b261f;
}
.short-comment-header > img {
  -o-object-fit: cover;
  object-fit: cover;
}
.short-comment-cover-fallback {
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, #ffffff52, #0000 25%),
    linear-gradient(145deg, #ff755b, #ff3158 58%, #a62969);
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}
.short-comment-cover-fallback:after {
  content: "";
  border: 8px solid #ffffff1f;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  position: absolute;
  bottom: -18px;
  right: -14px;
}
.short-comment-cover-fallback svg {
  opacity: 0.78;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 7px;
  right: 7px;
}
.short-comment-cover-fallback b {
  font-size: 18px;
}
.short-comment-heading {
  min-width: 0;
}
.short-comment-heading > span {
  color: var(--accent);
  letter-spacing: 0.11em;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 900;
  display: block;
}
.short-comment-heading h2 {
  color: #1c1f26;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow: hidden;
}
.short-comment-heading p {
  color: #9297a1;
  margin: 5px 0 0;
  font-size: 11px;
}
.short-comment-heading p b {
  color: #555b65;
  font-size: 12px;
}
.short-comment-sheet .short-comment-header > button {
  color: #5f6570;
  background: #f0f1f4;
  width: 44px;
  height: 44px;
  transition:
    background 0.18s,
    transform 0.18s;
}
.short-comment-sheet .short-comment-header > button:hover {
  background: #e8eaf0;
}
.short-comment-sheet .short-comment-header > button:active {
  transform: scale(0.92);
}
.short-comment-sheet .short-comment-header > button svg {
  width: 18px;
  height: 18px;
}
.short-comment-list {
  scroll-behavior: smooth;
  scrollbar-color: #d5d8df transparent;
  scrollbar-width: thin;
  background: linear-gradient(#f6f7fa, #f3f4f7);
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  padding: 7px 14px 20px;
  display: flex;
  overflow-y: auto;
}
.short-comment-list::-webkit-scrollbar {
  width: 4px;
}
.short-comment-list::-webkit-scrollbar-thumb {
  background: #d5d8df;
  border-radius: 999px;
}
.short-comment-sheet .short-comment-item {
  background: #fffffff0;
  border: 1px solid #eceef3;
  border-radius: 18px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  display: grid;
  box-shadow: 0 5px 18px #181d2909;
}
.short-comment-avatar {
  color: #fff;
  background: linear-gradient(145deg, #ff765e, #ff3158);
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 900;
  display: grid;
  overflow: hidden;
  box-shadow: 0 5px 14px #ff31582b;
}
.short-comment-item:nth-of-type(3n + 2) .short-comment-avatar {
  background: linear-gradient(145deg, #668cff, #6555d9);
  box-shadow: 0 5px 14px #6555d929;
}
.short-comment-item:nth-of-type(3n + 3) .short-comment-avatar {
  background: linear-gradient(145deg, #36c78a, #1e9e73);
  box-shadow: 0 5px 14px #1e9e7326;
}
.short-comment-avatar > img,
.short-comment-avatar > span {
  width: 100%;
  height: 100%;
}
.short-comment-avatar > img {
  -o-object-fit: cover;
  object-fit: cover;
}
.short-comment-avatar > span {
  place-items: center;
  display: grid;
}
.short-comment-body {
  min-width: 0;
}
.short-comment-author {
  align-items: center;
  gap: 5px;
  min-height: 20px;
  display: flex;
}
.short-comment-author > strong {
  color: #313640;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}
.short-comment-sheet .comment-origin-badge {
  margin-left: 0;
  font-size: 9px;
}
.short-comment-body > p {
  color: #454b56;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.68;
}
.short-comment-body > footer {
  color: #a0a5ae;
  align-items: center;
  gap: 11px;
  min-height: 22px;
  display: flex;
}
.short-comment-body > footer time {
  margin-right: auto;
  font-size: 11px;
}
.short-comment-body > footer span {
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  display: inline-flex;
}
.short-comment-body > footer svg {
  width: 14px;
  height: 14px;
}
.short-comment-likes {
  color: #9399a3;
}
.short-comment-feedback {
  border-radius: 15px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 10px 11px;
  display: grid;
}
.short-comment-feedback > span {
  border-radius: 10px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 13px;
  font-weight: 900;
  display: grid;
}
.short-comment-feedback > div {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.short-comment-feedback strong {
  font-size: 12px;
}
.short-comment-feedback small {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
}
.short-comment-feedback button {
  border: 0;
  border-radius: 10px;
  min-height: 36px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 850;
}
.short-comment-error {
  color: #a43148;
  background: #fff0f3;
}
.short-comment-error button,
.short-comment-error > span {
  color: #fff;
  background: #dc4966;
}
.short-comment-submit-error {
  grid-template-columns: 30px minmax(0, 1fr);
}
.short-comment-success {
  color: #247453;
  background: #eaf9f1;
}
.short-comment-success > span {
  color: #fff;
  background: #33a873;
}
.short-comment-skeletons {
  gap: 9px;
  padding-top: 3px;
  display: grid;
}
.short-comment-skeletons > div {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 18px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  min-height: 100px;
  padding: 14px;
  display: grid;
}
.short-comment-skeletons b,
.short-comment-skeletons i {
  background: linear-gradient(90deg, #eef0f3 20%, #f8f9fb 46%, #eef0f3 72%) 0
    0/240% 100%;
  border-radius: 999px;
  animation: 1.25s linear infinite short-comment-shimmer;
  display: block;
}
.short-comment-skeletons i {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.short-comment-skeletons span {
  align-content: start;
  gap: 10px;
  display: grid;
}
.short-comment-skeletons b {
  width: 34%;
  height: 10px;
}
.short-comment-skeletons b:nth-child(2) {
  width: 92%;
  height: 9px;
}
.short-comment-skeletons b:nth-child(3) {
  width: 62%;
  height: 9px;
}
@keyframes short-comment-shimmer {
  to {
    background-position: -240% 0;
  }
}
.short-comment-empty {
  text-align: center;
  place-content: center;
  justify-items: center;
  min-height: 250px;
  padding: 30px;
  display: grid;
}
.short-comment-empty > span {
  color: #ff5674;
  background: linear-gradient(145deg, #fff, #ffe8ed);
  border-radius: 22px;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  display: grid;
  box-shadow: 0 12px 32px #ff31581f;
}
.short-comment-empty svg {
  width: 30px;
  height: 30px;
}
.short-comment-empty strong {
  color: #3a3f49;
  font-size: 15px;
}
.short-comment-empty p {
  color: #989da7;
  margin: 7px 0 0;
  font-size: 11px;
}
.short-comment-more {
  color: #626873;
  background: #fff;
  border: 1px solid #e3e5e9;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 7px auto 1px;
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}
.short-comment-more > span {
  border: 2px solid #d8dbe1;
  border-top-color: var(--accent);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  animation: 0.8s linear infinite short-comment-spin;
}
@keyframes short-comment-spin {
  to {
    transform: rotate(1turn);
  }
}
.short-comment-sheet .short-comment-composer {
  min-height: 84px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #fffffffa;
  border-top: 1px solid #e8eaf0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  display: grid;
  box-shadow: 0 -10px 28px #1c212d12;
}
.short-comment-self-avatar {
  width: 36px;
  height: 36px;
  margin-top: 3px;
  font-size: 12px;
}
.short-comment-editor {
  background: #f5f6f8;
  border: 1px solid #e4e6eb;
  border-radius: 18px;
  min-width: 0;
  padding: 8px 8px 7px 13px;
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
  display: grid;
}
.short-comment-editor:focus-within {
  background: #fff;
  border-color: #ffc2cd;
  box-shadow: 0 0 0 3px #ff315812;
}
.short-comment-sheet .short-comment-editor textarea {
  color: #30353e;
  resize: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  width: 100%;
  min-height: 26px;
  max-height: 82px;
  padding: 2px 3px;
  font-size: 14px;
  line-height: 1.55;
}
.short-comment-sheet .short-comment-editor textarea:focus {
  box-shadow: none;
  border: 0;
}
.short-comment-editor > div {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  display: flex;
}
.short-comment-editor small {
  color: #a1a6af;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}
.short-comment-sheet .short-comment-editor button {
  border-radius: 14px;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 12px;
  box-shadow: 0 5px 13px #ff31582e;
}
.short-comment-sheet .short-comment-editor button:disabled {
  color: #a4a8b0;
  box-shadow: none;
  opacity: 1;
  background: #e4e6ea;
}
@media (width>=720px) {
  .short-comment-sheet {
    align-items: flex-end;
    padding-bottom: 16px;
  }
  .short-comment-sheet > section {
    border-radius: 28px;
  }
}
@media (width<=480px) {
  .short-comment-sheet {
    padding-left: 0;
    padding-right: 0;
  }
  .short-comment-sheet > section {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 25px 25px 0 0;
    height: min(58dvh, 560px);
  }
  .short-comment-sheet .short-comment-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .short-comment-cover-fallback,
  .short-comment-header > img {
    border-radius: 12px;
    width: 44px;
    height: 56px;
  }
  .short-comment-list {
    padding-left: 11px;
    padding-right: 11px;
  }
  .short-comment-sheet .short-comment-item {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px;
  }
  .short-comment-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  .short-comment-skeletons > div {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px;
  }
  .short-comment-skeletons i {
    width: 36px;
    height: 36px;
  }
}
@media (height<=640px) {
  .short-comment-sheet > section {
    height: 72dvh;
  }
}
.publish-choice-sheet {
  z-index: 2147483000;
  background: #080a1094;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}
.publish-choice-sheet > section {
  width: min(100%, 560px);
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  color: var(--text);
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 55px #0000003d;
}
.publish-choice-sheet header {
  justify-content: space-between;
  align-items: center;
  min-height: 45px;
  padding: 0 4px 8px;
  display: flex;
}
.publish-choice-sheet header strong {
  font-size: 16px;
}
.publish-choice-sheet header button {
  color: #555b65;
  background: #f2f3f5;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 23px;
  display: grid;
}
.publish-choice-sheet section > button {
  width: 100%;
  min-height: 64px;
  color: var(--text);
  text-align: left;
  background: #f6f7f9;
  border: 0;
  border-radius: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  padding: 11px 13px;
  display: grid;
}
.publish-choice-sheet section > button + button {
  margin-top: 8px;
}
.publish-choice-sheet section > button span {
  font-size: 13px;
  font-weight: 850;
}
.publish-choice-sheet section > button small {
  color: var(--muted);
  grid-column: 1;
  font-size: 10px;
}
.publish-choice-sheet section > button b {
  color: var(--accent);
  grid-area: 1/2 / span 2;
  font-size: 11px;
}
.publish-choice-sheet section > button:disabled {
  color: #8e939c;
  opacity: 1;
  background: #f3f4f5;
}
.publish-choice-sheet section > button:disabled b {
  color: #999ea6;
}
.site-notice-layer {
  z-index: 2147483050;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #04070e94;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}
.site-notice-card {
  background: #fff;
  border-radius: 24px;
  width: min(420px, 100%);
  padding: 30px 26px 24px;
  position: relative;
  box-shadow: 0 24px 80px #00000047;
}
.site-notice-card > span {
  color: var(--accent);
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 800;
}
.site-notice-card h2 {
  margin: 8px 0 12px;
  font-size: 24px;
}
.site-notice-card p {
  white-space: pre-wrap;
  color: #5a606b;
  margin: 0;
  line-height: 1.75;
}
.site-notice-close {
  background: #f2f3f6;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 22px;
  position: absolute;
  top: 14px;
  right: 15px;
}
.site-notice-action {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 14px;
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  font-weight: 700;
}
.customer-service-fab {
  z-index: 2147482990;
  right: 14px;
  bottom: calc(var(--nav-height) + 14px + env(safe-area-inset-bottom));
  color: #fff;
  background: linear-gradient(135deg, #ff6848, #ff3158);
  border: 0;
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  position: fixed;
  box-shadow: 0 8px 24px #ff315847;
}
.customer-service-fab svg {
  width: 18px;
  height: 18px;
}
.is-immersive .customer-service-fab {
  display: none;
}
.customer-service-layer {
  z-index: 2147483150;
  padding: max(20px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    16px max(20px, calc(var(--nav-height) + env(safe-area-inset-bottom)));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  background: #07090e9e;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}
.customer-service-card {
  width: min(390px, 100%);
  max-height: calc(
    100dvh - var(--nav-height) - 60px -
      var(--video-cms-safe-top, env(safe-area-inset-top, 0px)) -
      env(safe-area-inset-bottom)
  );
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #ffffffb3;
  border-radius: 22px;
  padding: 22px;
  overflow-y: auto;
  box-shadow: 0 24px 70px #00000047;
}
.customer-service-card > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}
.customer-service-card > header span {
  color: var(--accent);
  letter-spacing: 0.15em;
  font-size: 9px;
  font-weight: 900;
}
.customer-service-card > header h2 {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  font-size: 23px;
}
.customer-service-card > header button {
  color: #606873;
  background: #f1f2f4;
  border: 0;
  border-radius: 50%;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 22px;
}
.customer-contact-row:focus-visible,
.customer-service-card > header button:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #ff315833;
}
.customer-service-intro {
  gap: 7px;
  margin-top: 14px;
  display: grid;
}
.customer-service-intro > p {
  white-space: pre-wrap;
  color: #555c67;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}
.customer-service-intro > small {
  color: var(--muted);
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: flex;
}
.customer-service-intro > small svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 14px;
  height: 14px;
}
.customer-contact-list {
  gap: 9px;
  margin-top: 16px;
  display: grid;
}
.customer-contact-row {
  color: #242936;
  text-align: left;
  background: #f8f9fb;
  border: 1px solid #eceef2;
  border-radius: 16px;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  transition:
    border-color 0.18s,
    background 0.18s,
    transform 0.18s;
  display: grid;
}
.customer-contact-row:hover {
  background: #fff;
  border-color: #ff31583d;
  transform: translateY(-1px);
}
.customer-contact-icon {
  color: #fff;
  background: linear-gradient(145deg, #657083, #434c5c);
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}
.customer-contact-icon.is-telegram {
  background: linear-gradient(145deg, #38b2eb, #168bd1);
}
.customer-contact-icon.is-whatsapp {
  background: linear-gradient(145deg, #3bd878, #17a957);
}
.customer-contact-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 22px;
  height: 22px;
}
.customer-contact-icon.is-telegram svg,
.customer-contact-icon.is-whatsapp svg {
  fill: currentColor;
  stroke: none;
}
.customer-contact-copy {
  gap: 3px;
  min-width: 0;
  display: grid;
}
.customer-contact-copy small,
.customer-contact-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.customer-contact-copy strong {
  font-size: 12px;
  font-weight: 850;
}
.customer-contact-copy small {
  color: var(--muted);
  font-size: 9px;
}
.customer-contact-arrow {
  fill: none;
  stroke: #adb2bb;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  width: 18px;
  height: 18px;
}
.customer-contact-row.is-legacy {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  width: 100%;
}
.customer-contact-row.is-legacy em {
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.customer-service-empty {
  text-align: center;
  background: #f8f9fb;
  border: 1px dashed #dfe3e9;
  border-radius: 18px;
  justify-items: center;
  margin-top: 18px;
  padding: 22px 14px;
  display: grid;
}
.customer-service-empty > span {
  width: 44px;
  height: 44px;
  color: var(--accent);
  background: #ff315817;
  border-radius: 15px;
  place-items: center;
  margin-bottom: 10px;
  display: grid;
}
.customer-service-empty svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7px;
  width: 24px;
  height: 24px;
}
.customer-service-empty strong {
  font-size: 13px;
}
.customer-service-empty small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.55;
}
.maintenance-mode {
  z-index: 2147483600;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 22%, #353d51, #101218 68%);
  place-content: center;
  justify-items: center;
  padding: 28px;
  display: grid;
  position: fixed;
  inset: 0;
}
.maintenance-mode > img,
.maintenance-mode > span {
  -o-object-fit: contain;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  width: 64px;
  height: 64px;
}
.maintenance-mode > span {
  color: #fff;
  background: var(--accent);
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  display: grid;
}
.maintenance-mode h1 {
  margin: 18px 0 7px;
  font-size: 28px;
}
.maintenance-mode p {
  color: #ffffffc2;
  margin: 0;
  font-size: 14px;
}
.maintenance-mode small {
  color: #ffffff6b;
  margin-top: 8px;
}
.app-download-prompt {
  z-index: 2147482985;
  right: 12px;
  bottom: calc(
    var(--bottom-promotion-anchor) + var(--bottom-promotion-gap) +
      var(--bottom-promotion-bar-space)
  );
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #14171ef0;
  border: 1px solid #ffffffb8;
  border-radius: 20px;
  align-items: center;
  width: min(100% - 24px, 520px);
  min-height: 58px;
  margin: auto;
  padding: 5px 50px 5px 5px;
  display: flex;
  position: fixed;
  left: 12px;
  overflow: hidden;
  box-shadow: 0 12px 34px #0f14203d;
}
.app-download-prompt-main {
  color: #fff;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  display: grid;
}
.app-download-icon {
  background: linear-gradient(145deg, #ff3158, #ff7552);
  border-radius: 15px;
  place-items: center;
  width: 45px;
  height: 45px;
  display: grid;
  box-shadow: 0 7px 18px #ff315840;
}
.app-download-icon svg {
  width: 24px;
  height: 24px;
}
.app-download-copy {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.app-download-copy small,
.app-download-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.app-download-copy strong {
  font-size: 13px;
}
.app-download-copy small {
  color: #ffffff94;
  font-size: 10px;
}
.app-download-prompt-main > b {
  color: #fff;
  background: var(--accent);
  white-space: nowrap;
  border-radius: 14px;
  padding: 8px 11px;
  font-size: 10px;
}
.app-download-dismiss {
  color: #ffffffb3;
  background: 0 0;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  position: absolute;
  top: 7px;
  right: 3px;
}
.app-download-slide-enter-active,
.app-download-slide-leave-active {
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.app-download-slide-enter-from,
.app-download-slide-leave-to {
  opacity: 0;
  transform: translateY(12px);
}
.is-immersive .app-download-prompt {
  top: max(74px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)));
  background: #0a0a0ce6;
  bottom: auto;
}
.app-shell:not(.is-immersive):has(.global-ad-bar .ad-slot-group) {
  --bottom-promotion-bar-space: calc(66px + var(--bottom-promotion-gap));
}
.app-shell:not(.is-immersive):has(.app-download-prompt) {
  --bottom-promotion-prompt-space: calc(58px + var(--bottom-promotion-gap));
}
.app-shell:not(.is-immersive):is(
    :has(.app-download-prompt),
    :has(.global-ad-bar .ad-slot-group)
  )
  .customer-service-fab {
  bottom: calc(
    var(--bottom-promotion-anchor) + var(--bottom-promotion-gap) +
      var(--bottom-promotion-bar-space) + var(--bottom-promotion-prompt-space)
  );
}
.is-immersive:has(.global-ad-bar .ad-slot-group) .app-download-prompt {
  top: max(74px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)));
  bottom: auto;
}
@media (height<=520px) {
  .global-floating-ad {
    display: none;
  }
}
.download-page {
  background: var(--page-gradient);
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.download-hero {
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 80% 14%, #ff5b778c, #0000 28%),
    radial-gradient(circle at 12% 96%, #4e6eff4d, #0000 30%),
    linear-gradient(145deg, #1c2030, #11131b);
  border-radius: 28px;
  margin: 8px -4px 14px;
  padding: 58px 22px 25px;
  position: relative;
  overflow: hidden;
}
.download-hero:after {
  content: "";
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  top: -42px;
  right: -32px;
}
.download-back {
  z-index: 2;
  background: #ffffff1a;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
  position: absolute;
  top: 14px;
  left: 14px;
}
.download-back svg {
  width: 20px;
}
.download-app-mark {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 240px;
  margin: 0 auto 13px;
  display: flex;
  overflow: visible;
}
.download-app-mark,
.download-app-mark img {
  height: 48px;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
}
.download-app-mark img {
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  display: block;
}
.download-app-mark > span {
  color: #fff;
  font-size: 27px;
  font-weight: 900;
}
.download-hero > span {
  color: #ffb0bf;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 900;
}
.download-hero h1 {
  margin: 7px 0 5px;
  font-size: clamp(20px, 4.5vw, 24px);
}
.download-hero p {
  color: #ffffff9e;
  margin: 0;
  font-size: 12px;
}
.download-hero-badges {
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  display: flex;
  position: relative;
}
.download-hero-badges span {
  color: #ffffffc2;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff12;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 9px;
  display: inline-flex;
}
.download-hero-badges i,
.download-ready-state i {
  background: #43dc8c;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px #43dc8c1f;
}
.download-platform-tabs {
  background: #f1f2f5;
  border-radius: 17px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 14px;
  padding: 4px;
  display: grid;
}
.download-platform-tabs button {
  color: #808691;
  background: 0 0;
  border: 0;
  border-radius: 14px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
}
.download-platform-tabs button.active {
  color: var(--text);
  background: #fff;
  box-shadow: 0 4px 16px #14192514;
}
.download-card,
.download-empty {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 35px #161c2a0f;
}
.download-card > header {
  align-items: center;
  gap: 12px;
  display: flex;
}
.download-card > header > div {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.download-card > header strong {
  font-size: 17px;
}
.download-card > header small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.download-ready-state {
  color: #278659;
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: inline-flex;
}
.download-platform-icon {
  color: #fff;
  background: #31b665;
  border-radius: 16px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}
.download-platform-icon.ios {
  background: #15171c;
}
.download-platform-icon svg {
  width: 25px;
  height: 25px;
}
.download-steps {
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.download-steps li {
  color: #5f6570;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}
.download-steps b {
  width: 25px;
  height: 25px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 10px;
  display: grid;
}
.download-primary {
  color: #fff;
  background: linear-gradient(135deg, #ff3158, #ff5e72);
  border: 0;
  border-radius: 17px;
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  font-weight: 800;
  box-shadow: 0 8px 22px #ff315838;
}
.download-security {
  color: #a0a4ac;
  text-align: center;
  margin-top: 10px;
  font-size: 9px;
  line-height: 1.5;
  display: block;
}
.download-error,
.download-success {
  border-radius: 11px;
  margin: 0 0 12px;
  padding: 9px 11px;
  font-size: 11px;
}
.download-error {
  color: #ad2740;
  background: #fff0f3;
}
.download-success {
  color: #208352;
  background: #edfbf4;
}
.download-empty {
  color: #555c67;
  text-align: center;
}
.download-empty-icon {
  color: #647087;
  background: #f1f4f9;
  border-radius: 17px;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 13px;
  display: grid;
}
.download-empty-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 25px;
}
.download-empty strong {
  color: var(--text);
  font-size: 17px;
  display: block;
}
.download-empty p {
  max-width: 420px;
  color: var(--muted);
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.7;
}
.download-empty-back {
  color: #596171;
  background: #f2f4f7;
  border-radius: 999px;
  align-items: center;
  min-height: 34px;
  margin-top: 17px;
  padding: 0 15px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}
.download-benefits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
  display: grid;
}
.download-benefits article {
  background: #ffffffe0;
  border: 1px solid #edf0f5;
  border-radius: 18px;
  min-width: 0;
  padding: 14px 12px;
}
.download-benefits article > span {
  color: #ff3c5e;
  background: #fff0f3;
  border-radius: 10px;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-bottom: 10px;
  display: grid;
}
.download-benefits svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
  width: 17px;
}
.download-benefits article > div {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.download-benefits strong {
  font-size: 11px;
}
.download-benefits small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}
.download-help {
  color: #fff;
  background: #252a35;
  border-radius: 18px;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 16px 18px;
  display: grid;
}
.download-help > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.download-help span {
  color: #ff8297;
  font-size: 9px;
  font-weight: 900;
}
.download-help strong {
  font-size: 13px;
}
.download-help p {
  color: #ffffff9e;
  margin: 0;
  font-size: 10px;
  line-height: 1.65;
}
.download-manual-layer {
  z-index: 2147483200;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background: #080a0fa6;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}
.download-manual-card {
  background: #fff;
  border-radius: 24px;
  width: min(100%, 430px);
  padding: 25px;
  position: relative;
  box-shadow: 0 24px 80px #0000004d;
}
.download-manual-card > strong {
  padding-right: 30px;
  font-size: 19px;
  display: block;
}
.download-manual-card > p {
  color: #676e79;
  font-size: 12px;
  line-height: 1.7;
}
.download-manual-card textarea {
  resize: none;
  border: 1px solid var(--line);
  color: #464c57;
  word-break: break-all;
  background: #f7f8fa;
  border-radius: 12px;
  width: 100%;
  min-height: 88px;
  margin: 5px 0 13px;
  padding: 11px;
  font-size: 10px;
}
.download-manual-close {
  background: #f0f1f4;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 22px;
  position: absolute;
  top: 13px;
  right: 13px;
}
@media (width>=720px) {
  .bottom-nav {
    bottom: 14px;
  }
  .history-page,
  .page-with-nav {
    padding-bottom: calc(var(--nav-height) + 48px);
  }
  .detail-page {
    padding-bottom: calc(
      var(--nav-height) + 48px + env(safe-area-inset-bottom)
    );
  }
  .home-hero-stack {
    gap: 11px;
  }
  .ad-slot-hero {
    border-radius: 20px;
  }
  .app-section {
    padding: 34px 28px;
  }
  .poster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 17px;
  }
  .short-preview-row {
    grid-auto-columns: minmax(170px, 18%);
  }
  .shorts-page {
    bottom: calc(var(--nav-height) + 28px);
  }
  .short-card {
    border-radius: 18px 18px 0 0;
  }
  .simple-app-page {
    padding: 34px;
  }
  .feed-ad-slot {
    margin-inline: 28px;
  }
  .feature-page {
    margin-top: 0;
  }
  .video-card:hover {
    transform: translateY(-3px);
  }
  .video-card:hover .poster-wrap img {
    transform: scale(1.035);
  }
  .video-card:hover .play-indicator {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .catalog-filter-panel {
    padding-right: 86px;
  }
  .catalog-reset {
    display: block;
  }
}
@media (width>=1200px) {
  :root {
    --bottom-promotion-anchor: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav,
  .bottom-nav.is-green-mode {
    border-radius: 24px;
    grid-template-columns: 1fr;
    width: 76px;
    min-height: 0;
    padding: 7px;
    inset: 50% auto auto max(14px, 50vw - 682px);
    transform: translateY(-50%);
  }
  .bottom-nav a {
    min-height: 62px;
    padding: 6px 3px;
  }
  .detail-page,
  .history-page,
  .page-with-nav,
  .simple-app-page.community-page.page-with-nav {
    padding-bottom: 36px;
  }
  .shorts-page {
    bottom: 0;
  }
  .detail-toast,
  .history-undo-toast,
  .short-toast {
    bottom: 26px;
  }
}
@media (width<=480px) {
  .brand > span:last-child {
    display: none;
  }
  .profile-page,
  .reward-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mine-service-panel {
    padding: 15px;
  }
  .mine-primary-menu {
    gap: 5px;
  }
  .mine-primary-menu > button {
    min-height: 78px;
  }
  .mine-feature-item {
    grid-template-columns: 32px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 2px 8px;
    min-height: 80px;
    padding: 8px 12px;
    display: grid;
    position: relative;
  }
  .mine-feature-icon {
    width: 32px;
    height: 32px;
  }
  .mine-feature-item > i {
    position: static;
  }
  .mine-feature-copy {
    gap: 4px;
  }
  .mine-feature-copy strong {
    white-space: normal;
  }
  .download-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .download-hero {
    border-radius: 24px;
    margin-left: 0;
    margin-right: 0;
    padding: 58px 15px 23px;
  }
  .download-benefits {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .download-benefits article {
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    display: grid;
  }
  .download-benefits article > span {
    margin: 0;
  }
  .download-help {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .download-ready-state {
    display: none;
  }
  .hero-ad-dots {
    bottom: 13px;
    right: 14px;
  }
  .poster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .short-preview-row {
    grid-auto-columns: 42%;
  }
  .checkin-days {
    gap: 3px;
  }
  .checkin-days span {
    padding-inline: 0;
  }
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .benefit-hot-grid {
    gap-inline: 5px;
  }
  .benefit-ad-icon {
    border-radius: 10px;
  }
  .catalog-page {
    padding: 10px 12px
      calc(var(--nav-height) + 25px + env(safe-area-inset-bottom));
  }
  .catalog-total {
    padding: 7px 10px;
  }
  .catalog-search-bar {
    height: 44px;
    margin-top: 12px;
  }
  .catalog-search-bar button {
    min-width: 67px;
    padding-inline: 15px;
  }
  .catalog-type-tabs {
    gap: 24px;
  }
  .catalog-filter-row {
    grid-template-columns: 39px minmax(0, 1fr);
  }
  .catalog-results {
    padding-top: 20px;
  }
  .catalog-results h2 {
    font-size: 19px;
  }
  .catalog-poster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 19px 8px;
  }
  .catalog-poster-grid .video-card > strong {
    font-size: 13px;
  }
  .catalog-poster-grid .poster-wrap {
    border-radius: 9px;
  }
  .catalog-poster-grid .poster-badges {
    gap: 3px;
    top: 6px;
    left: 6px;
  }
  .catalog-poster-grid .badge:nth-child(n + 2),
  .catalog-poster-grid .play-indicator {
    display: none;
  }
  .creator-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    padding-inline: 16px;
  }
  .creator-avatar-large {
    width: 72px;
    height: 72px;
  }
  .creator-follow {
    grid-column: 1/-1;
    width: 100%;
  }
  .community-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .community-page-heading h1 {
    font-size: 23px;
  }
  .community-page-heading > a {
    min-height: 34px;
    padding-inline: 11px;
  }
  .community-intro-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 13px;
  }
  .community-intro-card > span {
    width: 40px;
    height: 40px;
  }
  .community-intro-card > b {
    display: none;
  }
  .community-content-tabs {
    margin-inline: -1px;
  }
  .community-content-tabs button {
    min-width: 62px;
    padding-inline: 10px;
  }
  .community-comment-card {
    border-radius: 16px;
    padding: 14px;
  }
  .community-comment-source {
    grid-template-columns: 48px minmax(0, 1fr) 16px;
  }
  .community-comment-source > img {
    width: 48px;
    height: 62px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  :after,
  :before {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .mine-green-guide-words > span {
    display: none;
    animation: none !important;
  }
  .mine-green-guide-words > span:first-child {
    opacity: 1;
    display: block;
    transform: none;
  }
  .detail-loading-skeleton > span,
  .route-loading-state > span {
    animation: none !important;
  }
}
.account-form select,
.account-form textarea {
  border: 1px solid var(--line);
  width: 100%;
  color: var(--text);
  font: inherit;
  resize: vertical;
  background: #f8f9fa;
  border-radius: 11px;
  outline: none;
  padding: 12px 13px;
}
.account-form select:focus,
.account-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #ff315814;
}
.submission-row-actions {
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}
.submission-row-actions > b {
  color: var(--accent);
  white-space: nowrap;
  font-size: 11px;
}
.benefit-load-error button,
.comment-list-error button,
.submission-row-actions > button {
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  min-height: 36px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
}
.comment-list-error {
  color: #9d3448;
  background: #fff0f3;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}
.benefit-load-error {
  margin: 16px 0;
}
.benefit-directory-header nav button,
.catalog-filter-row button,
.promotion-level-filter button {
  min-height: 38px;
}
.short-follow-button {
  min-height: 28px;
}
.community-content-tabs button {
  min-height: 38px;
}
@media (width<=480px) {
  .channel-row {
    align-items: flex-start;
    gap: 9px;
  }
  .submission-row-actions {
    flex-direction: column;
    align-items: flex-end;
  }
  .content-reward-notice {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .content-reward-notice > a {
    grid-column: 2;
  }
}
:root[data-theme="dark"] .app-topbar {
  border-bottom-color: var(--line);
}
:root[data-theme="dark"] .site-announcement {
  color: #e8bf7b;
  background: #231d14;
}
:root[data-theme="dark"] .app-download-entry {
  color: #7fafef;
  background: #5289dd24;
}
:root[data-theme="dark"] .message-entry {
  color: #ff8ba5;
  background: #ff466f21;
}
:root[data-theme="dark"]
  :is(.app-download-entry, .theme-entry, .message-entry) {
  box-shadow:
    0 4px 10px #0003,
    inset 0 0 0 1px #ffffff0b;
}
:root[data-theme="dark"] .message-entry > b,
:root[data-theme="dark"] .notification-dot {
  border-color: var(--surface);
}
:root[data-theme="dark"] .bottom-nav {
  border-color: var(--line);
}
:root[data-theme="dark"] .catalog-reset,
:root[data-theme="dark"] .catalog-search-bar,
:root[data-theme="dark"] .community-content-tabs,
:root[data-theme="dark"] .community-feed-tabs,
:root[data-theme="dark"] .download-platform-tabs,
:root[data-theme="dark"] .home-taxonomy-row a,
:root[data-theme="dark"] .mine-content-tabs,
:root[data-theme="dark"] .mine-payout-tabs,
:root[data-theme="dark"] .promotion-detail-tabs,
:root[data-theme="dark"] .reward-exchange-tabs,
:root[data-theme="dark"] .reward-record-tabs,
:root[data-theme="dark"] .taxonomy-filter button {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}
:root[data-theme="dark"]
  :is(
    .ad-item,
    .popup-ad-creative,
    .checkin-card,
    .task-section,
    .community-comment-card,
    .community-feed-state,
    .community-feed-skeleton article,
    .community-compose-modal > form,
    .community-related-picker > article,
    .community-video-result,
    .submission-closed-card,
    .mine-form-card,
    .mine-service-panel,
    .mine-content-card,
    .reward-loading,
    .reward-login-card,
    .reward-section,
    .reward-exchange-dialog,
    .activity-state,
    .activity-login,
    .activity-card,
    .promotion-state,
    .promotion-login,
    .promotion-metrics article,
    .promotion-card,
    .promotion-levels article,
    .account-form,
    .plans-grid article,
    .partner-section,
    .partner-application-card,
    .detail-loading-skeleton,
    .comment-sheet > section,
    .comment-sheet-composer,
    .short-comment-skeletons > div,
    .publish-choice-sheet > section,
    .site-notice-card,
    .customer-service-card,
    .download-card,
    .download-empty,
    .download-manual-card,
    .notification-state,
    .notification-card,
    .security-card
  ) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: 0 10px 30px #0003;
}
:root[data-theme="dark"]
  :is(
    .community-feed-tabs button.active,
    .community-content-tabs button.active,
    .mine-content-tabs > button.active,
    .reward-exchange-tabs button.active,
    .reward-record-tabs button.active,
    .reward-bound-account > button.active,
    .promotion-detail-tabs button.active,
    .download-platform-tabs button.active
  ) {
  color: var(--text);
  background: var(--surface-raised);
}
:root[data-theme="dark"]
  :is(
    .catalog-search-assists > div > span button,
    .community-comment-card > header > button,
    .community-load-more,
    .task-list button,
    .mine-following-more,
    .mine-logout-button,
    .generated-account-dismiss,
    .generated-account-album-guide > header button,
    .reward-topbar button,
    .activity-topbar > button,
    .promotion-topbar > a,
    .partner-topbar > a,
    .episode-heading-actions button,
    .episode-list button,
    .follow-button,
    .short-comment-more,
    .download-manual-close,
    .page-title-row > button
  ) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-raised);
}
:root[data-theme="dark"] .generated-account-album-guide {
  color: var(--text);
  background: var(--surface-raised);
}
:root[data-theme="dark"] .generated-account-album-guide > p {
  color: var(--muted);
}
:root[data-theme="dark"] .generated-account-manual-save {
  color: #b5bdcb;
}
:root[data-theme="dark"] .generated-account-save-feedback {
  color: #8ce0b9;
  background: #309a6929;
}
:root[data-theme="dark"]
  :is(
    .catalog-search-bar input,
    .catalog-search input,
    .community-video-search input,
    .mine-form-card > input,
    .mine-form-card > textarea,
    .mine-payout-field > input,
    .partner-application-card input,
    .partner-application-card select,
    .partner-application-card textarea,
    .account-form input,
    .account-form select,
    .account-form textarea,
    .security-card input,
    .detail-comment-form,
    .short-comment-editor,
    .download-manual-card textarea
  ) {
  border-color: var(--line);
  color: var(--text);
  background: var(--input-bg);
}
:root[data-theme="dark"]
  :is(
    .mine-primary-menu > button,
    .mine-creator-card,
    .generated-account-fields span,
    .download-empty-back
  ) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"]
  :is(
    .mine-feature-item,
    .points-earning-grid > a,
    .partner-benefit-grid article,
    .download-benefits article
  ) {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
}
:root[data-theme="dark"]
  :is(
    .catalog-search-assists header strong,
    .catalog-search-assists > div > span button,
    .catalog-type-tabs button.active,
    .catalog-filter-row button,
    .catalog-scope-tip,
    .community-page-heading span,
    .community-comment-card > header > button,
    .community-load-more,
    .mine-primary-menu > button,
    .mine-feature-item,
    .mine-feature-copy small,
    .mine-tab-summary > span,
    .mine-logout-button,
    .reward-login-card p,
    .reward-section header p,
    .reward-section header > small,
    .promotion-detail-tabs button,
    .partner-benefit-grid small,
    .episode-heading-actions button,
    .episode-list button,
    .download-empty,
    .download-manual-card > p,
    .download-manual-card textarea
  ) {
  color: var(--muted);
}
:root[data-theme="dark"] .catalog-type-tabs button.active,
:root[data-theme="dark"] .download-empty strong,
:root[data-theme="dark"] .generated-account-fields b,
:root[data-theme="dark"] .mine-feature-copy strong,
:root[data-theme="dark"] .mine-primary-menu strong {
  color: var(--text);
}
:root[data-theme="dark"] .ad-slot-grid .ad-item,
:root[data-theme="dark"] .profile-page > .ad-slot-group .ad-item {
  background: var(--surface-raised);
}
:root[data-theme="dark"] .poster-wrap {
  background: var(--surface-soft);
}
:root[data-theme="dark"] .short-loading,
:root[data-theme="dark"] .shorts-empty {
  color: var(--muted);
  background: var(--shorts-page-bg);
}
:root[data-theme="dark"] .customer-contact-row:hover {
  background: var(--surface-soft);
}
:root[data-theme="dark"] .mine-green-guide:before {
  border-color: var(--line);
  background: var(--surface-raised);
}
:root[data-theme="dark"] .download-empty-icon {
  color: var(--muted);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .catalog-page > .ad-slot-group .ad-item,
:root[data-theme="dark"] .detail-ad-bridge .ad-item,
:root[data-theme="dark"] .detail-promotions [data-ad-slot] .ad-item {
  background: var(--surface-soft);
}
:root[data-theme="dark"] .catalog-empty > span,
:root[data-theme="dark"] .catalog-order,
:root[data-theme="dark"] .comment-origin-badge,
:root[data-theme="dark"] .community-comment-source,
:root[data-theme="dark"] .community-compose-modal > form > header > button,
:root[data-theme="dark"] .community-feed-state > span,
:root[data-theme="dark"] .community-related-picker,
:root[data-theme="dark"] .community-related-picker > header > button,
:root[data-theme="dark"] .detail-comments > .community-load-more,
:root[data-theme="dark"] .detail-section-heading > p b,
:root[data-theme="dark"] .episode-heading-actions p b,
:root[data-theme="dark"] .episode-list button > span,
:root[data-theme="dark"] .submission-closed-card > span {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .catalog-empty strong,
:root[data-theme="dark"] .community-comment-source > div > strong,
:root[data-theme="dark"] .community-comment-text,
:root[data-theme="dark"] .detail-comment-list article p,
:root[data-theme="dark"] .detail-description-copy > p,
:root[data-theme="dark"] .episode-list button > strong {
  color: var(--text);
}
:root[data-theme="dark"] .catalog-skeleton > span,
:root[data-theme="dark"] .community-feed-skeleton :is(i, span, b),
:root[data-theme="dark"] .detail-loading-skeleton > span {
  background: linear-gradient(100deg, #1b1f27 25%, #2a303a 40%, #1b1f27 55%) 0
    0/240% 100%;
}
:root[data-theme="dark"] .community-comment-card > footer,
:root[data-theme="dark"] .community-comment-card > footer a,
:root[data-theme="dark"] .community-comment-card > footer button,
:root[data-theme="dark"] .detail-comment-list article {
  border-color: var(--line);
}
:root[data-theme="dark"] .community-comment-source:active {
  background: var(--surface-muted);
}
:root[data-theme="dark"]
  .community-compose-modal
  > form
  > label
  :is(input, textarea),
:root[data-theme="dark"] .community-video-search input {
  border-color: var(--line);
  color: var(--text);
  background: var(--input-bg);
}
:root[data-theme="dark"] .mine-green-guide {
  color: var(--text);
  background: #181c22fa;
  border-color: #31503f;
  box-shadow: 0 18px 48px #0000006b;
}
:root[data-theme="dark"] .mine-green-guide:before {
  border-color: #31503f;
}
:root[data-theme="dark"] .mine-green-guide-close,
:root[data-theme="dark"] .mine-green-guide > footer button:last-child {
  color: var(--muted);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .mine-green-guide > p {
  color: var(--muted);
}
:root[data-theme="dark"] .mine-payout-current {
  background: #2a2418;
  border-color: #5d4a27;
}
:root[data-theme="dark"] .mine-payout-current strong {
  color: #f1cf8c;
}
:root[data-theme="dark"] .mine-quick-register {
  background: linear-gradient(135deg, #ff315821, #ff8f4017);
}
:root[data-theme="dark"] .mine-auth-card {
  --auth-tabs-bg: #20252e;
  --auth-control-text: #c9ced7;
  --auth-action-start: #ff8aa0;
  --auth-action-end: #ff6684;
  --auth-action-text: #2b0711;
  --auth-input-border: #697487;
  --auth-placeholder: #aab1bd;
  --auth-help-text: #adb4c0;
  --auth-focus: #ff7891;
  --auth-focus-ring: #ff789147;
  --auth-error-bg: #3a202a;
  --auth-error-text: #ffc2cc;
  --auth-error-border: #8e4055;
  --auth-disabled-bg: #646b76;
  --auth-disabled-text: #fff;
}
:root[data-theme="dark"] .mine-auth-card > input {
  border-color: var(--auth-input-border);
}
:root[data-theme="dark"] .mine-auth-card > input:focus {
  border-color: var(--auth-focus);
  background: var(--input-bg);
}
:root[data-theme="dark"] .generated-account-fields span {
  color: var(--muted);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .detail-comment-form {
  border-color: var(--line);
  background: var(--input-bg);
}
:root[data-theme="dark"] .detail-comment-form:focus-within,
:root[data-theme="dark"] .short-comment-editor:focus-within {
  background: var(--surface-soft);
}
:root[data-theme="dark"] .notification-card.unread {
  background: linear-gradient(135deg, var(--surface-raised), #ff4a6b14);
  border-color: #ff4a6b57;
}
:root[data-theme="dark"] .short-comment-sheet > section {
  border-color: var(--line);
  background: var(--surface);
  box-shadow:
    0 -24px 80px #00000080,
    0 -1px #ffffff0f;
}
:root[data-theme="dark"] .short-comment-sheet .short-comment-header {
  background: linear-gradient(
    180deg,
    var(--surface-raised) 0,
    var(--surface-raised) 68%,
    var(--surface) 100%
  );
}
:root[data-theme="dark"] .short-comment-sheet .short-comment-header > button {
  color: var(--muted);
  background: var(--surface-soft);
}
:root[data-theme="dark"]
  .short-comment-sheet
  .short-comment-header
  > button:hover {
  background: var(--surface-muted);
}
:root[data-theme="dark"] .short-comment-list {
  background: linear-gradient(180deg, var(--surface), var(--bg));
  scrollbar-color: var(--surface-muted) transparent;
}
:root[data-theme="dark"] .short-comment-list::-webkit-scrollbar-thumb {
  background: var(--surface-muted);
}
:root[data-theme="dark"] .short-comment-sheet .short-comment-item {
  border-color: var(--line);
  background: var(--surface-raised);
  box-shadow: 0 5px 18px #00000029;
}
:root[data-theme="dark"]
  :is(
    .short-comment-heading h2,
    .short-comment-heading p b,
    .short-comment-author > strong,
    .short-comment-body > p,
    .short-comment-empty strong
  ) {
  color: var(--text);
}
:root[data-theme="dark"] .episode-list button:hover {
  color: var(--text);
  border-color: #ff4a6b75;
}
:root[data-theme="dark"] .episode-list button.active > strong {
  color: #ff8aa0;
}
:root[data-theme="light"] .short-loading,
:root[data-theme="light"] .shorts-empty {
  color: var(--muted);
  background: var(--shorts-page-bg);
}
:root[data-theme="light"] .shorts-error-state strong {
  color: var(--text);
}
:root[data-theme="light"] .short-load-error,
:root[data-theme="light"] .shorts-error-state small {
  color: var(--muted);
}
:root[data-theme="light"] .short-load-error {
  background: var(--shorts-page-bg);
}
:root[data-theme="dark"] .comment-sheet,
:root[data-theme="dark"] .community-compose-modal,
:root[data-theme="dark"] .download-manual-layer,
:root[data-theme="dark"] .mine-modal-layer,
:root[data-theme="dark"] .publish-choice-sheet {
  background: var(--overlay-bg);
}
:root[data-theme="light"] {
  --muted: #68717f;
}
:root[data-theme="light"] .bottom-nav a {
  color: #626b78;
}
:root[data-theme="light"]
  :is(.home-taxonomy-row > strong, .catalog-filter-row > strong),
:root[data-theme="light"] .community-comment-card > header > div small {
  color: #68717f;
}
:root[data-theme="light"]
  :is(
    .community-feed-end,
    .mine-version,
    .download-security,
    .detail-comment-state
  ) {
  color: #707885;
}
:root[data-theme="light"] .partner-form-note {
  color: #68717f;
}
:root[data-theme="light"] .security-card header em {
  color: #59616e;
}
:root[data-theme="dark"] .catalog-filter-row button.active,
:root[data-theme="dark"] .taxonomy-filter button.active {
  color: #fff;
  background: var(--accent);
}
:root[data-theme="dark"] .simple-app-page.partner-page {
  background: var(--bg);
}
:root[data-theme="dark"] .partner-flow li {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .partner-flow small,
:root[data-theme="dark"] .partner-form-note {
  color: var(--muted);
}
:root[data-theme="dark"]
  :is(
    .vip-plan,
    .vip-plan.svip,
    .reward-product,
    .reward-product.cash,
    .reward-product.mobile_credit
  ) {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(155deg, var(--surface-raised), var(--surface));
}
:root[data-theme="dark"]
  :is(
    .vip-plan h3,
    .reward-product h3,
    .reward-product > strong,
    .reward-product p b
  ) {
  color: var(--text);
}
:root[data-theme="dark"] :is(.vip-plan p, .reward-product p) {
  color: var(--muted);
}
:root[data-theme="dark"] :is(.vip-plan button, .reward-product button) {
  color: var(--text);
  background: var(--surface-muted);
}
:root[data-theme="dark"] .comment-sheet header button,
:root[data-theme="dark"] .customer-service-card > header button,
:root[data-theme="dark"] .publish-choice-sheet header button,
:root[data-theme="dark"] .reward-exchange-dialog header button,
:root[data-theme="dark"] .site-notice-close {
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"]
  :is(
    .reward-exchange-dialog label span,
    .mine-payout-field > span,
    .download-steps li,
    .customer-service-intro > p,
    .site-notice-card p
  ) {
  color: var(--muted);
}
:root[data-theme="dark"] .reward-bound-account {
  background: var(--surface-soft);
}
:root[data-theme="dark"] .reward-bound-account > button {
  color: var(--muted);
}
:root[data-theme="dark"] .reward-bound-account > button strong {
  color: var(--text);
}
:root[data-theme="dark"] .reward-bound-account > button.active {
  color: var(--gold);
  background: var(--surface-raised);
}
:root[data-theme="dark"] .reward-bound-account > button.active strong {
  color: var(--gold);
}
:root[data-theme="dark"] .publish-choice-sheet section > button {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .publish-choice-sheet section > button:disabled {
  color: var(--muted);
  background: var(--surface-raised);
}
:root[data-theme="dark"] .publish-choice-sheet section > button:disabled b {
  color: var(--muted);
}
:root[data-theme="dark"] .comment-sheet form textarea,
:root[data-theme="dark"] .short-comment-sheet .short-comment-editor textarea {
  border-color: var(--line);
  color: var(--text);
  background: 0 0;
}
:root[data-theme="dark"] .comment-sheet form textarea::-moz-placeholder {
  color: var(--muted);
  opacity: 1;
}
:root[data-theme="dark"]
  .short-comment-sheet
  .short-comment-editor
  textarea::-moz-placeholder {
  color: var(--muted);
  opacity: 1;
}
:root[data-theme="dark"] .comment-sheet form textarea::placeholder,
:root[data-theme="dark"]
  .short-comment-sheet
  .short-comment-editor
  textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
:root[data-theme="dark"] .comment-composer-field > small {
  color: var(--gold);
}
:root[data-theme="dark"] .customer-service-empty {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .customer-service-empty strong {
  color: var(--text);
}
:root[data-theme="dark"] .download-security {
  color: var(--muted);
}
:root[data-theme="dark"] .offline-download-actions button.danger,
:root[data-theme="dark"] .offline-download-copy > em,
:root[data-theme="dark"] .offline-download-copy > p b.is-failed {
  color: #ff879e;
}
:root[data-theme="dark"] .offline-download-copy > p b.is-completed {
  color: #68dba3;
}
:root[data-theme="dark"] .security-card :is(header small, p),
:root[data-theme="dark"] .security-heading p {
  color: var(--muted);
}
:root[data-theme="dark"] .security-card header em {
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .security-card header em.active {
  color: #8be3ab;
  background: #183d28;
}
:root
  :is(
    .catalog-search button,
    .taxonomy-filter button.active,
    .catalog-filter-row button.active,
    .short-access-card button:not(.secondary),
    .shorts-error-state button,
    .short-load-error button,
    .short-actions .short-follow-button,
    .creator-follow:not(.followed),
    .creator-state button,
    .creator-more,
    .community-compose-modal > form > footer button,
    .profile-header button,
    .mine-quick-register > button,
    .account-tabs button.active,
    .primary-action,
    .checkin-card > header > button:not(:disabled),
    .lottery-draw-button:not(:disabled),
    .paywall-card button,
    .detail-comment-form button,
    .history-undo-toast button,
    .comment-sheet form button,
    .site-notice-action,
    .customer-service-fab,
    .download-primary,
    .security-primary:not(.secondary),
    .submission-row-actions > button,
    .comment-list-error button,
    .benefit-load-error button
  ) {
  color: var(--action-fg);
  background: var(--action-bg);
}
:root
  :is(
    .home-taxonomy-row a:hover,
    .player-rate-panel > div button.active,
    .episode-list button.active > span,
    .app-download-prompt-main > b
  ) {
  color: var(--action-fg);
  background: var(--action-solid);
}
:root button:disabled {
  opacity: 1;
}
:root
  :is(
    .community-video-search button,
    .community-compose-modal > form > footer button,
    .vip-plan button,
    .reward-product button,
    .reward-pagination button,
    .reward-bound-account > button,
    .reward-exchange-submit,
    .catalog-pagination button,
    .checkin-card > header > button,
    .lottery-draw-button,
    .activity-pagination button,
    .detail-comment-form button,
    .comment-sheet form button,
    .short-comment-sheet .short-comment-editor button,
    .primary-action,
    .download-primary,
    .security-primary,
    .notification-more,
    .publish-choice-sheet section > button
  ):disabled {
  border-color: var(--line);
  color: var(--disabled-fg);
  background: var(--disabled-bg);
  box-shadow: none;
  filter: none;
  opacity: 1;
}
:root .lottery-draw-button:disabled small {
  color: var(--disabled-fg);
}
:root[data-theme="light"] .bottom-nav a.active {
  color: #c21845;
}
:root[data-theme="light"]
  :is(
    .catalog-type-tabs :is(button, a),
    .catalog-results header span,
    .catalog-reset,
    .comment-origin-badge,
    .community-comment-source > div > small,
    .community-comment-card > footer button,
    .community-comment-card > footer a,
    .detail-comment-list article small,
    .short-comment-body > footer,
    .short-comment-likes,
    .short-comment-editor small,
    .notifications-heading small,
    .notifications-heading p,
    .notification-copy time,
    .notification-copy small,
    .notification-state p,
    .notification-end,
    .security-heading p,
    .security-card header small,
    .security-card p,
    .security-loading
  ) {
  color: #68717f;
}
:root[data-theme="light"] .mine-content-tabs > button small {
  color: #59616e;
  background: #e2e6ec;
}
:root[data-theme="light"] .mine-content-tabs > button.active small {
  color: #c21845;
  background: #fff0f3;
}
:root[data-theme="light"] .community-comment-card > header > button.active {
  color: #59616e;
  background: #e8ebf0;
}
:root[data-theme="dark"] .partner-application-card label > span {
  color: var(--text);
}
:root[data-theme="dark"] .mine-payout-tabs > button,
:root[data-theme="dark"] .partner-application-card label em {
  color: var(--muted);
}
:root[data-theme="dark"] .mine-payout-tabs > button.active {
  color: var(--action-fg);
  background: var(--action-bg);
}
:root[data-theme="dark"] .mine-payout-current > button:disabled {
  color: var(--disabled-fg);
  background: var(--disabled-bg);
}
:root[data-theme="dark"] .customer-contact-row {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-soft);
}
:root[data-theme="dark"] .customer-contact-row:hover {
  background: var(--surface-muted);
  border-color: #ff4a6b5c;
}
:root[data-theme="dark"] .customer-contact-arrow {
  stroke: var(--muted);
}
:root[data-theme="dark"]
  :is(
    .notifications-heading small,
    .notifications-heading p,
    .notification-copy time,
    .notification-copy small,
    .notification-state p,
    .notification-end
  ) {
  color: var(--muted);
}
:root[data-theme="dark"]
  :is(.notification-symbol, .notification-copy em, .security-heading small) {
  color: #ff87a0;
}
:root[data-theme="dark"] .security-primary:not(.secondary) {
  color: var(--action-fg);
}
:root
  :is(
    .player-paused-actions > button,
    .player-control-dock > button,
    .player-episode-dock > button
  ):disabled {
  color: #ffffff9e;
  opacity: 1;
  background: #ffffff0f;
  border-color: #ffffff1a;
}
:root .short-actions .short-follow-button {
  background: var(--action-solid) !important;
}
:root .mine-auth-card .account-tabs button.active,
:root .mine-auth-card .mine-quick-register > button,
:root .mine-auth-card > .primary-action {
  color: var(--auth-action-text);
  background: linear-gradient(
    100deg,
    var(--auth-action-start),
    var(--auth-action-end)
  );
}
:root
  .mine-auth-card
  :is(.mine-quick-register > button, .primary-action):disabled {
  color: var(--auth-disabled-text);
  background: var(--auth-disabled-bg);
  opacity: 1;
}
@media (width<=480px) {
  .app-topbar {
    gap: 5px;
    padding-inline: 10px;
  }
  .topbar-actions {
    gap: 4px;
  }
  .app-download-entry,
  .message-entry,
  .theme-entry {
    border-radius: 10px;
    width: 36px;
    height: 36px;
  }
  .search-entry {
    gap: 5px;
    height: 36px;
    padding-inline: 8px;
  }
}
:root {
  --premium-glass: #ffffffb8;
  --premium-glass-strong: #ffffffe6;
  --premium-glass-soft: #f6f8fc94;
  --premium-glass-border: #ffffffd1;
  --premium-glass-outline: #4c5b7c17;
  --premium-glass-highlight: inset 0 1px 0 #ffffffd6;
  --premium-glass-shadow: 0 16px 42px #1c24371c, 0 3px 10px #1c24370b;
  --premium-glass-shadow-hover: 0 20px 48px #1c243729, 0 5px 14px #1c243712;
  --premium-button-shadow: 0 10px 24px #b2184633, inset 0 1px 0 #ffffff40;
  --premium-focus-ring: #8d1740;
  --premium-ambient-a: #ff376313;
  --premium-ambient-b: #6052dc0e;
}
:root[data-theme="dark"] {
  --premium-glass: #171b24b8;
  --premium-glass-strong: #191e28e6;
  --premium-glass-soft: #2329359e;
  --premium-glass-border: #ffffff1b;
  --premium-glass-outline: #ffffff09;
  --premium-glass-highlight: inset 0 1px 0 #ffffff16;
  --premium-glass-shadow: 0 18px 48px #0000004f, 0 3px 10px #00000029;
  --premium-glass-shadow-hover: 0 23px 56px #0000006b, 0 6px 16px #0003;
  --premium-button-shadow: 0 11px 28px #8b14414f, inset 0 1px 0 #ffffff29;
  --premium-focus-ring: #ff91a8;
  --premium-ambient-a: #ff3f6b14;
  --premium-ambient-b: #6554e612;
}
.app-shell {
  background:
    radial-gradient(
      ellipse 520px 320px at 6% 0,
      var(--premium-ambient-a),
      transparent 72%
    ),
    radial-gradient(
      ellipse 520px 360px at 96% 18%,
      var(--premium-ambient-b),
      transparent 74%
    ),
    var(--bg);
}
.profile-page,
.reward-page,
.simple-app-page {
  background-image:
    radial-gradient(
      ellipse 430px 250px at 0 0,
      var(--premium-ambient-a),
      transparent 74%
    ),
    radial-gradient(
      ellipse 430px 280px at 100% 16%,
      var(--premium-ambient-b),
      transparent 76%
    );
  background-color: var(--bg);
}
:is(.app-shell:has(> .home-page), .home-page) {
  background-image: none;
  background-color: var(--bg);
}
.app-header-stack {
  border-bottom: 1px solid var(--premium-glass-outline);
  background: linear-gradient(
    135deg,
    var(--premium-glass-strong),
    var(--premium-glass)
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 8px 28px #19203111;
}
:root[data-theme="dark"] .app-header-stack {
  box-shadow: 0 10px 30px #00000038;
}
.app-topbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: 0 0;
  border-bottom: 0;
}
.search-entry {
  border-color: var(--premium-glass-border);
  background: linear-gradient(
    135deg,
    var(--premium-glass-strong),
    var(--premium-glass-soft)
  );
  box-shadow:
    var(--premium-glass-highlight),
    0 5px 17px #1f283d11,
    0 0 0 1px var(--premium-glass-outline);
}
.search-entry:focus-within {
  box-shadow:
    var(--premium-glass-highlight),
    0 8px 24px #ff31581a,
    0 0 0 3px #ff315817;
  border-color: #ff315861;
}
:is(.app-download-entry, .theme-entry, .message-entry) {
  border: 1px solid var(--premium-glass-border);
  box-shadow:
    var(--premium-glass-highlight),
    0 7px 18px #252e441b,
    0 0 0 1px var(--premium-glass-outline);
  position: relative;
  overflow: hidden;
}
.app-download-entry {
  background:
    radial-gradient(circle at 22% 5%, #ffffffc7, #0000 38%),
    linear-gradient(145deg, #e3f0fff0, #c2daffb3);
}
.theme-entry {
  background:
    radial-gradient(circle at 22% 5%, #ffffffc7, #0000 38%),
    linear-gradient(145deg, #f3edfff2, #dbcfffb8);
}
.message-entry {
  background:
    radial-gradient(circle at 22% 5%, #fffc, #0000 38%),
    linear-gradient(145deg, #fff0f5f5, #ffcfdcb3);
  overflow: visible;
}
:root[data-theme="dark"] .app-download-entry {
  background:
    radial-gradient(circle at 22% 5%, #ffffff24, #0000 38%),
    linear-gradient(145deg, #375b8f8a, #213049ad);
}
:root[data-theme="dark"] .theme-entry {
  background:
    radial-gradient(circle at 22% 5%, #ffffff21, #0000 38%),
    linear-gradient(145deg, #5b46858c, #2d2643b8);
}
:root[data-theme="dark"] .message-entry {
  background:
    radial-gradient(circle at 22% 5%, #ffffff21, #0000 38%),
    linear-gradient(145deg, #752e458c, #3d1f2bb8);
}
.bottom-nav {
  border-color: var(--premium-glass-border);
  background: linear-gradient(
    145deg,
    var(--premium-glass-strong),
    var(--premium-glass)
  );
  box-shadow:
    var(--premium-glass-highlight),
    0 18px 52px #1c24372e,
    0 0 0 1px var(--premium-glass-outline);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
}
.bottom-nav a.active {
  background: linear-gradient(145deg, #ffffffb8, #ff31581f);
  box-shadow:
    inset 0 1px #ffffffc7,
    0 5px 16px #ff31581a;
}
:root[data-theme="dark"] .bottom-nav a.active {
  color: #ff8199;
  background: linear-gradient(145deg, #ffffff18, #ff4a6b26);
  box-shadow:
    inset 0 1px #ffffff14,
    0 6px 18px #00000029;
}
:root
  :is(
    .catalog-search button,
    .catalog-search-bar button,
    .taxonomy-filter button.active,
    .catalog-filter-row button.active,
    .short-access-card button:not(.secondary),
    .shorts-error-state button,
    .short-load-error button,
    .creator-follow:not(.followed),
    .creator-state button,
    .creator-more,
    .community-compose-modal > form > footer button,
    .profile-header button,
    .mine-quick-register > button,
    .primary-action,
    .checkin-card > header > button:not(:disabled),
    .lottery-draw-button:not(:disabled),
    .paywall-card button,
    .detail-comment-form button,
    .history-undo-toast button,
    .comment-sheet form button,
    .site-notice-action,
    .customer-service-fab,
    .download-primary,
    .security-primary:not(.secondary),
    .submission-row-actions > button,
    .comment-list-error button,
    .benefit-load-error button
  ):not(:disabled) {
  background: var(--action-bg);
  box-shadow: var(--premium-button-shadow);
  text-shadow: 0 1px 1px #4e0a1e2e;
  border: 1px solid #fff3;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
:root
  :is(
    .catalog-pagination button,
    .reward-pagination button,
    .activity-pagination button,
    .episode-heading-actions button,
    .follow-button,
    .redemption-more,
    .reward-exchange-check,
    .notification-more,
    .mine-logout-button,
    .page-title-row > button,
    .reward-topbar button,
    .mine-empty a,
    .mine-empty button,
    .submission-closed-card > a
  ):not(:disabled) {
  border: 1px solid var(--premium-glass-border);
  color: var(--text);
  background: linear-gradient(
    145deg,
    var(--premium-glass-strong),
    var(--premium-glass-soft)
  );
  box-shadow:
    var(--premium-glass-highlight),
    0 6px 17px #1f273a13,
    0 0 0 1px var(--premium-glass-outline);
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
}
.submission-closed-card > a {
  color: var(--text);
}
.detail-actions button {
  background: linear-gradient(145deg, #ffffff1a, #ffffff09);
  border: 1px solid #ffffff1b;
  box-shadow:
    inset 0 1px #ffffff13,
    0 6px 16px #0000001f;
}
.detail-actions button.active {
  color: #fff;
  background: linear-gradient(145deg, #ff4c6d57, #a31f4a3d);
  border-color: #ff6a8661;
}
:root
  :is(
    .community-feed-tabs,
    .community-content-tabs,
    .download-platform-tabs,
    .mine-payout-tabs,
    .reward-exchange-tabs,
    .reward-record-tabs
  ) {
  border: 1px solid var(--premium-glass-border);
  background: linear-gradient(145deg, var(--premium-glass-soft), #ffffff2e);
  box-shadow:
    var(--premium-glass-highlight),
    0 4px 14px #1f273a0e,
    0 0 0 1px var(--premium-glass-outline);
}
:root
  :is(
    .community-feed-tabs button.active,
    .community-content-tabs button.active,
    .download-platform-tabs button.active,
    .mine-payout-tabs > button.active,
    .reward-exchange-tabs button.active,
    .reward-record-tabs button.active
  ) {
  color: var(--text);
  background: linear-gradient(145deg, var(--premium-glass-strong), #ffffff80);
  box-shadow:
    var(--premium-glass-highlight),
    0 6px 16px #1e263817;
}
:root[data-theme="dark"]
  :is(
    .community-feed-tabs button.active,
    .community-content-tabs button.active,
    .download-platform-tabs button.active,
    .mine-payout-tabs > button.active,
    .reward-exchange-tabs button.active,
    .reward-record-tabs button.active
  ) {
  color: #fff;
  background: linear-gradient(145deg, #ffffff21, #ff4a6b1a);
}
:root
  :is(
    .state-card,
    .community-comment-card,
    .community-feed-state,
    .submission-closed-card,
    .reward-section,
    .partner-section,
    .partner-application-card,
    .mine-service-panel,
    .mine-content-card,
    .mine-feature-item,
    .notification-card,
    .security-card,
    .checkin-card,
    .task-section
  ) {
  border: 1px solid var(--premium-glass-border);
  background: linear-gradient(
    145deg,
    var(--premium-glass-strong),
    var(--premium-glass)
  );
  box-shadow:
    var(--premium-glass-highlight),
    var(--premium-glass-shadow),
    0 0 0 1px var(--premium-glass-outline);
}
.points-earning-grid > a,
.points-wallet-actions > a,
.reward-product,
.vip-plan {
  border-color: var(--premium-glass-border);
  box-shadow:
    var(--premium-glass-highlight),
    0 9px 24px #1e263913,
    0 0 0 1px var(--premium-glass-outline);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}
:is(
  .mine-identity-card,
  .reward-wallet,
  .membership-hero,
  .download-hero,
  .catalog-hero,
  .community-intro-card,
  .benefit-hero
) {
  border: 1px solid #ffffff24;
  box-shadow:
    inset 0 1px #ffffff1a,
    0 19px 48px #14192a2e;
}
:root
  :is(
    .site-notice-card,
    .customer-service-card,
    .download-manual-card,
    .mine-form-card,
    .mine-auth-card,
    .reward-exchange-dialog,
    .community-compose-modal > form,
    .comment-sheet > section,
    .publish-choice-sheet > section
  ) {
  border: 1px solid var(--premium-glass-border);
  background: linear-gradient(
    145deg,
    var(--premium-glass-strong),
    var(--premium-glass)
  );
  box-shadow:
    var(--premium-glass-highlight),
    0 28px 86px #080c164d,
    0 0 0 1px var(--premium-glass-outline);
}
:root
  :is(
    .site-notice-close,
    .customer-service-card > header button,
    .download-manual-close,
    .mine-green-guide-close,
    .reward-exchange-dialog header button,
    .community-compose-modal > form > header > button,
    .comment-sheet header button,
    .publish-choice-sheet header button
  ) {
  border: 1px solid var(--premium-glass-border);
  color: var(--text);
  background: linear-gradient(
    145deg,
    var(--premium-glass-strong),
    var(--premium-glass-soft)
  );
  box-shadow:
    var(--premium-glass-highlight),
    0 5px 15px #1a223414,
    0 0 0 1px var(--premium-glass-outline);
}
@media (hover: hover) and (pointer: fine) {
  :root
    :is(
      .catalog-search button,
      .catalog-search-bar button,
      .taxonomy-filter button.active,
      .catalog-filter-row button.active,
      .creator-follow:not(.followed),
      .creator-state button,
      .creator-more,
      .community-compose-modal > form > footer button,
      .profile-header button,
      .mine-quick-register > button,
      .primary-action,
      .checkin-card > header > button:not(:disabled),
      .lottery-draw-button:not(:disabled),
      .paywall-card button,
      .detail-comment-form button,
      .comment-sheet form button,
      .site-notice-action,
      .customer-service-fab,
      .download-primary,
      .security-primary:not(.secondary)
    ):not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 30px #b2184645,
      inset 0 1px #ffffff4d;
  }
  :root
    :is(
      .catalog-pagination button,
      .reward-pagination button,
      .activity-pagination button,
      .episode-heading-actions button,
      .follow-button,
      .redemption-more,
      .reward-exchange-check,
      .notification-more,
      .mine-logout-button,
      .page-title-row > button,
      .reward-topbar button,
      .mine-empty a,
      .mine-empty button,
      .submission-closed-card > a
    ):not(:disabled):hover {
    box-shadow:
      var(--premium-glass-highlight), var(--premium-glass-shadow-hover);
    border-color: #ff486c40;
    transform: translateY(-2px);
  }
  :is(
    .points-earning-grid > a,
    .points-wallet-actions > a,
    .reward-product,
    .vip-plan
  ):hover {
    box-shadow:
      var(--premium-glass-highlight), var(--premium-glass-shadow-hover);
    border-color: #ff486c38;
    transform: translateY(-2px);
  }
}
:root
  :is(
    .app-download-entry,
    .theme-entry,
    .message-entry,
    .bottom-nav a,
    .catalog-search button,
    .catalog-search-bar button,
    .creator-follow,
    .creator-state button,
    .creator-more,
    .community-compose-modal > form > footer button,
    .profile-header button,
    .mine-quick-register > button,
    .primary-action,
    .checkin-card > header > button,
    .lottery-draw-button,
    .paywall-card button,
    .detail-comment-form button,
    .comment-sheet form button,
    .site-notice-action,
    .customer-service-fab,
    .download-primary,
    .security-primary,
    .catalog-pagination button,
    .reward-pagination button,
    .activity-pagination button,
    .episode-heading-actions button,
    .follow-button,
    .redemption-more,
    .notification-more,
    .mine-logout-button
  ):focus-visible {
  outline: 3px solid var(--premium-focus-ring);
  outline-offset: 3px;
}
:root
  :is(
    .catalog-search button,
    .catalog-search-bar button,
    .creator-follow,
    .creator-state button,
    .creator-more,
    .community-compose-modal > form > footer button,
    .profile-header button,
    .mine-quick-register > button,
    .primary-action,
    .checkin-card > header > button,
    .lottery-draw-button,
    .paywall-card button,
    .detail-comment-form button,
    .comment-sheet form button,
    .site-notice-action,
    .customer-service-fab,
    .download-primary,
    .security-primary,
    .catalog-pagination button,
    .reward-pagination button,
    .activity-pagination button,
    .episode-heading-actions button,
    .follow-button,
    .redemption-more,
    .notification-more,
    .mine-logout-button
  ):not(:disabled):active {
  transform: translateY(1px) scale(0.985);
}
@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .app-header-stack,
  .bottom-nav,
  .search-entry,
  :is(.app-download-entry, .theme-entry, .message-entry),
  :root
    :is(
      .site-notice-card,
      .customer-service-card,
      .download-manual-card,
      .mine-form-card,
      .mine-auth-card,
      .reward-exchange-dialog,
      .community-compose-modal > form,
      .comment-sheet > section,
      .publish-choice-sheet > section
    ) {
    background-color: var(--surface-raised);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --premium-glass: var(--surface-raised);
    --premium-glass-strong: var(--surface-raised);
    --premium-glass-soft: var(--surface-soft);
    --premium-glass-border: var(--line);
  }
  .app-header-stack,
  .bottom-nav,
  .search-entry,
  :is(.app-download-entry, .theme-entry, .message-entry),
  :root
    :is(
      .site-notice-card,
      .customer-service-card,
      .download-manual-card,
      .mine-form-card,
      .mine-auth-card,
      .reward-exchange-dialog,
      .community-compose-modal > form,
      .comment-sheet > section,
      .publish-choice-sheet > section
    ) {
    background: var(--surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (width<=480px) {
  .mine-content-tabs.has-offline-tab > button {
    gap: 2px;
    padding-inline: 2px;
    font-size: 10px;
  }
  .mine-content-tabs.has-offline-tab > button small {
    min-width: 16px;
    height: 16px;
    padding-inline: 3px;
    font-size: 8px;
  }
  .offline-download-item {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
  }
  .offline-download-cover {
    width: 58px;
  }
  .offline-download-actions {
    grid-column: 1/-1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }
  .offline-download-actions a:only-child,
  .offline-download-actions button:only-child {
    grid-column: 2;
  }
}
@media (width<=380px) {
  .player-download-trigger {
    width: 31px;
    min-width: 31px;
    padding: 0 !important;
  }
  .player-download-trigger span {
    display: none;
  }
}
.ad-slot-group:not(.ad-slot-short) {
  gap: 10px;
  animation: 0.26s ease-out both ad-group-reveal;
}
@keyframes ad-group-reveal {
  0% {
    opacity: 0;
    translate: 0 5px;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
:is(
  .ad-slot-banner:has(> .ad-item:only-child),
  .ad-slot-inline:has(> .ad-item:only-child)
) {
  grid-auto-columns: 100%;
}
.ad-slot-group:not(.ad-slot-short) .ad-item {
  border-color: var(--premium-glass-outline, var(--line));
  background: var(--premium-glass-strong, var(--surface-raised));
  box-shadow:
    var(--premium-glass-highlight),
    0 7px 22px #141b2a13;
  cursor: pointer;
  transition:
    transform 0.22s,
    border-color 0.22s,
    box-shadow 0.22s,
    background 0.22s;
}
.ad-slot-group:not(.ad-slot-short) .ad-item:active {
  transform: scale(0.985);
}
@media (hover: hover) {
  .ad-slot-group:not(.ad-slot-short) .ad-item:hover {
    box-shadow:
      var(--premium-glass-highlight),
      0 12px 28px #141b2a21;
    border-color: #ff4b6f3b;
    transform: translateY(-2px);
  }
}
:root .app-shell .ad-slot-group.ad-slot-grid {
  --ad-card-border: #d6dce6;
  --ad-card-hover-border: #a8b3c3;
  --ad-card-edge: #ffffff94;
}
:root[data-theme="dark"] .app-shell .ad-slot-group.ad-slot-grid {
  --ad-card-border: #394250;
  --ad-card-hover-border: #657387;
  --ad-card-edge: #ffffff0b;
}
:root .app-shell .ad-slot-group.ad-slot-grid > .ad-item {
  border: 1px solid var(--ad-card-border);
  background: linear-gradient(
    145deg,
    var(--surface-raised),
    var(--surface-soft)
  );
  box-shadow:
    inset 0 1px 0 var(--ad-card-edge),
    0 2px 6px #10182809;
  border-radius: 14px;
}
:root .app-shell .ad-slot-grid .ad-copy strong {
  color: var(--text);
  text-shadow: none;
}
:root .app-shell .ad-slot-grid > .ad-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (hover: hover) {
  :root .app-shell .ad-slot-group.ad-slot-grid > .ad-item:hover {
    border-color: var(--ad-card-hover-border);
    box-shadow:
      inset 0 1px 0 var(--ad-card-edge),
      0 3px 8px #10182812;
    transform: translateY(-1px);
  }
}
.ad-slot-banner .ad-item {
  aspect-ratio: 10/3;
  isolation: isolate;
  color: #fff;
  background: #161b25;
  border-radius: clamp(12px, 2vw, 20px);
  height: auto;
  min-height: 0;
  padding: 0;
}
.ad-slot-banner .ad-item > img,
.ad-slot-banner .ad-item > video {
  border-radius: inherit;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.ad-slot-banner .ad-item:after {
  z-index: 1;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff1f;
  position: absolute;
  inset: 0;
}
.ad-slot-banner .ad-copy,
.ad-slot-banner .ad-item > b {
  display: none;
}
.ad-slot-banner:is(
    [data-ad-slot="video_below_player"],
    [data-ad-slot="video_detail_banner"],
    [data-ad-slot="search_top_banner"]
  )
  .ad-item {
  aspect-ratio: 4;
}
.ad-slot-inline .ad-item {
  border-radius: 14px;
  gap: 11px;
  min-height: 74px;
  padding: 9px;
}
.ad-slot-inline .ad-item > img,
.ad-slot-inline .ad-item > video {
  border-radius: 10px;
  width: 110px;
  height: 55px;
}
.ad-slot-inline .ad-copy strong {
  font-size: 13px;
}
.ad-slot-inline .ad-copy small {
  font-size: 11px;
  line-height: 1.4;
}
.ad-slot-inline .ad-item > b {
  color: var(--text);
  background: var(--surface-soft);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 10px;
}
.ad-slot-poster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ad-slot-poster .ad-item {
  border-radius: 14px;
  gap: 11px;
  min-height: 104px;
  padding: 8px;
}
.ad-slot-poster .ad-item > img,
.ad-slot-poster .ad-item > video {
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 9px;
  width: 60px;
  height: 90px;
}
.ad-slot-poster .ad-copy strong {
  font-size: 13px;
}
.ad-slot-poster .ad-copy small {
  font-size: 11px;
  line-height: 1.4;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item {
  align-items: center;
  min-height: 104px;
  padding: 8px;
}
.detail-promotions [data-ad-slot="video_recommendation_inline"] .ad-item > img,
.detail-promotions
  [data-ad-slot="video_recommendation_inline"]
  .ad-item
  > video {
  border-radius: 9px;
  width: 60px;
  height: 90px;
}
.detail-ad-bridge > .ad-slot-group {
  grid-auto-columns: minmax(88%, 1fr);
  grid-auto-flow: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 0;
  display: grid;
}
.detail-ad-bridge .ad-item {
  aspect-ratio: 4;
  border-radius: 12px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
}
.detail-ad-bridge .ad-item > img,
.detail-ad-bridge .ad-item > video {
  border-radius: inherit;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.community-page > [data-ad-slot="community_feed_inline"] .ad-item > img,
.community-page > [data-ad-slot="community_feed_inline"] .ad-item > video,
.home-page > [data-ad-slot="home_section_inline"] .ad-item > img,
.home-page > [data-ad-slot="home_section_inline"] .ad-item > video {
  border-radius: 9px;
  width: 64px;
  height: 64px;
}
.activity-page > .ad-slot-group,
.creator-page > .ad-slot-group,
.history-page > .ad-slot-group {
  width: 100%;
  margin: 12px 0;
}
.activity-page > .ad-slot-group .ad-item,
.creator-page > .ad-slot-group .ad-item,
.history-page > .ad-slot-group .ad-item {
  background: var(--premium-glass-strong, var(--surface-raised));
}
.profile-page
  > [data-ad-slot="profile_service_inline"]:has(> .ad-item:only-child) {
  grid-template-columns: 1fr;
}
.profile-page > [data-ad-slot="profile_service_inline"] > .ad-item:only-child {
  flex-direction: row;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 8px;
}
.profile-page
  > [data-ad-slot="profile_service_inline"]
  > .ad-item:only-child
  > img,
.profile-page
  > [data-ad-slot="profile_service_inline"]
  > .ad-item:only-child
  > video {
  aspect-ratio: 1;
  border-radius: 10px;
  width: 60px;
  height: 60px;
}
.profile-page
  > [data-ad-slot="profile_service_inline"]
  > .ad-item:only-child
  .ad-copy {
  padding: 0;
}
.community-page > [data-ad-slot="community_feed_inline"] {
  margin-top: 16px;
  margin-bottom: 14px;
}
.global-floating-ad {
  width: clamp(78px, 8vw, 105px);
  animation: 0.28s both ad-surface-enter;
}
.global-floating-ad .ad-item {
  border-color: var(--premium-glass-border, #ffffff4d);
  box-shadow: var(--premium-glass-shadow);
  border-radius: 16px;
}
.global-floating-ad .ad-copy {
  padding: 17px 6px 6px;
}
.global-floating-ad-close {
  width: 26px;
  height: 26px;
  font-size: 18px;
  top: -7px;
  right: -7px;
}
.global-ad-bar {
  border-color: var(--premium-glass-border, var(--line));
  background: var(--premium-glass-strong, var(--surface-raised));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: 0.28s both ad-bar-enter;
}
@keyframes ad-surface-enter {
  0% {
    opacity: 0;
    translate: 8px 5px;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
@keyframes ad-bar-enter {
  0% {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
@media (width<=719px) {
  .ad-slot-banner,
  .ad-slot-inline {
    grid-auto-columns: minmax(86%, 1fr);
  }
  .ad-slot-inline .ad-item > img,
  .ad-slot-inline .ad-item > video {
    width: 88px;
    height: 44px;
  }
  .ad-slot-poster {
    grid-template-columns: 1fr;
  }
  .detail-promotions
    [data-ad-slot="video_recommendation_inline"]
    .ad-item
    > img,
  .detail-promotions
    [data-ad-slot="video_recommendation_inline"]
    .ad-item
    > video {
    width: 56px;
    height: 84px;
  }
  .community-page > [data-ad-slot="community_feed_inline"] .ad-item > img,
  .community-page > [data-ad-slot="community_feed_inline"] .ad-item > video,
  .home-page > [data-ad-slot="home_section_inline"] .ad-item > img,
  .home-page > [data-ad-slot="home_section_inline"] .ad-item > video {
    width: 54px;
    height: 54px;
  }
  .global-floating-ad {
    top: max(
      122px,
      calc(107px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    );
    width: 78px;
    right: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ad-slot-group,
  .ad-slot-group .ad-item,
  .global-ad-bar,
  .global-floating-ad {
    transition: none !important;
    animation: none !important;
  }
  *,
  :after,
  :before {
    animation-iteration-count: 1 !important;
  }
  .points-earning-grid > a,
  .points-wallet-actions > a,
  .reward-product,
  .vip-plan,
  :root :is(button, a) {
    transition-duration: 0.01ms !important;
  }
}
.vip-plan-grid {
  gap: 12px;
  padding: 3px 2px 8px;
}
:root .vip-plan-grid .vip-plan {
  border: 1px solid #a88139;
  box-shadow:
    inset 0 1px #ffffffa6,
    0 2px 6px #1e26390f;
}
:root .vip-plan-grid .vip-plan.svip {
  border-color: #8873c3;
}
:root[data-theme="dark"] .vip-plan-grid .vip-plan {
  border-color: #b49452;
}
:root[data-theme="dark"] .vip-plan-grid .vip-plan.svip {
  border-color: #a394d4;
}
:root .vip-plan-grid .vip-plan:hover {
  transform: none;
}
:root .vip-plan-grid .vip-plan:focus-within {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
:root .app-header-stack.app-header-tools {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(115deg, var(--header-bg), var(--surface));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.app-header-tools .app-topbar {
  gap: 7px;
  min-height: 54px;
  padding: 8px 10px 4px;
}
.app-header-tools :is(.brand-mark, .brand-logo-image) {
  width: 34px;
  height: 34px;
  box-shadow: none;
}
.app-header-tools .search-entry {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  width: min(100%, 500px);
  height: 36px;
  box-shadow: none;
  gap: 6px;
  padding-inline: 10px 4px;
}
.app-header-tools .search-entry:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app-header-tools .search-entry > svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.app-header-tools .search-entry input {
  font-size: 13px;
}
:root .app-header-tools .search-entry-submit {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 11px;
}
.app-header-tools .topbar-actions {
  gap: 5px;
}
.app-header-tools
  .topbar-actions
  > :is(.app-download-entry, .theme-entry, .message-entry) {
  border: 1px solid var(--premium-glass-border);
  min-width: 34px;
  max-width: 34px;
  min-height: 34px;
  max-height: 34px;
  box-shadow: inset 0 0 0 1px var(--premium-glass-outline);
  border-radius: 11px;
  flex-basis: 34px;
  padding: 2px 0;
  transition:
    border-color 0.18s,
    background 0.18s;
  transform: none;
}
.app-header-tools .app-download-entry {
  background: #4385e017;
}
.app-header-tools .theme-entry {
  background: #855ac817;
}
.app-header-tools .message-entry {
  background: var(--accent-soft);
}
:root[data-theme="dark"] .app-header-tools .app-download-entry {
  color: #91bdff;
  background: #4385e021;
}
:root[data-theme="dark"] .app-header-tools .theme-entry {
  background: #ffcd5b1a;
}
:root[data-theme="dark"] .app-header-tools .message-entry {
  color: #ff91aa;
  background: var(--accent-soft);
}
.home-page > .home-channel-nav {
  --home-channel-item-padding: 9px;
  min-height: 52px;
  padding: 4px var(--home-gutter);
  background: linear-gradient(180deg, var(--surface), var(--bg));
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--home-gutter);
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: 3px;
  position: relative;
}
.home-page > .home-channel-nav a {
  min-height: 38px;
  padding: 6px var(--home-channel-item-padding);
  color: var(--muted);
  border-radius: 0;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.18s;
}
.home-page > .home-channel-nav a:first-child {
  padding-left: 0;
}
.home-page > .home-channel-nav a.active {
  color: #17181c;
  background: 0 0;
  font-size: 18px;
  font-weight: 800;
}
:root[data-theme="dark"] .home-page > .home-channel-nav a.active {
  color: var(--text);
}
.home-page > .home-channel-nav a.active:after {
  content: "";
  background: var(--accent);
  border-radius: 3px;
  width: 16px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}
.home-page > .home-channel-nav a:first-child.active:after {
  left: calc((100% - var(--home-channel-item-padding)) / 2);
}
.home-page > .home-channel-nav a:not(.active):hover {
  color: var(--text);
  background: 0 0;
}
.home-page > .home-channel-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (width<=359px) {
  .app-header-tools .app-topbar {
    gap: 5px;
    padding-inline: 8px;
  }
  .app-header-tools :is(.brand-mark, .brand-logo-image) {
    width: 32px;
    height: 32px;
  }
  .app-header-tools
    .topbar-actions
    > :is(.app-download-entry, .theme-entry, .message-entry) {
    flex-basis: 32px;
    min-width: 32px;
    max-width: 32px;
  }
  .app-header-tools .topbar-actions {
    gap: 3px;
  }
  .app-header-tools .search-entry {
    gap: 4px;
    padding-left: 7px;
  }
  .home-page > .home-channel-nav {
    padding-inline: var(--home-gutter);
  }
  .home-page > .home-channel-nav a {
    padding-inline: 9px;
  }
}
@media (width>=1024px) {
  .app-header-tools .app-topbar {
    gap: 16px;
    min-height: 64px;
    padding: 12px 20px 6px;
  }
  .app-header-tools .search-entry {
    height: 40px;
  }
  :root
    .app-header-tools
    .topbar-actions
    > :is(.app-download-entry, .theme-entry, .message-entry) {
    padding-inline: 9px;
  }
  .home-page > .home-channel-nav {
    --home-channel-item-padding: 18px;
    min-height: 54px;
    padding: 6px var(--home-gutter);
    gap: 8px;
  }
  .home-page > .home-channel-nav a {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page > .home-channel-nav a {
    transition: none;
  }
}
:root {
  --video-cms-safe-top: env(safe-area-inset-top, 0px);
  --video-cms-safe-left: env(safe-area-inset-left, 0px);
  --video-cms-safe-right: env(safe-area-inset-right, 0px);
}
:root[data-native-edge-to-edge="true"] {
  --video-cms-safe-top: var(--video-cms-native-safe-top, 0px);
  --video-cms-safe-left: var(--video-cms-native-safe-left, 0px);
  --video-cms-safe-right: var(--video-cms-native-safe-right, 0px);
}
:root[data-native-edge-to-edge="true"] .app-header-stack:before {
  content: none;
}
:root[data-native-edge-to-edge="true"] .app-header-stack .app-topbar {
  padding-left: max(10px, var(--video-cms-safe-left));
  padding-right: max(10px, var(--video-cms-safe-right));
}
@media (width<=359px) {
  :root[data-native-edge-to-edge="true"] .app-header-stack .app-topbar {
    padding-left: max(8px, var(--video-cms-safe-left));
    padding-right: max(8px, var(--video-cms-safe-right));
  }
}
@media (width>=1024px) {
  :root[data-native-edge-to-edge="true"] .app-header-stack .app-topbar {
    padding-left: max(20px, var(--video-cms-safe-left));
    padding-right: max(20px, var(--video-cms-safe-right));
  }
}
:root[data-native-edge-to-edge="true"] .site-announcement {
  padding-left: max(16px, var(--video-cms-safe-left));
  padding-right: max(16px, var(--video-cms-safe-right));
}
html:root[data-native-edge-to-edge="true"]
  .app-shell
  > main.profile-page.page-with-nav {
  width: 100%;
  max-width: none;
  padding-top: max(12px, var(--video-cms-safe-top));
  padding-left: max(14px, var(--video-cms-safe-left));
  padding-right: max(14px, var(--video-cms-safe-right));
  margin-inline: 0;
}
@media (width>=720px) {
  html:root[data-native-edge-to-edge="true"]
    .app-shell
    > main.profile-page.page-with-nav {
    padding-left: max(calc(50vw - 346px), var(--video-cms-safe-left));
    padding-right: max(calc(50vw - 346px), var(--video-cms-safe-right));
  }
}
@media (width>=1024px) {
  html:root[data-native-edge-to-edge="true"]
    .app-shell
    > main.profile-page.page-with-nav {
    padding-left: max(
      calc((100vw - min(960px, 100vw - 48px)) / 2 + 20px),
      var(--video-cms-safe-left)
    );
    padding-right: max(
      calc((100vw - min(960px, 100vw - 48px)) / 2 + 20px),
      var(--video-cms-safe-right)
    );
  }
}
:root[data-native-edge-to-edge="true"] .shorts-top {
  padding-left: max(15px, var(--video-cms-safe-left));
  padding-right: max(15px, var(--video-cms-safe-right));
}
:root[data-native-edge-to-edge="true"] .short-sound {
  right: max(15px, var(--video-cms-safe-right));
}
:root[data-native-edge-to-edge="true"] .short-actions {
  right: max(8px, var(--video-cms-safe-right));
}
:root[data-native-edge-to-edge="true"] .short-overlay {
  left: max(16px, var(--video-cms-safe-left));
  right: max(76px, var(--video-cms-safe-right));
}
:root[data-native-edge-to-edge="true"] .popup-ad-layer {
  padding-top: max(clamp(18px, 4dvh, 30px), var(--video-cms-safe-top));
  padding-left: max(clamp(18px, 4dvh, 30px), var(--video-cms-safe-left));
  padding-right: max(clamp(18px, 4dvh, 30px), var(--video-cms-safe-right));
}
:root[data-native-edge-to-edge="true"] .site-notice-layer {
  padding-top: max(24px, var(--video-cms-safe-top));
  padding-left: max(24px, var(--video-cms-safe-left));
  padding-right: max(24px, var(--video-cms-safe-right));
}
:root[data-native-edge-to-edge="true"] .mine-modal-layer {
  padding-top: max(22px, var(--video-cms-safe-top));
}
:root[data-native-edge-to-edge="true"]
  :is(.mine-modal-layer, .customer-service-layer) {
  padding-left: max(16px, var(--video-cms-safe-left));
  padding-right: max(16px, var(--video-cms-safe-right));
}
:root {
  --startup-backdrop:
    radial-gradient(circle at 20% 20%, #ff546f8c, transparent 32%),
    radial-gradient(circle at 85% 68%, #6e57ff8c, transparent 34%);
}
html[data-splash-active="true"] {
  background-image: var(--startup-backdrop);
  background-repeat: no-repeat;
  background-size: 100vw 100dvh;
}
html {
  scrollbar-gutter: auto;
}
@media (width>=1200px) {
  html {
    scrollbar-gutter: stable;
  }
}
@media (width<=1199px) {
  html {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}
@media (pointer: coarse) {
  html {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}
@media (display-mode: standalone) {
  html {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}
html[data-standalone="true"] {
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
html[data-standalone="true"]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.startup-loading,
.startup-loading * {
  box-sizing: border-box;
  touch-action: pan-x pan-y;
}
.startup-loading {
  z-index: 1;
  text-align: center;
  color: #fff;
  background: var(--startup-backdrop), #0d0e13;
  letter-spacing: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 24px;
  font-family:
    Inter,
    PingFang SC,
    Microsoft YaHei,
    sans-serif;
  font-size: 16px;
  line-height: normal;
  display: flex;
  position: fixed;
  inset: 0;
}
.spa-startup {
  z-index: 2147483050;
}
.startup-loading .spa-startup-brand,
.startup-loading .startup-brand {
  width: 64px;
  height: 64px;
  min-height: 64px;
  color: inherit;
  flex: none;
  justify-content: center;
  align-items: center;
  margin: 0 0 8px;
  display: flex;
}
.spa-startup-brand[hidden] {
  visibility: hidden;
  display: flex !important;
}
.spa-startup-brand [hidden] {
  display: none !important;
}
.startup-loading .spa-startup-logo,
.startup-loading .startup-brand-icon {
  -o-object-fit: contain;
  object-fit: contain;
  width: 64px;
  height: 64px;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  flex: none;
  display: block;
}
.startup-loading .spa-startup-brand-fallback,
.startup-loading .startup-brand-mark {
  background: #ff3158;
  border-radius: 16px;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  display: grid;
}
.startup-loading > i {
  border: 2px solid #fff3;
  border-top-color: #fff;
  border-radius: 50%;
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0 0 8px;
  animation: 1s linear infinite spa-spin;
  display: block;
}
.startup-loading > strong {
  flex: none;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  display: block;
}
.startup-loading > small {
  color: #ffffffbf;
  flex: none;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  display: block;
}
@keyframes spa-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .startup-loading > i {
    animation: none;
  }
}
:root {
  --muted: #626c7b;
}
:root[data-theme="dark"] {
  --muted: #adb7c7;
}
.global-floating-ad {
  --floating-size: clamp(78px, 8vw, 105px);
  width: var(--floating-size);
}
.global-floating-ad .ad-slot-floating {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
:root .global-floating-ad .ad-slot-floating .ad-item {
  width: var(--floating-size);
  height: var(--floating-size);
  isolation: isolate;
  min-height: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 10px #1218252e);
  background: 0 0;
  border: 0;
  border-radius: 16px;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.global-floating-ad .ad-slot-floating .ad-item > :is(img, video) {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  position: absolute;
  inset: 0;
}
.global-floating-ad .ad-copy {
  z-index: 1;
}
.global-floating-ad-close {
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
  top: -10px;
  right: -10px;
}
.global-floating-ad-close svg {
  pointer-events: none;
  width: 16px;
  height: 16px;
}
@media (width<=719px) {
  .global-floating-ad {
    --floating-size: 78px;
    right: 14px;
  }
}
:root
  :is(
    .mine-primary-menu small,
    .mine-feature-copy small,
    .mine-section-title p,
    .catalog-results header span,
    .community-page-heading span,
    .catalog-filter-row > span,
    .mine-library-hint,
    .mine-page-footer,
    .download-help p,
    .download-benefits p
  ) {
  color: var(--muted);
}
:root
  :is(
    .mine-primary-menu small,
    .mine-feature-copy small,
    .video-card > span,
    .ad-copy small,
    .download-benefits p,
    .download-help p,
    .mine-page-footer
  ) {
  font-size: 12px;
  line-height: 1.55;
}
:root :is(.mine-primary-menu strong, .mine-feature-copy strong) {
  font-size: 14px;
  line-height: 1.45;
}
.mine-feature-copy strong {
  white-space: normal;
  overflow-wrap: anywhere;
}
.mine-primary-menu small {
  white-space: normal;
}
.mine-feature-item {
  min-width: 0;
}
:root .mine-primary-menu {
  border-bottom-color: var(--line);
}
:root .bottom-nav a:not(.active) {
  color: var(--muted);
}
:root .site-announcement {
  color: #78501c;
  background: linear-gradient(110deg, #fff0d8, #fff9ef 60%, #fff3e5);
  border-bottom: 1px solid #dfaa5426;
  gap: 10px;
  min-height: 36px;
  padding: 5px 12px;
  font-size: 12px;
}
:root[data-theme="dark"] .site-announcement {
  color: #ecd0a1;
  background: linear-gradient(110deg, #30271e, #211e1a 60%, #2a231d);
  border-bottom-color: #e3b26524;
}
:root .site-announcement .announcement-badge {
  color: inherit;
  background: #d49a2817;
  border: 1px solid #dc9b3933;
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}
.announcement-badge svg {
  stroke-width: 1.7px;
  width: 14px;
  height: 14px;
}
.site-announcement p {
  text-overflow: clip;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    #0000,
    #000 8px calc(100% - 12px),
    #0000
  );
  mask-image: linear-gradient(90deg, #0000, #000 8px calc(100% - 12px), #0000);
}
.site-announcement .announcement-text {
  width: max-content;
  max-width: none;
  font: inherit;
  white-space: nowrap;
  animation: announcement-scroll var(--reading-duration, 8s) linear infinite;
  display: inline-flex;
}
.announcement-text em {
  font: inherit;
  letter-spacing: 0.2px;
  flex: none;
  padding-right: 48px;
  line-height: 24px;
}
.site-announcement.is-paused .announcement-text {
  animation-play-state: paused;
}
.announcement-control {
  width: 28px;
  height: 28px;
  color: inherit;
  cursor: pointer;
  background: #d49a2810;
  border: 1px solid #c7964c30;
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 5px;
  display: grid;
}
.announcement-control svg {
  stroke-width: 1.8px;
  width: 14px;
  height: 14px;
}
@keyframes announcement-scroll {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-announcement .announcement-text {
    animation-duration: var(--reading-duration, 8s) !important;
    animation-iteration-count: infinite !important;
  }
  .short-danmaku .short-danmaku-lane span {
    animation-duration: var(--reading-duration, 8s) !important;
    animation-iteration-count: 1 !important;
  }
}
:root .catalog-filter-panel .catalog-filter-row button,
:root .catalog-search-bar,
:root .catalog-search-bar button[type="submit"] {
  box-shadow: none !important;
}
:root[data-theme] .app-shell.is-immersive {
  background: #000;
}
.splash-ad.splash-fade-enter-active,
.splash-ad.splash-fade-leave-active {
  transition: none;
}
.splash-ad.splash-fade-enter-from,
.splash-ad.splash-fade-leave-to {
  opacity: 1;
}
.splash-ad {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #0d0e13;
}
@media (width<=1199px) {
  :root .bottom-nav {
    width: calc(100% - var(--home-content-inset, 12px) * 2);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
    transform: translateX(-50%) translateY(var(--short-nav-viewport-shift, 0));
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-radius: 22px;
    padding-bottom: 5px;
  }
  html[data-standalone="true"] .bottom-nav {
    bottom: env(safe-area-inset-bottom, 0);
  }
  html[data-standalone="true"] .app-shell {
    --bottom-promotion-anchor: calc(
      var(--bottom-nav-card-height) + env(safe-area-inset-bottom, 0px)
    );
  }
}
@media (width>=1024px) and (width<=1199px) {
  :root .bottom-nav {
    width: calc(
      var(--desktop-content-width) - var(--home-content-inset, 12px) * 2
    );
  }
}
:root .short-comment-sheet .short-comment-editor textarea {
  font-size: 14px;
}
@supports (-webkit-touch-callout: none) {
  :root .short-comment-sheet .short-comment-editor textarea {
    font-size: 16px;
  }
}
.short-comment-sheet > section {
  min-width: 0;
  max-width: 100%;
}
.short-comment-sheet .short-comment-list {
  min-width: 0;
  overflow-x: hidden;
}
.short-comment-sheet .short-comment-list p {
  overflow-wrap: anywhere;
}
.short-card.short-card-contained-media:not(.short-card-web-fullscreen):not(
    :fullscreen
  )
  > .hls-video-frame:not(:fullscreen)
  .hls-video {
  -o-object-position: center;
  object-position: center;
}
.short-card.short-card-landscape-media:not(.short-card-comments-open):not(
    .short-card-web-fullscreen
  ):not(:fullscreen)
  > .hls-video-frame:not(:fullscreen)
  .hls-video {
  -o-object-position: center max(0px, calc(50% - 25px));
  object-position: center max(0px, calc(50% - 25px));
}
.short-actions .short-sound {
  color: #17191e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  width: 40px;
  height: 40px;
  text-shadow: none;
  background: #f1f2f4;
  border: 0;
  border-radius: 50%;
  flex: none;
  position: static;
  box-shadow: 0 2px 8px #0003;
}
.short-actions .short-sound svg {
  filter: none;
  width: 21px;
  height: 21px;
}
.short-actions {
  gap: 9px;
}
.short-access-card.short-access-loading {
  width: auto;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  background: 0 0;
  border: 0;
  padding: 0;
}
.short-loading-dot {
  border: 2px solid #ffffff40;
  border-top-color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin: auto;
  animation: 0.8s linear infinite short-loading-spin;
  display: block;
}
@keyframes short-loading-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .short-loading-dot {
    animation: none;
  }
}
.short-card:not(.short-card-web-fullscreen):not(:fullscreen)
  .short-player-controls {
  padding-bottom: 6px;
}
.short-card:not(.short-card-web-fullscreen):not(:fullscreen) .short-overlay {
  bottom: 62px;
}
.short-player-controls {
  grid-template-columns: 32px auto minmax(32px, 1fr) auto 58px auto;
  gap: 6px;
  padding-left: 6px;
  padding-right: 10px;
}
.short-player-controls > button:first-child {
  width: 32px;
}
.short-player-controls .short-danmaku-control {
  width: 58px;
  height: 32px;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 9px;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  line-height: 14px;
  display: flex;
}
.short-danmaku-control i {
  box-sizing: border-box;
  background: 0 0;
  border: 1px solid #ffffff90;
  border-radius: 10px;
  flex: none;
  width: 24px;
  height: 14px;
  padding: 2px;
}
.short-danmaku-control i:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  transition:
    transform 0.15s,
    background 0.15s;
  display: block;
}
.short-danmaku-control i.on {
  background: #fff;
  border-color: #fff;
}
.short-danmaku-control i.on:after {
  background: #17191e;
  transform: translate(10px);
}
.short-ended-hint {
  z-index: 12;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
}
.short-comment-sheet .short-comment-editor {
  border-radius: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 5px 4px 10px;
}
.short-comment-sheet .short-comment-editor textarea {
  min-width: 0;
  height: 28px;
  min-height: 24px;
  padding: 3px 0;
  font-weight: 400;
  line-height: 22px;
}
.short-comment-sheet .short-comment-editor textarea::placeholder {
  font-size: 13px;
  font-weight: 400;
}
.short-comment-sheet .short-comment-editor button {
  min-width: 52px;
  min-height: 32px;
  box-shadow: none;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 12px;
}
.short-comment-sheet .short-comment-composer {
  min-height: 0;
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  row-gap: 5px;
}
.short-comment-composer-hint {
  color: var(--muted, #858b95);
  grid-column: 1/-1;
  justify-content: center;
  gap: 8px;
  padding: 0 4px;
  display: flex;
  position: relative;
}
.short-comment-composer-hint small + small {
  position: absolute;
  right: 4px;
}
.short-comment-composer-hint small {
  font-size: 11px;
  line-height: 1.4;
}
.short-comment-body footer .short-comment-likes {
  min-height: 32px;
  box-shadow: none;
  color: #9399a3;
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  display: inline-flex;
}
.short-comment-body footer .short-comment-likes svg {
  fill: none;
  stroke: currentColor;
  width: 15px;
  height: 15px;
}
.short-comment-body footer .short-comment-likes.active {
  color: #ee4679;
}
.short-comment-body footer .short-comment-likes.active svg {
  fill: currentColor;
}
.short-comment-body footer .short-comment-likes:disabled {
  opacity: 0.55;
  cursor: wait;
}
:root
  .topbar-actions
  > :is(.app-download-entry, .theme-entry, .message-entry)
  > span {
  font-size: 9px;
  line-height: 1.1;
}
:root :is(.mine-content-tabs, .community-content-tabs, .reward-record-tabs) {
  min-width: 0;
}
:root
  :is(
    .mine-form-card,
    .mine-auth-card,
    .reward-exchange-dialog,
    .customer-service-card,
    .site-notice-card
  ) {
  max-height: calc(
    100dvh - 32px - var(--video-cms-safe-top, env(safe-area-inset-top, 0px)) -
      env(safe-area-inset-bottom)
  );
  overflow-y: auto;
}
@media (width<=719px) {
  :root
    :is(
      .mine-form-card,
      .mine-auth-card,
      .community-compose-modal,
      .reward-exchange-dialog
    )
    :is(input, textarea, select) {
    font-size: 16px;
  }
}
@media (width>=1024px) {
  :root
    :is(
      .mine-primary-menu strong,
      .mine-feature-copy strong,
      .video-card > strong,
      .points-wallet-actions b,
      .points-earning-grid strong,
      .download-benefits strong,
      .download-help strong,
      .ad-slot-inline .ad-copy strong,
      .partner-section h3
    ) {
    font-size: 16px;
    line-height: 1.5;
  }
  :root
    :is(
      .mine-primary-menu small,
      .mine-feature-copy small,
      .mine-library-hint,
      .video-card > span,
      .mine-media-row .video-card > span,
      .points-wallet-actions small,
      .points-earning-grid small,
      .download-benefits p,
      .download-help p,
      .partner-section p,
      .community-page-heading span,
      .catalog-results header span,
      .catalog-hero p,
      .mine-section-title p,
      .mine-page-footer,
      .download-card p
    ) {
    font-size: 14px;
    line-height: 1.6;
  }
  .mine-primary-menu > button {
    min-height: 104px;
    padding: 12px 8px;
  }
  .mine-feature-item {
    gap: 2px 12px;
    min-height: 80px;
    padding: 8px 16px;
  }
  .mine-feature-copy {
    gap: 6px;
  }
  .mine-content-card,
  .mine-service-panel {
    padding: 22px;
  }
  .catalog-filter-row button {
    font-size: 14px;
  }
  .bottom-nav a,
  .site-announcement {
    font-size: 13px;
  }
  .site-announcement span {
    font-size: 11px;
  }
  .customer-service-fab {
    min-height: 44px;
    font-size: 13px;
  }
  :root
    .topbar-actions
    > :is(.app-download-entry, .theme-entry, .message-entry) {
    flex-direction: row;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 68px;
    max-width: none;
    padding: 0 10px;
    display: flex;
  }
  :root
    .topbar-actions
    > :is(.app-download-entry, .theme-entry, .message-entry)
    > span {
    font-size: 12px;
  }
  :root
    :is(
      .mine-tab-summary,
      .mine-tab-summary a,
      .mine-empty p,
      .mine-empty a,
      .mine-profile-edit,
      .mine-green-guide > p,
      .mine-green-guide footer button,
      .mine-version,
      .benefit-list-copy small,
      .community-content-tabs button,
      .community-feed-end,
      .download-security,
      .partner-section-heading small,
      .detail-meta,
      .detail-section-heading span,
      .detail-comment-input small,
      .detail-comment-state
    ) {
    font-size: 13px;
    line-height: 1.6;
  }
  :root
    :is(
      .mine-content-tabs button,
      .detail-actions button,
      .detail-comment-form button
    ) {
    font-size: 14px;
  }
}
.catalog-search-assists > .catalog-hot-tags {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
}
.catalog-hot-tags header {
  min-height: 46px;
}
.catalog-hot-tags header strong {
  color: var(--muted);
  font-size: 12px;
}
.catalog-search-assists > .catalog-hot-tags > span {
  gap: 8px;
  padding-block: 4px;
}
.catalog-search-assists > .catalog-hot-tags > span button {
  border: 0;
  border-radius: 12px;
  min-height: 38px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  line-height: 24px;
}
@media (width<=480px) {
  .catalog-search-assists > .catalog-hot-tags {
    grid-template-columns: 39px minmax(0, 1fr);
  }
}
@media (width>=1024px) {
  .catalog-search-assists > .catalog-hot-tags > span button {
    font-size: 14px;
  }
}
.catalog-filter-row + .catalog-filter-row {
  margin-top: 10px;
}
.catalog-filter-panel,
.catalog-filter-row {
  min-width: 0;
  max-width: 100%;
}
.player-shell.player-portrait:not(.is-player-fallback-fullscreen):not(
    :fullscreen
  ) {
  aspect-ratio: auto;
  background: #000;
  max-width: 420px;
  margin-inline: auto;
}
.player-shell.player-portrait > .hls-video-frame {
  height: min(78dvh, 760px);
}
.player-shell.player-portrait > .hls-video-frame > .player-media {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
.player-shell.player-portrait .hls-video {
  -o-object-fit: contain;
  object-fit: contain;
  background: #000;
}
.portrait-playback-controls {
  color: #fff;
  background: #000;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}
.portrait-playback-controls input {
  accent-color: #fff;
  flex: 1;
  min-width: 0;
}
.portrait-playback-controls button {
  color: #fff;
  background: 0 0;
  border: 0;
  flex: none;
  min-width: 36px;
  min-height: 36px;
}
.player-shell.player-portrait.is-player-fallback-fullscreen > .hls-video-frame {
  height: 100%;
}
.player-shell.player-portrait.is-player-fallback-fullscreen {
  border: 0;
  border-radius: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
  inset: 0 !important;
}
.player-shell.player-portrait.is-player-fallback-fullscreen
  > .player-placeholder {
  min-height: 100%;
  position: absolute;
  inset: 0;
}
html.video-fallback-fullscreen-active {
  scrollbar-gutter: auto;
}
html.video-fallback-fullscreen-active .app-topbar,
html.video-fallback-fullscreen-active .channel-tabs,
html.video-fallback-fullscreen-active .site-announcement {
  display: none !important;
}
html.video-fallback-fullscreen-active .detail-page,
html.video-fallback-fullscreen-active .detail-stage {
  filter: none;
  contain: none;
  overflow: visible;
  transform: none;
}
:is(
  .hls-video-frame:fullscreen .player-control-dock,
  .player-shell.is-player-fallback-fullscreen .player-control-dock,
  .player-shell:fullscreen .player-control-dock
) {
  background: linear-gradient(#0000, #000c);
  border: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
html.video-fallback-fullscreen-active .bottom-nav,
html.video-fallback-fullscreen-active .global-ad-bar,
html.video-fallback-fullscreen-active .global-floating-ad {
  display: none !important;
}
.drama-cover-entry {
  border-radius: inherit;
  color: #fff;
  cursor: pointer;
  background: #000;
  border: 0;
  width: 100%;
  height: min(62dvh, 600px);
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.drama-cover-entry img {
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0.8;
  width: 100%;
  height: 100%;
}
.drama-cover-entry > span {
  text-shadow: 0 2px 8px #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  display: flex;
  position: absolute;
  inset: 0;
}
.drama-cover-play {
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0006;
  border: 1px solid #fff9;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
}
.drama-cover-play svg {
  fill: currentColor;
  width: 26px;
  height: 26px;
  display: block;
  transform: translate(1px);
}
.detail-stage.detail-stage-drama {
  grid-template-columns: clamp(104px, 30vw, 148px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px;
}
.detail-stage-drama
  .player-shell.player-portrait:not(.is-player-fallback-fullscreen):not(
    :fullscreen
  ) {
  width: 100%;
  max-width: none;
  box-shadow: none;
  border: 0;
  border-radius: 12px;
  margin: 0;
}
.detail-stage-drama .drama-cover-entry {
  aspect-ratio: 9/16;
  height: auto;
}
.detail-stage-drama .drama-cover-entry > span {
  gap: 8px;
  font-size: 12px;
}
.detail-stage-drama .drama-cover-play {
  width: 44px;
  height: 44px;
}
.detail-stage-drama .drama-cover-play svg {
  width: 20px;
  height: 20px;
}
.detail-stage-drama .detail-hero {
  background: 0 0;
  gap: 16px;
  min-height: 0;
  padding: 4px 0;
}
.detail-stage-drama .detail-hero:after {
  display: none;
}
.detail-stage-drama .detail-hero h1 {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.35;
}
.detail-stage-drama .detail-meta {
  flex-wrap: wrap;
  gap: 6px;
}
.detail-stage-drama .drama-summary {
  margin-top: 10px;
}
.detail-stage-drama .drama-summary > p {
  color: #ffffffb8;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.7;
}
.detail-stage-drama .drama-summary > button {
  color: #ffffffd9;
  min-height: 32px;
  margin-top: 2px;
}
.detail-stage-drama .detail-now-playing {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.detail-stage-drama .detail-actions {
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: auto;
  margin: 0;
  padding: 0;
  position: relative;
  inset: auto;
}
.detail-stage-drama .detail-actions button {
  min-height: 32px;
  box-shadow: none;
  border-radius: 8px;
  flex-direction: row;
  gap: 3px;
  padding: 5px 2px;
  font-size: 11px;
}
.detail-stage-drama .detail-actions svg {
  width: 14px;
  height: 14px;
}
.detail-flow-drama > .episode-section {
  padding-top: 16px;
  padding-bottom: 18px;
}
.detail-flow-drama > .episode-section .detail-section-heading {
  margin-bottom: 12px;
}
.detail-flow-drama > .episode-section .detail-section-heading h2 {
  font-weight: 400;
}
.detail-stage.detail-stage-drama {
  box-shadow: none;
}
.detail-page-standard .detail-stage-standard {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: none;
  border-radius: 18px;
  flex-direction: column;
  display: flex;
}
.detail-stage-standard
  > .player-shell:not(.is-player-fallback-fullscreen):not(:fullscreen) {
  aspect-ratio: 16/9;
  background: #000;
  width: 100%;
  min-height: 0;
}
.detail-stage-standard > .player-shell > .player-placeholder {
  min-height: 100%;
}
.detail-stage-standard
  > .player-shell:has(> .hls-video-frame):not(
    .is-player-fallback-fullscreen
  ):not(:fullscreen) {
  aspect-ratio: auto;
}
.detail-stage-standard .drama-summary > p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}
.detail-stage-standard .drama-summary > button {
  color: var(--muted);
}
.detail-stage-standard .detail-hero {
  background: var(--surface-raised);
  min-height: 0;
  color: var(--text);
  gap: 16px;
  padding: 18px;
}
.detail-stage-standard .detail-hero:after {
  display: none;
}
.detail-stage-standard .detail-hero .detail-hero-copy {
  padding-right: 0;
}
.detail-stage-standard .detail-meta {
  color: var(--muted);
}
.detail-stage-standard .detail-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
  position: static;
}
.detail-stage-standard .detail-actions button {
  min-height: 36px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  box-shadow: none;
  flex-direction: row;
  padding: 8px 14px;
}
.detail-stage-standard .detail-actions svg {
  width: 18px;
  height: 18px;
}
@media (width<=719px) {
  .detail-page.detail-page-standard {
    padding-top: 12px;
  }
}
.detail-flow-drama .episode-section {
  color: var(--text);
}
.detail-flow-drama .episode-section .detail-section-heading h2 {
  color: var(--text);
  font-size: 18px;
}
.drama-episode-count {
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
}
.detail-flow-drama .episode-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 60px), 1fr));
  gap: 8px;
  max-height: none;
  margin: 0;
  padding: 0;
  display: grid;
  overflow: visible;
}
.detail-flow-drama .episode-list button {
  width: auto;
  min-width: 0;
  min-height: 36px;
  box-shadow: none;
  color: var(--text);
  white-space: nowrap;
  border-radius: 8px;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  display: flex;
}
.detail-flow-drama .episode-list button > span {
  display: none;
}
.detail-flow-drama .episode-list button > strong {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.detail-flow-drama .episode-list button.episode-expand {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--line);
  font-size: 12px;
}
.detail-flow-drama .episode-list button.episode-expand > span {
  width: auto;
  height: auto;
  color: inherit;
  background: 0 0;
  font-size: 14px;
  display: inline;
}
:root .detail-page .episode-list button.episode-expand > strong {
  color: var(--detail-accent, var(--text));
}
.detail-stage-drama .detail-actions.has-offline-action {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-page.detail-page-drama {
  background: var(--bg);
}
.detail-stage-drama
  .detail-cover-shell:not(.is-player-fallback-fullscreen):not(:fullscreen) {
  aspect-ratio: auto;
  width: 100%;
  max-width: none;
  box-shadow: none;
  border: 0;
  border-radius: 12px;
  margin: 0;
}
.detail-stage-drama .detail-cover-shell.is-player-fallback-fullscreen {
  border: 0;
  border-radius: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
  inset: 0 !important;
}
.detail-cover-shell.is-player-fallback-fullscreen > .player-placeholder {
  min-height: 100%;
  position: absolute;
  inset: 0;
}
.detail-page-drama .detail-flow-drama > .episode-section,
.detail-page-drama .detail-stage-drama {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 3px 12px #00000009;
}
.detail-page-drama .detail-flow-drama > .episode-section {
  margin-block: 12px;
  padding: 16px;
}
.detail-page-drama .detail-stage-drama .detail-hero h1,
.detail-page-drama .detail-stage-drama .drama-summary > button,
.detail-page-drama .detail-stage-drama .drama-summary > p {
  color: var(--text);
}
.detail-page-drama .detail-stage-drama .detail-meta {
  color: var(--muted);
}
.detail-page-drama .detail-stage-drama .detail-meta i {
  background: var(--line);
}
.detail-page-drama .detail-stage-drama .detail-actions button {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--line);
}
.detail-page:not(.detail-page-green)
  :is(.detail-stage-standard, .detail-stage-drama)
  .detail-actions
  button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.detail-page-drama .episode-section .detail-section-heading h2,
.detail-page-drama .episode-section .drama-episode-count {
  color: var(--text);
}
.detail-page-drama .episode-section .episode-list button {
  background: var(--surface-soft);
  border-color: var(--line);
}
.detail-page-drama .episode-section .episode-list button.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
@media (width<=719px) {
  .detail-page.detail-page-drama {
    padding-top: 12px;
  }
  .detail-page-drama .detail-stage-drama {
    gap: 12px;
    margin-inline: 12px;
    padding: 12px;
  }
  .detail-page-drama .detail-flow-drama {
    padding-inline: 12px;
  }
}
.player-shell.player-portrait .player-control-dock {
  background: linear-gradient(#0000, #000c);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.hls-video-frame .detail-playback-controls {
  z-index: 11;
  bottom: calc(var(--player-dock-height, 54px) + 8px);
  background: linear-gradient(#0000, #0008);
  grid-template-columns: 32px auto minmax(32px, 1fr) auto 44px;
  padding-bottom: 6px;
  position: absolute;
  left: 0;
  right: 0;
}
@media (width>=720px) {
  .player-shell.player-portrait:not(.is-player-fallback-fullscreen):not(
      :fullscreen
    ) {
    border: 6px solid #26272b;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 16px 45px #0004;
  }
}
.catalog-filter-row > div {
  gap: 8px;
  padding-block: 4px;
}
.catalog-filter-row button {
  border-radius: 12px;
  min-height: 38px;
  padding: 6px 12px;
  line-height: 24px;
}
.home-page .ad-slot-hero .hero-ad-item > :is(img, video) {
  aspect-ratio: auto;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: auto;
  display: block;
  position: static;
  inset: auto;
  transform: none;
}
@media (width>=1024px) {
  .detail-page .ad-slot-group.ad-slot-banner {
    width: 100%;
    max-width: 928px;
    margin-inline: auto;
  }
  .detail-page .ad-slot-group.ad-slot-banner .ad-item {
    aspect-ratio: auto;
    border-radius: 12px;
    height: 88px;
    min-height: 0;
    max-height: 88px;
  }
  .detail-page .ad-slot-group.ad-slot-banner .ad-item > :is(img, video) {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .community-page [data-ad-slot$="community_top_banner"] .ad-item,
  .profile-page [data-ad-slot$="profile_top_banner"] .ad-item {
    aspect-ratio: auto;
    border-radius: 12px;
    height: 88px;
    min-height: 0;
  }
  .community-page
    [data-ad-slot$="community_top_banner"]
    .ad-item
    > :is(img, video),
  .profile-page
    [data-ad-slot$="profile_top_banner"]
    .ad-item
    > :is(img, video) {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  .home-page .app-section {
    padding: 16px var(--home-gutter);
  }
  .home-page .mobile-section-heading {
    margin-bottom: 10px;
  }
  .home-page .mobile-section-heading h2 {
    font-size: 20px;
    line-height: 1.4;
  }
  .home-page .mobile-section-heading :is(span, a) {
    font-size: 14px;
  }
  .home-page > [data-ad-slot$="home_feed_banner"] .ad-item {
    aspect-ratio: auto;
    height: 88px;
  }
  .home-page .poster-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 12px;
  }
  .home-page .short-preview-row {
    grid-auto-columns: calc(16.6667% - 10px);
    gap: 12px;
  }
  :root .home-page .video-card > strong {
    font-size: 15px;
    line-height: 1.5;
  }
  .home-page .home-taxonomy-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding-block: 5px;
  }
  .home-page .home-taxonomy-row > strong {
    color: var(--muted);
    font-size: 15px;
    line-height: 36px;
  }
  .home-page .home-taxonomy-row > div {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
  }
  .home-page .home-taxonomy-row a {
    border-radius: 10px;
    align-items: center;
    min-height: 36px;
    padding: 6px 16px;
    font-size: 15px;
    line-height: 24px;
    display: inline-flex;
  }
  .app-shell {
    --desktop-content-width: min(960px, calc(100vw - 48px));
  }
  :root .app-shell .app-topbar,
  :root .app-shell .channel-tabs,
  :root .app-shell .site-announcement,
  :root .app-shell > main:not(.shorts-page) {
    box-sizing: border-box;
    width: var(--desktop-content-width);
    max-width: var(--desktop-content-width);
    margin-inline: auto;
  }
  :root .app-shell > main:not(.shorts-page):not(.home-page) {
    padding-inline: 20px;
  }
  .detail-page .detail-flow {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }
  .app-shell.is-immersive {
    --desktop-phone-height: min(820px, calc(100dvh - var(--nav-height) - 56px));
    --desktop-phone-width: min(420px, calc(var(--desktop-phone-height) * 9/16));
  }
  :root .app-shell > .shorts-page:not(.shorts-web-fullscreen) {
    inset: 24px auto auto calc((100vw - var(--desktop-phone-width)) / 2);
    width: var(--desktop-phone-width);
    max-width: none;
    height: var(--desktop-phone-height);
    border: 7px solid var(--surface);
    box-shadow:
      0 0 0 1px var(--line),
      0 24px 64px #00000038;
    background: #070707;
    border-radius: 32px;
    margin: 0;
    padding: 0;
  }
  .shorts-page:not(.shorts-web-fullscreen)
    .short-card:not(:fullscreen):not(.short-card-web-fullscreen) {
    border-radius: 0;
    width: 100%;
  }
  .shorts-page:not(.shorts-web-fullscreen) .shorts-top {
    width: 100%;
  }
}
@media (width>=1200px) {
  .app-shell {
    --desktop-content-width: min(960px, calc(100vw - 208px));
  }
  .bottom-nav,
  .bottom-nav.is-green-mode {
    left: max(14px, 50vw - 572px);
  }
  .app-shell.is-immersive {
    --desktop-phone-height: min(820px, calc(100dvh - 48px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-floating-ad,
  .global-floating-ad .ad-slot-floating {
    animation: none;
  }
}
:root .search-entry {
  gap: 6px;
  padding-right: 5px;
}
:root .search-entry input {
  flex: 1;
  min-width: 0;
}
:root .search-entry-submit {
  min-height: 30px;
  color: var(--accent);
  background: var(--accent-soft);
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  flex: none;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
}
:root .search-entry-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root .detail-ad-bridge {
  border: 0;
  margin: 0;
}
:root
  .detail-page
  .detail-flow
  > .detail-section:has(> :is(.ad-slot-banner, .ad-slot-grid)) {
  padding-inline: 0;
}
:root {
  --banner-ad-height: clamp(64px, 16vw, 76px);
}
:root .app-shell .ad-slot-group.ad-slot-banner {
  scroll-snap-type: none;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: auto;
  grid-auto-flow: row;
  width: 100%;
  max-width: 928px;
  margin: 8px auto;
  padding: 0;
  overflow: visible;
}
:root .app-shell .home-page > .ad-slot-group.ad-slot-banner {
  width: calc(100% - var(--home-gutter) * 2);
  max-width: none;
  margin-inline: var(--home-gutter);
}
:root .app-shell .ad-slot-group.ad-slot-banner .ad-item {
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  height: var(--banner-ad-height);
  aspect-ratio: auto;
  border-radius: 12px;
  padding: 0;
}
:root .app-shell .ad-slot-group.ad-slot-banner .ad-item > :is(img, video) {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-block: 8px;
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
    > .ad-item:nth-child(2)
  )
  > .ad-item {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
    > .ad-item:nth-child(2)
  )
  > .ad-item
  > :is(img, video) {
  aspect-ratio: 16/9;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
  flex: none;
  width: 100%;
  height: auto;
  max-height: none;
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
    > .ad-item:nth-child(2)
  )
  .ad-copy {
  flex: none;
  padding: 6px 8px;
}
@media (width<=1023px) {
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
      > .ad-item:nth-child(2):last-child
    ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
    > .ad-item:only-child
  ) {
  grid-template-columns: 1fr;
}
@media (width<=719px) {
  :root
    .app-shell
    .home-page
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root
    .app-shell
    .home-page
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
      > .ad-item:nth-child(2):last-child
    ) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root
    .app-shell
    .home-page
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
      > .ad-item:only-child
    ) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (width>=1024px) {
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  }
}
:root
  .app-shell
  :is(.profile-page, .creator-page)
  > .ad-slot-group.ad-slot-grid:is(
    [data-ad-slot$="profile_service_inline"],
    [data-ad-slot$="creator_profile_inline"]
  )
  > .ad-item:only-child {
  height: var(--banner-ad-height);
  min-height: 0;
  max-height: var(--banner-ad-height);
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px;
}
:root
  .app-shell
  :is(.profile-page, .creator-page)
  > .ad-slot-group.ad-slot-grid:is(
    [data-ad-slot$="profile_service_inline"],
    [data-ad-slot$="creator_profile_inline"]
  )
  > .ad-item:only-child
  > :is(img, video) {
  width: calc(var(--banner-ad-height) - 18px);
  height: calc(var(--banner-ad-height) - 18px);
  aspect-ratio: 1;
  border-radius: 10px;
  flex: none;
}
:root
  .app-shell
  :is(.profile-page, .creator-page)
  > .ad-slot-group.ad-slot-grid:is(
    [data-ad-slot$="profile_service_inline"],
    [data-ad-slot$="creator_profile_inline"]
  )
  > .ad-item:only-child
  .ad-copy {
  padding: 0;
}
:root
  .app-shell
  .detail-promotions
  > .ad-slot-grid[data-ad-slot$="video_recommendation_inline"]
  > .ad-item:only-child {
  height: var(--banner-ad-height);
  min-height: 0;
  max-height: var(--banner-ad-height);
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px;
}
:root
  .app-shell
  .detail-promotions
  > .ad-slot-grid[data-ad-slot$="video_recommendation_inline"]
  > .ad-item:only-child
  > :is(img, video) {
  width: 88px;
  height: calc(var(--banner-ad-height) - 18px);
  aspect-ratio: auto;
  border-radius: 7px;
  flex: none;
}
:root
  .app-shell
  .detail-promotions
  > .ad-slot-grid[data-ad-slot$="video_recommendation_inline"]
  > .ad-item:only-child
  .ad-copy {
  padding: 0;
}
:root .detail-comment-form {
  background: var(--surface-raised);
  border: 1px solid #d5d9e2;
  border-radius: 20px;
  padding: 8px 10px;
}
:root .detail-comment-input input {
  background: 0 0;
  font-size: 16px;
}
:root .detail-comment-reward {
  text-align: center;
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
  margin: 7px 0 16px;
  font-size: 11px;
  font-weight: 500;
}
:root .detail-comment-list {
  background: var(--surface-raised);
  border: 1px solid #d5d9e2;
  border-radius: 18px;
  overflow: hidden;
}
:root .detail-comment-list:empty {
  display: none;
}
:root .detail-comment-list article {
  border: 0;
  border-bottom: 1px solid var(--line);
  margin: 0 14px;
  padding: 16px 0;
}
:root .detail-comment-list article:last-child {
  border-bottom: 0;
}
:root .detail-comment-byline {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
:root .detail-comment-list .detail-comment-avatar {
  box-shadow: none;
}
:root .detail-comment-meta {
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  display: inline-flex;
}
:root .detail-comment-meta .detail-comment-like {
  min-height: 20px;
  box-shadow: none;
  color: var(--muted);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: 10px;
  display: inline-flex;
}
:root .detail-comment-meta .detail-comment-like svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  width: 12px;
  height: 12px;
}
:root .detail-comment-meta .detail-comment-like.active {
  color: #ee4679;
}
:root .detail-comment-meta .detail-comment-like.active svg {
  fill: currentColor;
}
:root .detail-comment-meta .detail-comment-like:disabled {
  opacity: 0.55;
  cursor: wait;
}
:root .detail-comment-byline strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}
:root .detail-comment-byline time {
  color: var(--muted);
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
}
:root[data-theme="dark"] :is(.detail-comment-form, .detail-comment-list) {
  border-color: #3b4352;
}
@media (width<=1023px) {
  :root .detail-page-drama .detail-flow-drama {
    padding-inline: 16px;
  }
}
@media (width<=719px) {
  .home-page .home-video-grid > :nth-child(n + 10) {
    display: none;
  }
}
@media (width>=720px) and (width<=1023px) {
  .home-page .poster-grid:not(.home-recommendation-grid) > :nth-child(n + 10) {
    display: none;
  }
}
@media (width>=1024px) {
  :root {
    --banner-ad-height: 72px;
  }
  :root .app-shell > main.detail-page.detail-page-drama {
    padding-inline: 16px;
  }
  :root .app-shell .ad-slot-group.ad-slot-banner .ad-item {
    height: var(--banner-ad-height);
    max-height: var(--banner-ad-height);
  }
}
:is(
  .player-shell.is-player-fallback-fullscreen .player-control-dock,
  .player-shell:fullscreen .player-control-dock
) {
  z-index: 20;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: max(
    8px,
    var(--video-cms-safe-left, env(safe-area-inset-left, 0px))
  );
  padding-right: max(
    8px,
    var(--video-cms-safe-right, env(safe-area-inset-right, 0px))
  );
}
:is(
  .player-shell.is-player-fallback-fullscreen .player-episode-panel,
  .player-shell:fullscreen .player-episode-panel
) {
  width: min(
    680px,
    calc(
      100vw - 32px -
        var(--video-cms-safe-left, env(safe-area-inset-left, 0px)) -
        var(--video-cms-safe-right, env(safe-area-inset-right, 0px))
    )
  );
  left: 50%;
  right: auto;
  bottom: calc(
    var(--player-dock-height, 54px) + var(--player-progress-height, 44px) +
      32px + var(--player-episode-lift, 0px)
  );
  max-height: calc(
    100dvh - var(--player-dock-height, 54px) -
      var(--player-progress-height, 44px) - 104px -
      var(--player-episode-lift, 0px) -
      var(--video-cms-safe-top, env(safe-area-inset-top, 0px))
  );
  position: fixed;
  transform: translate(-50%);
}
:is(
  .player-shell.is-player-fallback-fullscreen .player-shell-fullscreen-topbar,
  .player-shell:fullscreen .player-shell-fullscreen-topbar
) {
  padding-top: max(
    10px,
    var(--video-cms-safe-top, env(safe-area-inset-top, 0px))
  );
}
.hls-video-frame .player-control-dock {
  flex-wrap: wrap;
  gap: 6px;
}
.hls-video-frame .player-control-slot {
  flex: 160px;
}
.hls-video-frame .player-episode-dock {
  grid-template-columns: minmax(44px, 1fr) minmax(64px, 2fr) minmax(44px, 1fr);
  gap: 4px;
  display: grid;
}
.hls-video-frame .player-episode-dock > button {
  min-width: 44px;
  padding: 0 8px;
}
.hls-video-frame .player-episode-dock > .player-episode-trigger {
  width: 100%;
  min-width: 64px;
  max-width: none;
  font-size: 12px;
}
.player-shell.player-portrait {
  --player-episode-lift: 30px;
}
.hls-video-frame .player-control-dock > button,
.hls-video-frame .player-episode-dock > button {
  box-sizing: border-box;
  border-radius: 9px;
  height: 34px;
  min-height: 34px;
}
.hls-video-frame .player-episode-panel {
  box-sizing: border-box;
  flex-direction: column;
  display: flex;
}
.hls-video-frame .player-episode-panel header {
  flex: none;
}
.hls-video-frame .player-episode-panel > div {
  flex: auto;
  min-height: 0;
  padding-bottom: 8px;
  overflow-y: auto;
}
.detail-playback-controls .player-volume-button {
  color: #fff;
  background: #ffffff14;
  border: 1px solid #ffffff28;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 10px;
  display: grid;
}
.detail-playback-controls .player-volume-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
  height: 22px;
}
.detail-playback-controls .player-volume-button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #fff;
}
:is(
  .player-shell.is-player-fallback-fullscreen .player-ad-skip,
  .player-shell:fullscreen .player-ad-skip
) {
  top: max(
    calc(12px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px))),
    calc(var(--ad-media-y, 0px) + 12px)
  );
  right: max(
    calc(12px + var(--video-cms-safe-right, env(safe-area-inset-right, 0px))),
    calc(var(--ad-media-x, 0px) + 12px)
  );
  min-height: 44px;
}
:is(
  .player-shell.is-player-fallback-fullscreen .player-ad-copy,
  .player-shell:fullscreen .player-ad-copy
) {
  left: max(
    calc(16px + var(--video-cms-safe-left, env(safe-area-inset-left, 0px))),
    calc(var(--ad-media-x, 0px) + 16px)
  );
  right: max(
    calc(16px + var(--video-cms-safe-right, env(safe-area-inset-right, 0px))),
    calc(var(--ad-media-x, 0px) + 16px)
  );
  bottom: max(
    calc(16px + env(safe-area-inset-bottom, 0px)),
    calc(var(--ad-media-y, 0px) + 16px)
  );
  max-width: none;
}
:is(
  .player-shell.is-player-fallback-fullscreen .player-ad-copy i,
  .player-shell:fullscreen .player-ad-copy i
) {
  box-sizing: border-box;
  align-items: center;
  min-height: 44px;
  display: inline-flex;
}
:root .detail-hero .detail-hero-copy {
  width: 100%;
  min-width: 0;
  padding-right: 0;
}
:root .detail-hero .detail-action-bar {
  min-width: 0;
  margin-top: 14px;
  display: block;
}
:root .detail-hero .detail-action-bar .detail-actions {
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  position: static;
  inset: auto;
}
:root .detail-hero .detail-action-bar .detail-actions.has-offline-action {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
:root .detail-hero .detail-action-bar .detail-actions button {
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px;
}
:root .detail-hero .detail-action-bar .detail-actions button > span {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
:root .detail-hero .detail-action-bar .detail-actions svg {
  flex-shrink: 0;
}
:root
  .detail-page
  .detail-action-bar
  .detail-actions
  button:not([aria-pressed="true"]) {
  background: var(--surface-soft);
}
@media (hover: hover) {
  :root
    .detail-page
    .detail-action-bar
    .detail-actions
    button:not(:disabled):not([aria-pressed="true"]):hover {
    background: var(--surface-muted);
  }
}
:root .detail-hero .detail-meta .detail-intro-button {
  min-height: 28px;
  color: var(--detail-accent, var(--accent));
  white-space: nowrap;
  cursor: pointer;
  background: 0 0;
  border: 0;
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px 0 3px 4px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}
:root .detail-hero .detail-intro-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
:root .detail-hero .detail-intro-button:focus-visible {
  outline: 2px solid var(--detail-accent, var(--accent));
  outline-offset: 3px;
  border-radius: 4px;
}
@media (width<=719px) {
  :root .detail-stage-drama .detail-action-bar .detail-actions {
    gap: 5px;
  }
  :root .detail-stage-drama .detail-action-bar .detail-actions button {
    flex-direction: row;
    gap: 3px;
    min-height: 38px;
    padding: 6px 2px;
  }
}
@media (width<=959px) {
  :root [contenteditable=""],
  :root [contenteditable="plaintext-only"],
  :root [contenteditable="true"],
  :root
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="button"]
    ):not([type="submit"]):not([type="reset"]):not([type="file"]):not(
      [type="hidden"]
    ):not([type="image"]):not([type="color"]),
  :root select,
  :root textarea {
    font-size: 16px !important;
  }
}
@media (pointer: coarse) {
  :root [contenteditable=""],
  :root [contenteditable="plaintext-only"],
  :root [contenteditable="true"],
  :root
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="button"]
    ):not([type="submit"]):not([type="reset"]):not([type="file"]):not(
      [type="hidden"]
    ):not([type="image"]):not([type="color"]),
  :root select,
  :root textarea {
    font-size: 16px !important;
  }
}
:root .app-shell > main.detail-page.detail-page-drama {
  padding-inline: 16px;
}
@media (width<=719px) {
  :root .app-shell > main.detail-page.detail-page-drama {
    padding-inline: 12px;
  }
}
:root .detail-page .detail-stage.detail-stage-drama {
  align-items: stretch;
  width: 100%;
  margin-inline: 0;
}
:root .detail-page .detail-playback-group + .detail-flow-drama,
:root .detail-page .detail-stage + .detail-flow-drama {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-hero {
  align-self: stretch;
  padding: 0;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-hero-copy {
  flex-direction: column;
  flex: 1;
  display: flex;
}
:root
  .detail-page
  .detail-stage.detail-stage-drama
  .detail-hero-copy
  > .drama-play-entry {
  margin-top: auto;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-action-bar {
  order: 1;
  margin-top: 0;
  padding-top: 8px;
}
:root
  .detail-page
  .detail-stage.detail-stage-drama
  .detail-cover-shell:not(.is-player-fallback-fullscreen):not(:fullscreen) {
  align-self: stretch;
}
:root .detail-page .detail-stage.detail-stage-drama .drama-cover-entry {
  height: 100%;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-hero h1 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.45;
}
:root .detail-page .detail-stage.detail-stage-standard .detail-hero h1 {
  font-size: 18px;
  line-height: 1.45;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-meta--compact {
  -moz-column-gap: 8px;
  gap: 4px 8px;
}
:root
  .detail-page
  .detail-stage.detail-stage-drama
  .detail-meta--compact
  .detail-intro-button {
  margin-left: auto;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-actions button {
  flex-direction: row;
  gap: 4px;
  padding: 6px 2px;
  font-size: 12px;
}
:root
  .detail-page
  .detail-stage.detail-stage-drama
  .detail-actions
  button
  > span {
  white-space: nowrap;
  overflow-wrap: normal;
}
:root .detail-page .detail-stage.detail-stage-drama .detail-actions svg {
  width: 14px;
  height: 14px;
}
.drama-cover-entry .drama-cover-views {
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 3px #0006;
  pointer-events: none;
  background: #0007;
  border-radius: 5px;
  max-width: calc(100% - 14px);
  padding: 3px 5px;
  font-size: 10px;
  line-height: 16px;
  position: absolute;
  bottom: 7px;
  right: 7px;
}
@media (width<=360px) {
  :root .detail-page .detail-stage.detail-stage-drama {
    grid-template-columns: clamp(80px, 25vw, 90px) minmax(0, 1fr);
  }
  :root .detail-page .detail-stage.detail-stage-drama .detail-actions {
    gap: 5px;
  }
  :root .detail-page .detail-stage.detail-stage-drama .detail-actions button {
    gap: 2px;
    padding-inline: 1px;
    font-size: 11px;
  }
  :root .detail-page .detail-stage.detail-stage-drama .detail-actions svg {
    width: 12px;
    height: 12px;
  }
}
:root .detail-page:not(.detail-page-standard) .episode-section .episode-list {
  --episode-cell-min-width: 72px;
  gap: 10px;
}
:root
  .detail-page:not(.detail-page-standard)
  .episode-section
  .episode-list
  button {
  min-height: 42px;
  padding: 9px 8px;
}
:root
  .app-shell
  .detail-page
  .detail-ad-bridge
  > .ad-slot-group.ad-slot-banner {
  margin: 0 auto;
  padding: 0;
}
:root .detail-page:not(.detail-page-green) .detail-ad-bridge {
  margin: 12px 0;
}
:root
  .app-shell
  .home-page
  > .app-section:has(+ :is(.ad-slot-banner, .ad-slot-grid)) {
  padding-bottom: 0;
}
:root .app-shell .catalog-page > .ad-slot-banner + .catalog-results,
:root
  .app-shell
  .home-page
  > :is(.ad-slot-banner, .ad-slot-grid)
  + .app-section {
  padding-top: 0;
}
:root .detail-page .detail-flow {
  --banner-flow-gap: 0px;
}
:root .detail-page-green .detail-flow {
  --banner-flow-gap: 14px;
}
:root
  .app-shell
  .detail-page
  .detail-flow
  > :is(.detail-ad-bridge, .detail-section):has(
    > :is(.ad-slot-banner, .ad-slot-grid)
  ) {
  margin-top: calc(8px - var(--banner-flow-gap));
  margin-bottom: calc(8px - var(--banner-flow-gap));
  box-shadow: none;
  background: 0 0;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}
:root
  .app-shell
  .detail-page
  .detail-flow
  > :is(.detail-ad-bridge, .detail-section)
  > :is(.ad-slot-banner, .ad-slot-grid) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
:root .app-shell .detail-promotions > .ad-slot-group + .ad-slot-group {
  margin-top: 8px;
}
:root
  .detail-page:not(.detail-page-green)
  .detail-flow
  > .episode-section:has(+ .detail-ad-bridge > .ad-slot-banner) {
  margin-bottom: 8px;
}
:root
  .detail-page:not(.detail-page-green)
  .detail-flow
  > .detail-section:has(
    + .detail-promotions > :is(.ad-slot-banner, .ad-slot-grid)
  ) {
  padding-bottom: 0;
  display: flow-root;
}
:root
  .detail-page:not(.detail-page-green)
  .detail-flow
  > :is(.detail-ad-bridge, .detail-section):has(
    > :is(.ad-slot-banner, .ad-slot-grid)
  )
  + .detail-section {
  border-top: 0;
  padding-top: 0;
  display: flow-root;
}
.catalog-selected-tag {
  color: var(--text-muted);
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
:root .home-page .home-video-grid.home-video-grid--lead {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}
:root .home-page .home-video-grid--lead > .home-list-lead {
  grid-column: 1/-1;
}
:root .home-page .home-video-grid--lead > .home-list-lead .poster-wrap {
  aspect-ratio: 16/9;
}
@media (width<=1023px) {
  :root .home-page .home-video-grid--lead > .video-card:nth-child(n + 8) {
    display: none;
  }
}
@media (width>=1024px) {
  :root .home-page .home-video-grid.home-video-grid--lead {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root .home-page .home-video-grid--lead > .video-card {
    display: flex;
  }
  :root .home-page .home-video-grid--lead > .video-card:nth-child(-n + 2) {
    grid-column: span 2;
  }
  :root
    .home-page
    .home-video-grid--lead
    > .video-card:nth-child(-n + 2)
    .poster-wrap {
    aspect-ratio: 16/9;
  }
  :root .home-page .home-video-grid--lead > .video-card:nth-child(n + 11) {
    display: none;
  }
}
@media (width<=719px) {
  :root .home-page .home-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root .home-page .home-video-grid.home-video-grid--mosaic {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
}
:root .home-page .home-video-grid--mosaic .poster-wrap {
  aspect-ratio: 2/3;
}
:root .home-page .home-video-grid--mosaic > .home-list-feature {
  grid-area: 1/1 / span 2 / span 2;
  align-self: stretch;
  min-height: 0;
}
:root .home-page .home-video-grid--mosaic > .home-list-feature .poster-wrap {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
:root
  .home-page
  .home-video-grid--mosaic
  > .home-list-feature
  .poster-wrap
  img {
  position: absolute;
  inset: 0;
}
:root
  .home-page
  .home-video-grid--mosaic:has(> .home-list-feature)
  > :nth-child(2) {
  grid-area: 1/3;
}
:root
  .home-page
  .home-video-grid--mosaic:has(> .home-list-feature)
  > :nth-child(3) {
  grid-area: 2/3;
}
@media (width<=1023px) {
  :root .home-page .home-video-grid--mosaic > :nth-child(n + 10) {
    display: none;
  }
}
@media (width>=1024px) {
  :root .home-page .home-video-grid.home-video-grid--mosaic {
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        min(128px, calc(14.2857% - var(--video-card-column-gap, 8px) * 6 / 7)),
        1fr
      )
    );
  }
  :root .home-page .home-video-grid--mosaic > .video-card {
    display: flex;
  }
  :root .home-page .home-video-grid--mosaic > .video-card:nth-child(n + 12) {
    display: none;
  }
  :root
    .home-page
    .home-video-grid--mosaic:has(> .video-card:nth-child(18))
    > .video-card:nth-child(-n + 18) {
    display: flex;
  }
  :root
    .home-page
    .home-video-grid--mosaic:has(> .home-list-feature)
    > :is(:nth-child(2), :nth-child(3)) {
    grid-area: auto;
  }
}
:root .catalog-skeleton[data-cover-layout="landscape"] > span,
:root .video-card-landscape .poster-wrap {
  aspect-ratio: 16/9;
}
:root .video-layout-grid[data-cover-layout="landscape"],
:root .video-layout-grid[data-cover-layout="mixed"] {
  --poster-layout-gap: 18px;
  -moz-column-gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
:root .video-layout-grid[data-cover-layout="landscape"] {
  row-gap: var(--poster-layout-gap);
}
:root .video-layout-grid[data-cover-layout="mixed"] {
  grid-auto-rows: 1px;
  grid-auto-flow: row;
  row-gap: 0;
}
:root .video-layout-grid[data-cover-layout="mixed"] > * {
  align-self: start;
  min-width: 0;
}
@media (width>=720px) {
  :root .video-layout-grid[data-cover-layout="landscape"],
  :root .video-layout-grid[data-cover-layout="mixed"] {
    --poster-layout-gap: 22px;
    -moz-column-gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    column-gap: 18px;
  }
}
@media (width<=719px) {
  :root
    .home-video-grid.video-layout-grid[data-cover-layout="landscape"]
    > :nth-child(10),
  :root
    .home-video-grid.video-layout-grid[data-cover-layout="mixed"]
    > :nth-child(10) {
    display: flex;
  }
  :root
    .home-video-grid.video-layout-grid[data-cover-layout="landscape"]
    > :nth-child(n + 11),
  :root
    .home-video-grid.video-layout-grid[data-cover-layout="mixed"]
    > :nth-child(n + 11) {
    display: none;
  }
}
.short-replay-overlay {
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(#0000002e, #0000 65%);
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}
.short-replay-button {
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  background: #14171edb;
  border: 1px solid #fff6;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 6px 22px #0000003d;
}
.short-replay-button svg {
  fill: currentColor;
  stroke: none;
  width: 20px;
  height: 20px;
}
.short-replay-button:active {
  transform: scale(0.97);
}
.short-card-comments-open .short-replay-overlay {
  top: var(--short-comment-media-top, 72px);
  height: var(--short-comment-media-height, 30dvh);
  bottom: auto;
}
html.short-comments-gesture-locked,
html.short-comments-gesture-locked body {
  overscroll-behavior: none;
  overflow: hidden;
}
:root[data-theme] .short-comment-sheet.short-comment-sheet {
  touch-action: pan-y;
  overscroll-behavior: none;
}
:root[data-theme] .short-comment-sheet .short-comment-list {
  touch-action: pan-y;
}
.short-card > :is(.hls-video-frame, img) {
  transition:
    height 0.25s,
    top 0.25s;
  top: 0;
}
:root .short-card.short-card-comments-open {
  background: #000;
}
:root .short-card.short-card-comments-open > :is(.hls-video-frame, img) {
  top: var(--short-comment-media-top, 72px);
  width: 100%;
  height: var(--short-comment-media-height, 30dvh);
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  opacity: 1;
  filter: none;
  background: #000;
  position: absolute;
  left: 0;
}
:root .short-card.short-card-comments-open > .hls-video-frame .hls-video {
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  opacity: 1;
  filter: none;
}
.short-card.short-card-comments-open:after {
  display: none;
}
.short-card.short-card-comments-open
  :is(.short-overlay, .short-actions, .short-danmaku) {
  visibility: hidden;
  pointer-events: none;
}
:root .short-card.short-card-comments-open .short-player-controls {
  top: var(--short-comment-controls-top);
  height: var(--short-comment-controls-height, 44px);
  text-shadow: 0 1px 3px #000;
  background: 0 0;
  grid-template-columns: 32px auto minmax(0, 1fr) auto 32px;
  gap: 6px;
  min-height: 0;
  padding: 0 10px;
  bottom: auto;
}
.short-card.short-card-comments-open .short-player-controls button {
  width: 32px;
  height: 100%;
}
.short-card.short-card-comments-open .short-access-card,
.short-card.short-card-comments-open .short-ended-hint {
  top: calc(
    var(--short-comment-media-top) + var(--short-comment-media-height) / 2
  );
}
.shorts-comments-open .shorts-top:before {
  background: 0 0;
}
.shorts-comments-open .shorts-top > :is(button, a, div) {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: 0 0;
  border-color: #0000;
}
:is(
  body:has(.short-comment-sheet) .bottom-nav,
  body:has(.shorts-comments-restoring) .bottom-nav
) {
  visibility: hidden;
  pointer-events: none;
}
:root[data-theme] .short-comment-sheet.short-comment-sheet {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  filter: none;
  transform: translateY(var(--short-comment-drag, 0));
  color: #f6f7fa;
  background: 0 0;
  padding: 0;
  display: block;
  inset: auto;
}
:root[data-theme] .short-comment-sheet.short-comment-sheet > section {
  color: #f6f7fa;
  width: 100%;
  height: 100%;
  max-height: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #202229;
  border: 0;
  border-top: 1px solid #535969;
  border-radius: 18px 18px 0 0;
  grid-template-rows: 24px 44px minmax(0, 1fr) auto;
  animation: none;
  display: grid;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-grabber {
  touch-action: none;
  cursor: grab;
  background: 0 0;
  border: 0;
  border-radius: 0;
  place-items: center;
  width: 100%;
  height: 24px;
  padding: 0;
  display: grid;
}
.short-comment-grabber i {
  background: #9098aa;
  border-radius: 99px;
  width: 36px;
  height: 4px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-header {
  background: #292c35;
  border: 0;
  border-bottom: 1px solid #3d4250;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 12px;
  min-height: 0;
  padding: 0 16px;
  position: relative;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-heading
  h2 {
  color: #f6f7fa;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}
.short-comment-sheet .short-comment-heading h2 > span:first-child {
  flex-shrink: 0;
  font-weight: 400;
}
.short-comment-sheet .short-comment-heading .short-comment-heading-count {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
}
.short-comment-sheet .short-comment-heading .short-comment-heading-separator {
  color: #929aaa;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
}
.short-comment-sheet .short-comment-heading .short-comment-heading-invitation {
  color: #b6bdcb;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-header
  > button {
  z-index: 1;
  color: #c4cad5;
  width: 36px;
  height: 36px;
  box-shadow: none;
  background: #2f333e;
  border: 1px solid #414755;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-header
  > button
  svg {
  width: 18px;
  height: 18px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-header
  > button:hover {
  background: #343b48;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-header
  > button:active {
  transform: translateY(-50%) scale(0.94);
}
:root[data-theme] .short-comment-sheet.short-comment-sheet .short-comment-list {
  scrollbar-color: #656d80 transparent;
  overscroll-behavior: contain;
  background: #202229;
  gap: 0;
  padding: 0 16px 12px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-list::-webkit-scrollbar-thumb {
  background: #656d80;
}
:root[data-theme] .short-comment-sheet.short-comment-sheet .short-comment-item {
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-bottom: 1px solid #383d49;
  border-radius: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-avatar {
  color: #fff;
  background: var(--short-comment-avatar-color, #d9304f);
  width: 36px;
  height: 36px;
  box-shadow: none;
  font-size: 12px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-author
  > strong {
  color: #d5d9e3;
  font-size: 12px;
  font-weight: 600;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-author
  > time {
  color: #adb4c3;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-body
  > p {
  color: #f6f7fa;
  margin: 3px 0;
  font-size: 14px;
  line-height: 1.55;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-body
  > footer {
  color: #b6bdcb;
  min-height: 16px;
}
.short-comment-sheet .short-comment-body > footer .short-comment-reply {
  color: #c0c7d5;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  line-height: 20px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-replies-toggle {
  color: #c1c7d4;
  min-height: 24px;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
}
.short-comment-sheet .short-comment-replies {
  border-left: 1px solid #484e5e;
  margin-left: 48px;
  padding-left: 10px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-replies
  .short-comment-item {
  border-bottom: 0;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 0;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-replies
  .short-comment-avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.short-comment-sheet .short-comment-reply-to {
  color: #bfc6d6;
  font-size: 12px;
}
.short-comment-sheet .short-comment-reply-target {
  color: #c0c7d5;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}
.short-comment-reply-target span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-reply-target
  button {
  color: #b9bbc3;
  min-width: 0;
  min-height: 24px;
  box-shadow: none;
  text-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  flex-shrink: 0;
  padding: 3px 0 3px 8px;
  font-size: 12px;
  font-weight: 400;
}
.short-comment-sheet .short-comment-author .short-comment-likes {
  color: #b6bdcb;
  min-height: 20px;
  box-shadow: none;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 0 0 0 8px;
  font-size: 11px;
  display: flex;
}
.short-comment-sheet .short-comment-author .short-comment-likes svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  width: 17px;
  height: 17px;
}
.short-comment-sheet .short-comment-author .short-comment-likes.active {
  color: #ff7897;
}
.short-comment-sheet .short-comment-author .short-comment-likes.active svg {
  fill: currentColor;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-composer {
  min-height: 0;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #292c35;
  border: 0;
  border-top: 1px solid #484e5e;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  position: static;
}
.short-comment-sheet .short-comment-self-avatar {
  display: none;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-editor {
  box-shadow: none;
  background: #373d4a;
  border: 1px solid #596174;
  border-radius: 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 14px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-editor:focus-within {
  background: #373d4a;
  border-color: #ff89a2;
  box-shadow: 0 0 0 2px #ff89a229;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-editor
  textarea {
  color: #f6f7fa;
  background: 0 0;
  font-size: 16px;
  font-weight: 400;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-editor
  textarea::placeholder {
  color: #c1c7d4;
  font-size: 14px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-editor
  button {
  color: #fff;
  box-shadow: none;
  background: #df2851;
  border: 0;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-editor
  button:disabled {
  color: #bbc3d2;
  opacity: 1;
  background: #454d5e;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-composer-hint {
  color: #b6bdcb;
}
:root[data-theme] .short-comment-sheet.short-comment-sheet .short-comment-more {
  color: #c1c7d4;
  box-shadow: none;
  background: #303641;
  border-color: #596174;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-empty {
  min-height: 0;
  padding: 24px 12px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-empty
  > span {
  color: #ffd2dc;
  width: 44px;
  height: 44px;
  box-shadow: none;
  background: #38313e;
  border: 1px solid #615064;
  margin-bottom: 9px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-empty
  strong {
  color: #f0f2f7;
  font-size: 14px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-empty
  p {
  color: #b6bdcb;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-skeletons
  > div {
  background: 0 0;
  border: 0;
  border-radius: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 76px;
  padding: 12px 0;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-skeletons
  :is(i, b) {
  background: linear-gradient(90deg, #292b33, #34363e, #292b33) 0 0/240% 100%;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-error {
  color: #f0b1be;
  background: #35242c;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  .short-comment-success {
  color: #a5d8ba;
  background: #22312a;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet
  :is(
    .short-comment-header > button,
    .short-comment-reply,
    .short-comment-likes,
    .short-comment-more,
    .short-comment-replies-toggle
  ):focus-visible {
  outline-offset: 3px;
  outline: 2px solid #ff89a2;
}
.short-comments-enter-active,
.short-comments-leave-active {
  transition: transform 0.25s;
}
:root[data-theme] .short-comment-sheet.short-comment-sheet--keyboard > section {
  grid-template-rows: 16px 40px minmax(0, 1fr) auto;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet--keyboard
  .short-comment-grabber {
  height: 16px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet--keyboard
  .short-comment-header
  > button {
  width: 36px;
  height: 36px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet--keyboard
  .short-comment-composer {
  padding: 6px 12px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet--keyboard
  .short-comment-editor {
  padding: 2px 4px 2px 10px;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet--keyboard
  .short-comment-editor
  button {
  min-height: 36px;
  padding: 6px 12px;
}
.short-comment-sheet--keyboard .short-comment-composer-hint {
  display: none;
}
:root[data-theme]
  .short-comment-sheet.short-comment-sheet.short-comments-enter-from,
:root[data-theme]
  .short-comment-sheet.short-comment-sheet.short-comments-leave-to {
  transform: translateY(100%);
}
@media (prefers-reduced-motion: reduce) {
  .short-card > :is(.hls-video-frame, img),
  .short-comments-enter-active,
  .short-comments-leave-active {
    transition: none;
  }
}
/*
 * iOS standalone/Web Clip can report a visualViewport that stops above the
 * home-indicator safe area. The composer already includes that safe-area as
 * padding, so letting the calculated overlay height stop there leaves a
 * second, empty strip below the sheet. Keep keyboard geometry dynamic, but
 * pin the normal mobile sheet to the actual viewport edge.
 */
@media (width<=719px) {
  .short-comment-sheet.short-comment-sheet:not(
      .short-comment-sheet--keyboard
    ) {
    bottom: 0 !important;
    height: auto !important;
  }
}
:root {
  --page-gutter: var(--home-content-inset, 12px);
}
:root .app-shell > main:not(.home-page):not(.shorts-page):not(.creator-page) {
  padding-inline: var(--page-gutter);
}
@media (width<=1023px) {
  :root .app-shell > main:not(.shorts-page) {
    width: 100%;
    max-width: none;
  }
}
:root .app-shell > main.creator-page.page-with-nav {
  padding-inline: 0;
}
:root
  .creator-page
  :is(.creator-nav, .creator-hero, .creator-works, .creator-published-content) {
  padding-inline: var(--page-gutter);
}
:root .creator-page :is(.creator-metrics, .creator-content-tabs) {
  margin-inline: var(--page-gutter);
}
:root .creator-page .creator-works > header {
  padding-inline: 0;
}
:root .creator-page > .ad-slot-group {
  width: calc(100% - var(--page-gutter) * 2);
  margin-inline: var(--page-gutter);
}
:root .download-page > .download-hero {
  margin-inline: 0;
}
:root .feature-page .benefit-directory-header {
  margin-inline: calc(var(--page-gutter) * -1);
  padding-inline: var(--page-gutter);
}
:root {
  --video-card-column-gap: var(--home-content-gap, 6px);
}
:root .catalog-page .catalog-poster-grid,
:root .detail-page .detail-recommendation-grid,
:root .history-page :is(.poster-grid, .catalog-poster-grid),
:root .home-page .poster-grid,
:root .profile-page .mine-media-row {
  -moz-column-gap: var(--video-card-column-gap);
  column-gap: var(--video-card-column-gap);
}
:root :is(.history-page, .profile-page) .article-compact-row {
  padding-top: calc(var(--video-card-column-gap) / 2);
  padding-bottom: calc(var(--video-card-column-gap) / 2);
}
:root
  :is(.history-page, .profile-page)
  .article-compact-row
  .article-ranking-entry {
  -moz-column-gap: var(--video-card-column-gap);
  column-gap: var(--video-card-column-gap);
}
:root
  :is(.home-page, .catalog-page, .history-page, .detail-page)
  :is(.poster-grid, .catalog-poster-grid, .detail-recommendation-grid) {
  --poster-layout-gap: var(--video-card-column-gap, 8px);
  row-gap: var(--video-card-column-gap, 8px);
}
:root
  :is(.home-page, .catalog-page, .history-page, .detail-page)
  .video-layout-grid[data-cover-layout="mixed"] {
  row-gap: 0;
}
:root {
  --home-content-inset: 12px;
  --home-content-gap: 6px;
}
:root .home-page {
  --home-gutter: var(--home-content-inset);
  --video-card-column-gap: var(--home-content-gap);
  --home-card-radius: 6px;
}
:root .home-page .poster-wrap {
  border-radius: var(--home-card-radius);
}
:root .app-shell .home-page .ad-slot-group:is(.ad-slot-grid, .ad-slot-banner) {
  gap: var(--home-content-gap);
}
:root .app-shell .home-page .ad-slot-group > .ad-item {
  border-radius: var(--home-card-radius);
}
:root .app-shell .home-page :is(.home-hero-stack, .ad-slot-hero) {
  box-shadow: none;
  border: 0;
}
:root .app-shell .home-page .ad-slot-group.ad-slot-hero > .hero-ad-item {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  box-shadow: none;
  border: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  display: block;
  transform: none;
}
:root
  .app-shell
  .home-page
  .home-hero-stack:has(> .ad-slot-hero):not(:has(> .ad-slot-grid)) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
:root
  .app-shell
  > main:not(.shorts-page)
  :is(
    .poster-grid,
    .catalog-poster-grid,
    .catalog-skeleton,
    .detail-recommendation-grid,
    .ranking-grid,
    .creator-work-grid
  ) {
  --poster-layout-gap: var(--video-card-column-gap);
  -moz-column-gap: var(--video-card-column-gap);
  column-gap: var(--video-card-column-gap);
  row-gap: var(--video-card-column-gap);
}
:root
  .app-shell
  > main:not(.shorts-page)
  .video-layout-grid[data-cover-layout="mixed"] {
  row-gap: 0;
}
:root
  .app-shell
  > main.article-page:not(.shorts-page)
  :is(.article-list, .article-grid, .ad-slot-article-detail),
:root
  .app-shell
  > main:not(.shorts-page)
  :is(
    .article-list,
    .article-grid,
    .ad-slot-article-detail,
    .directory-layout,
    .directory-items,
    .mine-feature-grid,
    .mine-media-rows,
    .mine-following-row,
    .community-comment-feed,
    .community-feed-skeleton,
    .community-image-gallery,
    .creator-post-list,
    .creator-article-list,
    .notification-list,
    .points-earning-grid,
    .vip-plan-grid,
    .plans-grid,
    .reward-product-grid,
    .lottery-grid,
    .partner-benefit-grid,
    .benefit-hot-grid,
    .benefit-recommend-list,
    .task-list
  ),
:root
  .app-shell
  > main:not(.shorts-page)
  .ad-slot-group:is(.ad-slot-grid, .ad-slot-banner, .ad-slot-inline) {
  gap: var(--home-content-gap);
}
:root .app-shell > main.article-page .article-ranking > ol {
  -moz-column-gap: var(--home-content-gap);
  column-gap: var(--home-content-gap);
}
:root .app-shell > main.home-ranking-page .ranking-grid {
  gap: var(--home-content-gap);
}
:root .app-shell > main.security-page > .security-card {
  margin-bottom: var(--home-content-gap);
}
:root .profile-page .mine-media-rows {
  gap: var(--home-content-gap);
  min-width: 0;
  display: grid;
}
:root .profile-page .mine-media-rows > .mine-media-row {
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  min-width: 0;
}
:root .profile-page .mine-media-rows .video-card {
  scroll-snap-align: start;
}
:root
  .profile-page
  .mine-media-rows
  > .mine-media-row[data-cover-layout="landscape"]
  .video-card-landscape {
  width: calc(40% - var(--video-card-column-gap, 8px) * 2 / 2.5);
}
:root .detail-page .player-shell.player-portrait > .pause-ad-card,
:root .shorts-page .short-card > .pause-ad-card {
  top: max(
    88px,
    calc(var(--video-cms-safe-top, env(safe-area-inset-top, 0px)) + 80px)
  );
  right: max(
    12px,
    var(--video-cms-safe-right, env(safe-area-inset-right, 0px))
  );
  width: clamp(180px, 52%, 280px);
  max-width: calc(100% - 24px);
}
:root
  .detail-page.detail-page-drama
  :is(
    .detail-stage,
    .detail-hero,
    .detail-flow > .detail-section,
    .detail-comment-list,
    .detail-actions
  ) {
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
}
:root
  .detail-page.detail-page-drama
  :is(.detail-stage, .detail-hero, .detail-flow > .detail-section) {
  padding-inline: 0;
}
:root .detail-page.detail-page-drama .detail-actions button,
:root .detail-page.detail-page-drama .detail-comment-form button,
:root .detail-page.detail-page-drama .episode-list button {
  box-shadow: none;
  border: 0;
}
:root .detail-page.detail-page-drama .detail-ad-bridge {
  border: 0;
}
:root .detail-page.detail-page-drama .detail-playback-group {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: 12px;
  min-width: 0;
  padding: 12px;
  overflow: visible;
}
:root .detail-page.detail-page-drama .detail-playback-group > .detail-stage {
  margin: 0;
  padding: 0;
}
:root .detail-page.detail-page-drama .detail-playback-group > .episode-section {
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 12px 0 0;
}
:root .detail-page.detail-page-standard .detail-playback-group {
  padding: 0;
}
:root
  .detail-page-standard
  .detail-playback-group
  > .player-shell:not(.is-player-fallback-fullscreen):not(:fullscreen) {
  aspect-ratio: 16/9;
  background: #000;
  border: 0;
  border-radius: 11px 11px 0 0;
  width: 100%;
  min-height: 0;
  margin: 0;
}
:root
  .detail-page-standard
  .detail-playback-group
  > .player-shell:has(> .hls-video-frame):not(
    .is-player-fallback-fullscreen
  ):not(:fullscreen) {
  aspect-ratio: auto;
}
:root
  .detail-page-standard
  .detail-playback-group
  > .player-shell
  > .player-placeholder {
  min-height: 100%;
}
:root
  .detail-page.detail-page-standard
  .detail-playback-group
  > .detail-stage-standard {
  padding: 12px;
}
:root
  .detail-page.detail-page-standard
  .detail-playback-group
  > .episode-section {
  padding: 0 12px 12px;
}
:root .detail-page-standard .detail-playback-group .detail-hero {
  padding-block: 0;
}
:root
  .detail-page.detail-page-drama
  .detail-flow
  > .detail-section.detail-recommendations {
  margin-block: 0;
  padding-block: 0;
}
:root
  .detail-page.detail-page-drama
  .detail-flow
  > .detail-section.detail-comments {
  margin-top: 0;
  padding-top: 0;
}
@media (width>=1024px) {
  :root .app-shell .ad-slot-group:not(.ad-slot-hero) .ad-item > img,
  :root .app-shell .article-page .article-ad-card .article-card-image > img,
  :root .app-shell .pause-ad-card .pause-ad-link > img,
  :root .app-shell :is(.benefit-ad-icon, .benefit-list-icon) > img {
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
  }
  :root .app-shell .ad-slot-group.ad-slot-banner .ad-item:has(> img) {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
  }
  :root .app-shell .ad-slot-group.ad-slot-banner .ad-item > img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    position: static;
    inset: auto;
  }
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"])
    > .ad-item:has(> img) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  :is(
    :root
      .app-shell
      .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
        > .ad-item:nth-child(2)
      )
      > .ad-item
      > img,
    :root
      .app-shell
      .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"])
      > .ad-item
      > img
  ) {
    aspect-ratio: auto;
    -o-object-fit: contain;
    object-fit: contain;
    flex: none;
    width: 100%;
    height: auto;
    max-height: none;
  }
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid:not([data-ad-slot$="home_quick_links"]):has(
      > .ad-item:nth-child(2)
    )
    > .ad-item
    > img {
    aspect-ratio: auto;
    -o-object-fit: contain;
    object-fit: contain;
  }
  :root
    .app-shell
    .article-page
    .article-ad-card
    .article-card-image:has(> img) {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
  }
  :root .app-shell .article-page .article-ad-card .article-card-image > img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    display: block;
    position: static;
    inset: auto;
  }
  :root .app-shell .pause-ad-card .pause-ad-link > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
}
@media (width<=1023px) {
  :root .app-shell .ad-slot-group.ad-slot-banner .ad-item:has(> img) {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
  }
  :root .app-shell .ad-slot-group.ad-slot-banner .ad-item > img {
    aspect-ratio: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    position: static;
    inset: auto;
  }
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid.ad-slot-single-banner:not(
    [data-ad-slot$="home_quick_links"]
  ):has(> .ad-item:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
:root
  .app-shell
  .ad-slot-group.ad-slot-grid.ad-slot-single-banner
  > .ad-item:has(> img) {
  width: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  display: block;
}
:root .app-shell .ad-slot-group.ad-slot-single-banner .ad-copy,
:root .app-shell .ad-slot-group.ad-slot-single-banner .ad-item > b {
  display: none;
}
@media (width<=1023px) {
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid.ad-slot-single-banner
    > .ad-item:has(> img) {
    height: var(--banner-ad-height);
    aspect-ratio: auto;
  }
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid.ad-slot-single-banner
    > .ad-item
    > img {
    aspect-ratio: auto;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
}
@media (width>=1024px) {
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid.ad-slot-single-banner
    > .ad-item:has(> img) {
    aspect-ratio: auto;
    height: auto;
  }
  :root
    .app-shell
    .ad-slot-group.ad-slot-grid.ad-slot-single-banner
    > .ad-item
    > img {
    aspect-ratio: auto;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: auto;
    display: block;
    position: static;
    inset: auto;
  }
  :root .app-shell .global-ad-bar .ad-slot-bar.ad-slot-image-bar .ad-item {
    height: 80px;
    min-height: 80px;
  }
  :root
    .app-shell:not(.is-immersive):has(.global-ad-bar):has(.ad-slot-image-bar) {
    --bottom-promotion-bar-space: calc(90px + var(--bottom-promotion-gap));
  }
}
@media (width<=1023px) {
  :root .app-shell .global-ad-bar .ad-slot-bar .ad-item > img {
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
  }
}
:root img[data-image-placeholder] {
  background-color: #f1f3f5 !important;
  background-image: var(--image-placeholder-logo, none) !important;
  color: #0000 !important;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  font-size: 0 !important;
}
.brand-wide-logo[data-v-70335162] {
  display: none;
}
@media (width>=720px) {
  .brand.brand-has-wide > .brand-compact-only[data-v-70335162] {
    display: none;
  }
  .brand .brand-wide-logo[data-v-70335162] {
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
    max-width: 180px;
    height: 34px;
    box-shadow: none;
    background: 0 0;
    border: 0;
    border-radius: 0;
    flex: none;
    display: block;
  }
}
.startup-brand[data-v-7e0388e8] {
  width: 64px;
  min-width: 0;
  min-height: 64px;
  color: inherit;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}
.startup-brand .startup-brand-icon[data-v-7e0388e8],
.startup-brand-mark[data-v-7e0388e8] {
  -o-object-fit: contain;
  object-fit: contain;
  flex: none;
  width: 64px;
  height: 64px;
  display: block;
}
.startup-brand .startup-brand-icon[data-v-7e0388e8] {
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 0;
}
.startup-brand-mark[data-v-7e0388e8] {
  background: var(--accent, #ff3158);
  border-radius: 16px;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
  display: grid;
}
.splash-creative[data-v-9dcc59e6]:not(.is-ready) {
  cursor: default;
  min-height: min(55dvh, 460px);
}
.splash-creative[data-v-9dcc59e6]:disabled {
  opacity: 1;
}
.splash-asset[data-v-9dcc59e6] {
  opacity: 0;
  transition: opacity 0.25s;
}
.splash-creative.is-ready .splash-asset[data-v-9dcc59e6] {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .splash-asset[data-v-9dcc59e6] {
    transition: none;
  }
}
.splash-ad.is-native-apk-splash[data-v-9dcc59e6] {
  padding: 0;
  display: flex;
  overflow: hidden;
}
.is-native-apk-splash .splash-panel[data-v-9dcc59e6] {
  width: 100%;
  height: 100dvh;
  max-height: none;
  padding: max(28px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    max(24px, var(--video-cms-safe-right, env(safe-area-inset-right, 0px)))
    max(30px, env(safe-area-inset-bottom))
    max(24px, var(--video-cms-safe-left, env(safe-area-inset-left, 0px)));
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
.is-native-apk-splash .splash-skip[data-v-9dcc59e6] {
  top: max(20px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)));
  right: max(
    18px,
    var(--video-cms-safe-right, env(safe-area-inset-right, 0px))
  );
}
.is-native-apk-splash .splash-creative[data-v-9dcc59e6] {
  margin: auto 0;
}
.popup-ad-layer[data-v-cf010277] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s;
}
.popup-ad-layer.is-visible[data-v-cf010277] {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .popup-ad-layer[data-v-cf010277] {
    transition: none;
  }
}
.social-platform-icon[data-v-054fd997] {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
}
.global-floating-ad[data-v-8e0d2841] {
  --floating-ad-top: max(
    160px,
    calc(140px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
  );
  top: var(--floating-ad-top);
}
.global-floating-ad[data-v-8e0d2841] .ad-slot-floating {
  max-height: calc(
    100dvh - var(--floating-ad-top) - 144px - env(safe-area-inset-bottom)
  );
  overscroll-behavior: contain;
  scrollbar-width: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  display: grid;
  overflow: hidden auto;
}
.global-floating-ad[data-v-8e0d2841] .ad-slot-floating::-webkit-scrollbar {
  display: none;
}
@media (width<=719px) {
  .global-floating-ad[data-v-8e0d2841] {
    --floating-ad-top: max(
      122px,
      calc(107px + var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    );
  }
}
.app-download-icon > img[data-v-b542577a] {
  border-radius: inherit;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}
.account-auth-layer[data-v-a1d751aa] {
  padding: max(16px, var(--video-cms-safe-top, env(safe-area-inset-top, 0px)))
    max(16px, var(--video-cms-safe-right, env(safe-area-inset-right, 0px)))
    max(16px, env(safe-area-inset-bottom))
    max(16px, var(--video-cms-safe-left, env(safe-area-inset-left, 0px)));
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}
.mine-form-card.mine-auth-card[data-v-a1d751aa] {
  --auth-welcome-bg: #fff6f8;
  --auth-art: #e6b5c1;
  --auth-field-line: #b8bec9;
  width: min(100%, 440px);
  max-height: calc(
    100dvh - 32px - var(--video-cms-safe-top, env(safe-area-inset-top, 0px)) -
      env(safe-area-inset-bottom)
  );
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: 24px;
  outline: none;
  padding: 0;
  display: block;
  overflow: auto;
  box-shadow: 0 24px 80px #0000003d;
}
:root[data-theme="dark"] .mine-auth-card[data-v-a1d751aa] {
  --auth-action-start: #c82349;
  --auth-action-end: #c22b5d;
  --auth-action-text: #fff;
  --auth-welcome-bg: #241e2a;
  --auth-art: #715568;
  --auth-field-line: #606b7b;
}
.mine-auth-card.auth-green[data-v-a1d751aa] {
  --auth-action-start: #13775a;
  --auth-action-end: #10654e;
  --auth-focus: #0f7058;
  --auth-focus-ring: #0f70582e;
  --auth-welcome-bg: #edf8f3;
  --auth-art: #a6caba;
}
:root[data-theme="dark"] .mine-auth-card.auth-green[data-v-a1d751aa] {
  --auth-action-start: #13775a;
  --auth-action-end: #10654e;
  --auth-action-text: #fff;
  --auth-welcome-bg: #172b25;
  --auth-art: #487563;
  --auth-focus: #74d7b4;
  --auth-focus-ring: #74d7b429;
}
.mine-auth-card .auth-welcome[data-v-a1d751aa] {
  isolation: isolate;
  background: linear-gradient(
    115deg,
    var(--auth-welcome-bg),
    var(--surface-raised) 80%
  );
  margin: 0;
  padding: 26px 26px 24px;
  display: block;
  position: relative;
  overflow: hidden;
}
.auth-welcome-copy[data-v-a1d751aa] {
  z-index: 1;
  max-width: 310px;
  position: relative;
}
.mine-auth-card .auth-welcome-copy[data-v-a1d751aa] {
  display: block;
}
.auth-eyebrow[data-v-a1d751aa] {
  color: var(--auth-help-text);
  letter-spacing: 0.04em;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
}
.auth-eyebrow svg[data-v-a1d751aa] {
  width: 17px;
  height: 17px;
  color: var(--auth-focus);
}
.auth-welcome h2[data-v-a1d751aa] {
  letter-spacing: -0.035em;
  margin: 15px 0 7px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}
.auth-welcome p[data-v-a1d751aa] {
  color: var(--auth-help-text);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
.mine-auth-card .auth-close[data-v-a1d751aa] {
  z-index: 2;
  border: 1px solid var(--line);
  width: 40px;
  height: 40px;
  color: var(--auth-control-text);
  background: var(--surface-raised);
  cursor: pointer;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  top: 13px;
  right: 13px;
}
.auth-close svg[data-v-a1d751aa] {
  width: 17px;
  height: 17px;
}
.auth-film-decoration[data-v-a1d751aa] {
  z-index: 0;
  width: 100px;
  color: var(--auth-art);
  opacity: 0.36;
  pointer-events: none;
  position: absolute;
  bottom: -22px;
  right: 5px;
  transform: rotate(13deg);
}
.auth-film-decoration svg[data-v-a1d751aa] {
  stroke-width: 1.1px;
  width: 100%;
  height: auto;
}
.auth-card-body[data-v-a1d751aa] {
  gap: 16px;
  padding: 0 26px 22px;
  display: grid;
}
.mine-auth-card .account-tabs[data-v-a1d751aa] {
  border: 1px solid var(--line);
  background: var(--auth-tabs-bg);
  border-radius: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  display: grid;
}
.mine-auth-card .account-tabs button[data-v-a1d751aa] {
  min-height: 38px;
  color: var(--auth-control-text);
  cursor: pointer;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}
.mine-auth-card .account-tabs button.active[data-v-a1d751aa] {
  color: var(--text);
  background: var(--surface-raised);
  font-weight: 650;
  box-shadow: 0 2px 6px #0f141e12;
}
.auth-fields[data-v-a1d751aa] {
  gap: 15px;
  display: grid;
}
.auth-field[data-v-a1d751aa] {
  gap: 7px;
  min-width: 0;
  display: grid;
}
.auth-field > span[data-v-a1d751aa] {
  color: var(--auth-control-text);
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}
.auth-field small[data-v-a1d751aa] {
  color: var(--auth-help-text);
  font-size: 10px;
  font-weight: 400;
}
.auth-input-wrap[data-v-a1d751aa] {
  border: 1px solid var(--auth-field-line);
  background: var(--input-bg);
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  display: flex;
}
.auth-input-wrap > svg[data-v-a1d751aa] {
  width: 18px;
  height: 18px;
  color: var(--auth-placeholder);
  flex: 0 0 18px;
}
.auth-input-wrap input[data-v-a1d751aa] {
  width: 100%;
  min-width: 0;
  height: 100%;
  color: var(--text);
  background: 0 0;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.auth-input-wrap input[data-v-a1d751aa]::placeholder {
  color: var(--auth-placeholder);
  opacity: 1;
}
.auth-input-wrap[data-v-a1d751aa]:focus-within {
  border-color: var(--auth-focus);
  box-shadow: 0 0 0 3px var(--auth-focus-ring);
}
.auth-input-wrap input[data-v-a1d751aa]:focus-visible {
  outline: none;
}
.auth-input-wrap input[data-v-a1d751aa]:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
}
.auth-password-toggle[data-v-a1d751aa] {
  height: 40px;
  color: var(--auth-control-text);
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 7px;
  flex: 0 0 36px;
  place-items: center;
  margin-right: -6px;
  padding: 0;
  display: grid;
}
.auth-password-toggle svg[data-v-a1d751aa] {
  width: 18px;
  height: 18px;
}
.auth-optional-fields[data-v-a1d751aa] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}
.auth-optional-fields .auth-input-wrap[data-v-a1d751aa] {
  gap: 7px;
  padding-inline: 10px;
}
.auth-optional-fields input[data-v-a1d751aa] {
  font-size: 16px;
}
.auth-input-locked[data-v-a1d751aa] {
  background: var(--auth-tabs-bg);
}
.mine-auth-card .mine-invite-lock-note[data-v-a1d751aa] {
  color: var(--auth-help-text);
  align-items: center;
  gap: 5px;
  margin: -5px 0 0;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
}
.mine-invite-lock-note svg[data-v-a1d751aa] {
  width: 14px;
  height: 14px;
  color: var(--auth-focus);
}
.mine-auth-card .mine-forgot-password[data-v-a1d751aa] {
  color: var(--auth-help-text);
  justify-self: end;
  margin: -6px 0 -2px;
  font-size: 12px;
  font-weight: 400;
}
.mine-auth-card .auth-error[data-v-a1d751aa] {
  border: 1px solid var(--auth-error-border);
  background: var(--auth-error-bg);
  color: var(--auth-error-text);
  border-radius: 10px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}
.auth-error svg[data-v-a1d751aa] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.mine-auth-card .auth-submit[data-v-a1d751aa] {
  width: 100%;
  height: 48px;
  color: var(--auth-action-text);
  background: linear-gradient(
    105deg,
    var(--auth-action-start),
    var(--auth-action-end)
  );
  box-shadow: 0 7px 18px var(--auth-focus-ring);
  cursor: pointer;
  border: 0;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 650;
  display: flex;
}
.auth-submit svg[data-v-a1d751aa] {
  width: 18px;
  height: 18px;
}
.auth-quick-entry[data-v-a1d751aa] {
  gap: 10px;
  display: grid;
}
.mine-auth-card .mine-register-divider[data-v-a1d751aa] {
  color: var(--auth-help-text);
  font-size: 11px;
}
.auth-quick-entry > button[data-v-a1d751aa] {
  border: 1px solid var(--auth-field-line);
  background: var(--surface-raised);
  height: 43px;
  color: var(--text);
  cursor: pointer;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}
.auth-quick-entry > button svg[data-v-a1d751aa] {
  width: 16px;
  height: 16px;
  color: var(--auth-focus);
}
.auth-quick-entry > small[data-v-a1d751aa] {
  text-align: center;
  line-height: 1.5;
}
.auth-local-note[data-v-a1d751aa],
.auth-quick-entry > small[data-v-a1d751aa] {
  color: var(--auth-help-text);
  font-size: 11px;
}
.auth-local-note[data-v-a1d751aa] {
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  display: flex;
}
.auth-local-note svg[data-v-a1d751aa] {
  width: 14px;
  height: 14px;
}
.mine-auth-card svg[data-v-a1d751aa] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mine-auth-card[data-v-a1d751aa] :is(button, a):focus-visible {
  outline: 3px solid var(--auth-focus);
  outline-offset: 2px;
}
.mine-auth-card button[data-v-a1d751aa]:disabled {
  cursor: wait;
}
.mine-auth-card .auth-submit[data-v-a1d751aa]:disabled {
  background: var(--auth-disabled-bg);
  color: var(--auth-disabled-text);
  opacity: 1;
  box-shadow: none;
}
.auth-spinner[data-v-a1d751aa] {
  border: 2px solid;
  border-right-color: #0000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: 0.75s linear infinite auth-spin-a1d751aa;
}
@keyframes auth-spin-a1d751aa {
  to {
    transform: rotate(1turn);
  }
}
@media (width<=480px) {
  .mine-form-card.mine-auth-card[data-v-a1d751aa] {
    border-radius: 22px;
  }
  .mine-auth-card .auth-welcome[data-v-a1d751aa] {
    padding: 24px 20px 21px;
  }
  .auth-welcome h2[data-v-a1d751aa] {
    font-size: 24px;
  }
  .auth-card-body[data-v-a1d751aa] {
    gap: 15px;
    padding: 0 20px 20px;
  }
  .auth-fields[data-v-a1d751aa] {
    gap: 13px;
  }
  .auth-film-decoration[data-v-a1d751aa] {
    width: 90px;
    right: -8px;
  }
}
@media (width<=360px) {
  .auth-optional-fields[data-v-a1d751aa] {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-optional-fields .auth-input-wrap[data-v-a1d751aa] {
    padding-inline: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-input-wrap[data-v-a1d751aa] {
    transition: none;
  }
  .auth-spinner[data-v-a1d751aa] {
    animation: none;
  }
}
.global-account-layer[data-v-d5aabd80],
.generated-account-layer {
  z-index: 2147483500;
}

/* Keep the mobile/PWA navigation pinned after VisualViewport keyboard events. */
@media (width<=1199px) {
  :root .bottom-nav {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px) !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
  html[data-standalone="true"] .bottom-nav {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}