:root {
  --bg: #161823;
  --panel: #161823;
  --panel-2: #202431;
  --panel-3: #2b2f3b;
  --text: rgba(255, 255, 255, 0.92);
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.46);
  --hairline: rgba(255, 255, 255, 0.08);
  --accent: #ff2b55;
  --accent-2: #20f1e9;
  --radius: 12px;
  --sidebar: 160px;
  --topbar: 56px;
  --nav-sprite: url("./assets/nav_dark_entry_optimize_v6.png");
  --app-card-bg: url("./assets/jxBtnBg.png");
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

body {
  min-width: 1120px;
  height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  color: inherit;
}

a {
  text-decoration: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar);
  padding: 0 0 0 16px;
  background: #161823;
  border-right: 1px solid rgba(255, 255, 255, 0.02);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.brand {
  display: block;
  height: var(--topbar);
  margin-left: -12px;
  margin-top: -5px;
  background-image: url("./assets/logo-jx-horizontal-dark.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #061014;
  font-weight: 900;
  line-height: 1;
  background:
    linear-gradient(135deg, var(--accent-2), transparent 46%),
    linear-gradient(315deg, var(--accent), transparent 48%),
    #f7ffff;
  border-radius: 8px;
  box-shadow: 2px 0 0 rgba(255, 43, 85, 0.8), -2px 0 0 rgba(32, 241, 233, 0.7);
}

.brand-mark.small {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 13px;
}

.nav-groups {
  padding-top: 1px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 128px;
  height: 40px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nav-item > span:not(.nav-icon):not(.refresh-icon) {
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
}

.nav-item.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.nav-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.nav-sprite {
  background-image: var(--nav-sprite);
  background-position: var(--icon-x) 0;
  background-repeat: no-repeat;
  background-size: 1152px auto;
}

.nav-item.has-dot::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 17px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 999px;
}


.nav-separator {
  width: 112px;
  height: 1px;
  margin: 12px 8px;
  background: var(--hairline);
}

.app-card {
  position: fixed;
  left: 16px;
  bottom: 76px;
  z-index: 35;
  width: 128px;
  height: 123px;
  margin: 0;
  padding: 12px 12px 0;
  overflow: visible;
  background-image: var(--app-card-bg);
  background-size: 128px 123px;
  background-repeat: no-repeat;
  background-position: 0 0;
  border: 0;
  border-radius: 12px;
}

.sidebar-footer {
  width: 128px;
  margin: 380px 0 86px 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 16px;
}

.sidebar-footer p {
  margin: 0 0 4px;
}

.sidebar-footer p.sep {
  height: 8px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 16px;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.mini-logo {
  width: 22px;
  height: 22px;
  background-image: url("./assets/logo-jx-horizontal-dark.svg");
  background-position: 0 0;
  background-size: auto 22px;
  background-repeat: no-repeat;
  border-radius: 6px;
}

.app-card p {
  margin: 0 0 11px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 21px;
}

.app-card button:not(.app-card-close) {
  height: 28px;
  min-width: 71px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  color: #000;
  background: #00f3e9;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-tools {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 36;
  display: grid;
  grid-template-columns: repeat(4, 32px);
  gap: 0;
  width: 160px;
  height: 60px;
  padding: 14px 0 0 12px;
  background: #161823;
}

.sidebar-tools button,
.tab-scroll button,
.floating-tool {
  border: 0;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.sidebar-tools button {
  position: relative;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
}

.sidebar-tools button:hover,
.sidebar-tools button.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-tools button[data-icon="feedback"]::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  background: #ff2c55;
  border-radius: 50%;
}

.shell {
  height: 100vh;
  margin-left: var(--sidebar);
  padding-top: var(--topbar);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.topbar {
  position: fixed;
  z-index: 15;
  top: 0;
  right: 0;
  left: var(--sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--topbar);
  background: #161823;
  backdrop-filter: blur(18px);
}

.search {
  position: absolute;
  left: 347px;
  top: 7px;
  display: flex;
  width: 476px;
  height: 42px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transform: none;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.search:hover,
.search:focus-within {
  background: rgba(22, 24, 35, 0.98);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.search:focus-within {
  border-radius: 12px;
}

.search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-weight: 500;
  caret-color: var(--accent);
}

.search input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.search button {
  width: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.search:hover button,
.search:focus-within button {
  color: #161823;
  background: #fff;
  border-left-color: rgba(255, 255, 255, 0.95);
}

.search-popover {
  position: absolute;
  left: 346px;
  top: 53px;
  z-index: 42;
  width: 482px;
  height: 422px;
  max-height: calc(100vh - 64px);
  padding: 24px 32px 26px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  background: #252632;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  transform: none;
}

.search-popover[hidden] {
  display: none;
}

.search-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-popover h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 18px;
  font-weight: 700;
}

.search-pop-head button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.swap-icon {
  position: relative;
  width: 18px;
  height: 18px;
}

.swap-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.suggest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 36px;
  margin-bottom: 26px;
}

.suggest-grid button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font-size: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.suggest-grid button.hot {
  color: #ff4265;
}

.hot-title {
  margin-top: 26px !important;
  margin-bottom: 22px !important;
}

.hot-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 600;
}

.hot-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hot-list b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: linear-gradient(135deg, #ffcf62, #ef8d65);
  border-radius: 7px;
  font-size: 14px;
}

.hot-list li:nth-child(3) b {
  background: linear-gradient(135deg, #eef0f7, #a8abb8);
}

.hot-list li:nth-child(4) b {
  background: linear-gradient(135deg, #ffd4c4, #c98872);
}

.hot-list li:nth-child(n+5) b {
  color: rgba(255, 255, 255, 0.64);
  background: transparent;
  font-size: 18px;
}

.trend-up {
  position: relative;
  width: 22px;
  height: 22px;
  color: #6f9cff;
}

.trend-up::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 4px;
  height: 13px;
  background: currentColor;
  border-radius: 999px;
}

.trend-up::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-top: 4px solid currentColor;
  border-left: 4px solid currentColor;
  transform: rotate(45deg);
}

.top-actions {
  position: absolute;
  right: 16px;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-link {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

.top-link.has-notice::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 12px;
  height: 12px;
  background: #ff4265;
  border-radius: 50%;
}

.top-link span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-left: 8px;
  padding: 0 16px;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.client-popover {
  position: absolute;
  right: 180px;
  top: 54px;
  z-index: 45;
  width: 280px;
  height: 216px;
  min-height: 216px;
  padding: 24px 16px 16px;
  background: #252632;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.client-popover::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: 280px;
  height: 156px;
  opacity: 1;
  background:
    radial-gradient(circle at 176px 43px, #77bcb8 0 12px, transparent 13px),
    radial-gradient(circle at 156px 106px, #7aa7bd 0 10px, transparent 11px),
    linear-gradient(#61536b, #61536b) 177px 47px / 58px 64px no-repeat,
    linear-gradient(#d279a7, #d279a7) 221px 89px / 36px 28px no-repeat,
    linear-gradient(#556270, #556270) 154px 83px / 76px 34px no-repeat;
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

.client-popover[hidden] {
  display: none;
}

.popover-close {
  position: absolute;
  right: 10px;
  top: 6px;
  z-index: 1;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.client-popover ul {
  display: grid;
  position: relative;
  z-index: 1;
  gap: 10px;
  margin: 4px 0 28px;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 18px;
}

.client-popover button:not(.popover-close) {
  position: relative;
  z-index: 1;
  width: 248px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
  font-weight: 800;
}

.category-row {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: flex-start;
  height: 52px;
  padding: 12px 30px 0 24px;
  background: #161823;
  backdrop-filter: blur(18px);
}

.tabs {
  display: flex;
  gap: 32px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.tab {
  position: relative;
  flex: 0 0 auto;
  height: 28px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.tab.is-active {
  color: var(--text);
  font-weight: 600;
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 20px;
  height: 3px;
  background: var(--accent);
  border-radius: 999px;
}

.tab-scroll {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

.tab-scroll button {
  position: relative;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  font-size: 0;
}

.tab-scroll button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.tab-scroll button[aria-label="向左"]::before {
  transform: translate(-38%, -50%) rotate(-135deg);
}

.tab-scroll button[aria-label="向右"]::before {
  transform: translate(-62%, -50%) rotate(45deg);
}

.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 16px;
  padding: 0 34px 60px 24px;
}

.video-card {
  width: 100%;
  min-height: 313px;
  cursor: pointer;
}

.thumb {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 304;
  overflow: hidden;
  background: #252936;
  border-radius: 10px;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.video-card:hover .thumb img {
  transform: scale(1.035);
}

.thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.58));
  pointer-events: none;
}

.metric,
.duration {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.metric {
  left: 10px;
}

.duration {
  right: 9px;
}

.title {
  display: -webkit-box;
  min-height: 24px;
  max-height: 48px;
  margin: 10px 0 8px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meta {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

[data-icon]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

[data-icon="search"] {
  width: 18px;
  height: 18px;
  --icon-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.875 1.5a6.375 6.375 0 1 0 3.642 11.608l3.063 3.063a1.125 1.125 0 0 0 1.59-1.591l-3.062-3.063A6.375 6.375 0 0 0 7.875 1.5zM3.75 7.875a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0z' fill='black'/%3E%3C/svg%3E");
}

[data-icon="download"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 18.75H6V17.25H18V18.75Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.25 13.1893V5H12.75V13.1893L15.9697 9.96967L17.0303 11.0303L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L6.96967 11.0303L8.03033 9.96967L11.25 13.1893Z' fill='black'/%3E%3C/svg%3E"); }
[data-icon="star"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.10335 4.79386C8.86882 4.64984 8.57425 4.64585 8.3359 4.78346C8.09755 4.92108 7.95372 5.17818 7.96117 5.4533L8.05873 9.05336L5.31808 11.3898C5.10864 11.5683 5.01381 11.8473 5.07104 12.1165C5.12826 12.3857 5.32833 12.6019 5.59229 12.6798L9.0463 13.6995L10.4215 17.028C10.5266 17.2824 10.7625 17.4588 11.0362 17.4875C11.3099 17.5163 11.5774 17.3929 11.7331 17.1659L13.3237 14.8471L16.4638 19.3577L17.6949 18.5007L14.6505 14.1276L17.3608 13.9168C17.6352 13.8954 17.8758 13.7255 17.9878 13.4741C18.0997 13.2226 18.065 12.9301 17.8972 12.7119L15.7022 9.85673L16.5462 6.35562C16.6107 6.08806 16.5234 5.80667 16.3189 5.62251C16.1144 5.43835 15.8254 5.38101 15.566 5.47312L12.1723 6.67838L9.10335 4.79386ZM9.56789 9.37117L9.49812 6.79649L11.693 8.14425C11.8862 8.26291 12.1227 8.28777 12.3364 8.21188L14.7635 7.34991L14.16 9.85382C14.1068 10.0743 14.1563 10.3069 14.2945 10.4867L15.8643 12.5286L13.2964 12.7284C13.0704 12.746 12.8644 12.8649 12.7361 13.0519L11.2792 15.1758L10.2957 12.7954C10.2091 12.5858 10.0324 12.4267 9.81491 12.3624L7.34469 11.6332L9.30473 9.96224C9.47729 9.81513 9.57403 9.59784 9.56789 9.37117Z' fill='black'/%3E%3C/svg%3E"); }
[data-icon="bell"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9998 4.50037C9.02034 4.50037 6.55167 6.81159 6.35561 9.78463L5.94855 15.9572H18.0507L17.6441 9.78506C17.4482 6.81184 14.9795 4.50037 11.9998 4.50037ZM7.85236 9.88334C7.99643 7.6987 9.81045 6.00037 11.9998 6.00037C14.1893 6.00037 16.0034 7.69888 16.1473 9.88365L16.4486 14.4572H7.55073L7.85236 9.88334Z' fill='black'/%3E%3Cpath d='M9.75056 19.1392H14.2506V17.6392H9.75056V19.1392Z' fill='black'/%3E%3C/svg%3E"); }
[data-icon="message"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.75 10.5001H11.25V12.0001H9.75V10.5001Z' fill='black'/%3E%3Cpath d='M13.4999 10.5003H14.9999V12.0003H13.4999V10.5003Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3751 4.5C8.44033 4.5 5.25069 7.68926 5.25008 11.6239L5.25008 11.625H6.00008L5.25008 11.6239C5.24846 12.6998 5.49149 13.7608 5.95925 14.727L5.01221 18.9879L9.27309 18.0408C10.2391 18.5085 11.2999 18.7515 12.3756 18.75C16.3105 18.7497 19.5001 15.5599 19.5001 11.625C19.5001 7.68987 16.3102 4.5 12.3751 4.5ZM6.75008 11.625C6.75008 8.5183 9.26838 6 12.3751 6C15.4818 6 18.0001 8.5183 18.0001 11.625C18.0001 14.7317 15.4818 17.25 12.3751 17.25H12.3739C11.4505 17.2514 10.5411 17.0243 9.7267 16.5889L9.48163 16.4579L6.98795 17.0121L7.5422 14.5184L7.41119 14.2734C6.97581 13.459 6.74869 12.5496 6.75008 11.6261L6.75008 11.625Z' fill='black'/%3E%3C/svg%3E"); }
[data-icon="upload"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3487 4.90125H12.6513C13.7521 4.90124 14.599 4.90124 15.282 4.95587C15.9804 5.01173 16.5719 5.12824 17.1137 5.39747C18.0413 5.8584 18.7928 6.60991 19.2538 7.53751C19.523 8.07932 19.6395 8.67084 19.6954 9.36923C19.75 10.0523 19.75 10.8991 19.75 11.9677V12.0322C19.75 13.1008 19.75 13.9477 19.6954 14.6307C19.6395 15.3291 19.523 15.9206 19.2538 16.4624C18.7928 17.39 18.0413 18.1415 17.1137 18.6025C16.5719 18.8717 15.9804 18.9882 15.282 19.0441C14.599 19.0987 13.7521 19.0987 12.6836 19.0987H11.3164C10.2479 19.0987 9.40104 19.0987 8.71799 19.0441C8.01959 18.9882 7.42807 18.8717 6.88626 18.6025C5.95866 18.1415 5.20716 17.39 4.74622 16.4624C4.477 15.9206 4.36048 15.3291 4.30462 14.6307C4.24999 13.9477 4.24999 13.1008 4.25 12.0322V11.9677C4.24999 10.8991 4.24999 10.0523 4.30462 9.36923C4.36048 8.67084 4.477 8.07932 4.74622 7.53751C5.20716 6.60991 5.95866 5.8584 6.88626 5.39747C7.42807 5.12824 8.01959 5.01173 8.71799 4.95587C9.40104 4.90124 10.2479 4.90124 11.3164 4.90125H11.3487ZM8.83757 6.45109C8.22981 6.4997 7.8529 6.59212 7.55376 6.74077C6.91909 7.05614 6.4049 7.57033 6.08952 8.205C5.94088 8.50414 5.84846 8.88105 5.79985 9.48882C5.75056 10.1051 5.75 10.8919 5.75 12C5.75 13.108 5.75056 13.8949 5.79985 14.5111C5.84846 15.1189 5.94088 15.4958 6.08952 15.7949C6.4049 16.4296 6.91909 16.9438 7.55376 17.2592C7.8529 17.4078 8.22981 17.5002 8.83757 17.5488C9.45382 17.5981 10.2407 17.5987 11.3487 17.5987H12.6513C13.7593 17.5987 14.5462 17.5981 15.1624 17.5488C15.7702 17.5002 16.1471 17.4078 16.4462 17.2592C17.0809 16.9438 17.5951 16.4296 17.9105 15.7949C18.0591 15.4958 18.1515 15.1189 18.2002 14.5111C18.2494 13.8949 18.25 13.108 18.25 12C18.25 10.8919 18.2494 10.1051 18.2002 9.48882C18.1515 8.88105 18.0591 8.50414 17.9105 8.205C17.5951 7.57033 17.0809 7.05614 16.4462 6.74077C16.1471 6.59212 15.7702 6.4997 15.1624 6.45109C14.5462 6.4018 13.7593 6.40125 12.6513 6.40125H11.3487C10.2407 6.40125 9.45382 6.4018 8.83757 6.45109ZM11.25 15V12.75H9V11.25H11.25V8.99997H12.75V11.25H15V12.75H12.75V15H11.25Z' fill='black'/%3E%3C/svg%3E"); }
[data-icon="diamond"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8013 19.9762C12.3693 20.4436 11.6307 20.4436 11.1986 19.9762L3.11756 11.2346C2.74913 10.8361 2.72958 10.2274 3.07168 9.80599L6.92716 5.05714C7.13438 4.8019 7.44562 4.65369 7.77439 4.65369H16.2256C16.5544 4.65369 16.8656 4.8019 17.0728 5.05714L20.9283 9.80599C21.2704 10.2274 21.2508 10.8361 20.8824 11.2346L12.8013 19.9762ZM4.45944 10.4765L12 18.6334L19.5405 10.4765L16.031 6.15369H7.96901L4.45944 10.4765ZM16.0867 9.09336L16.0954 10.4557C15.3615 10.4557 14.6822 10.2315 14.1281 9.85065V12.5739C14.1281 13.9502 12.964 15.0659 11.5281 15.0659C10.0922 15.0659 8.9281 13.9502 8.9281 12.5739C8.9281 11.1976 10.0922 10.0819 11.5281 10.0819C11.6486 10.0819 11.7672 10.0897 11.8834 10.1049V11.4964C11.7713 11.4625 11.6519 11.4442 11.5281 11.4442C10.8771 11.4442 10.3494 11.95 10.3494 12.5739C10.3494 13.1978 10.8771 13.7036 11.5281 13.7036C12.179 13.7036 12.7067 13.1978 12.7067 12.5739V7.21604H14.1281C14.1281 8.25285 15.005 9.09336 16.0867 9.09336Z' fill='black'/%3E%3C/svg%3E"); }
[data-icon="avatar"] { width: 20px; height: 20px; --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.494 16.607A9.976 9.976 0 0 1 10 13.214a9.976 9.976 0 0 1 7.507 3.393A9.976 9.976 0 0 1 10 20a9.976 9.976 0 0 1-7.506-3.393zM13.572 8.214a3.571 3.571 0 1 1-7.143 0 3.571 3.571 0 0 1 7.143 0z'/%3E%3C/svg%3E"); }
[data-icon="settings"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6 3.57c-.48-.28-1.06-.39-1.6-.39s-1.12.11-1.6.39L5.91 6.17c-.45.3-.78.52-1.03.72-.26.21-.5.43-.67.73-.17.3-.24.61-.28.93-.03.3-.03.66-.03 1.09v4.71c0 .43 0 .79.03 1.09.04.32.11.63.28.93.17.3.41.53.67.74.25.2.58.42 1.03.72l4.49 2.6c.48.28 1.06.39 1.6.39s1.12-.11 1.6-.39l4.49-2.59c.45-.31.78-.53 1.03-.73.26-.21.5-.43.67-.73.17-.3.24-.61.28-.93.03-.3.03-.66.03-1.09V9.64c0-.43 0-.79-.03-1.09-.04-.32-.11-.63-.28-.93-.17-.3-.41-.52-.67-.73-.25-.2-.58-.42-1.03-.72L13.6 3.57z'/%3E%3C/svg%3E"); }
[data-icon="grid"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.684 7.625a1.942 1.942 0 1 1 3.883 0 1.942 1.942 0 0 1-3.883 0zm8.748 0a1.942 1.942 0 1 1 3.884 0 1.942 1.942 0 0 1-3.884 0zM5.684 16.374a1.942 1.942 0 1 1 3.883 0 1.942 1.942 0 0 1-3.883 0zm8.748 0a1.942 1.942 0 1 1 3.884 0 1.942 1.942 0 0 1-3.884 0z'/%3E%3C/svg%3E"); }
[data-icon="help"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4.75a7.25 7.25 0 1 0 0 14.5 7.25 7.25 0 0 0 0-14.5zM3.25 12a8.75 8.75 0 1 1 17.5 0 8.75 8.75 0 0 1-17.5 0zm5-2a3.75 3.75 0 1 1 4.5 3.675v.825h-1.5V13c0-.414.336-.75.75-.75A2.25 2.25 0 1 0 9.75 10H8.25zM13.25 16.563a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0z'/%3E%3C/svg%3E"); }
[data-icon="feedback"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.016 5.357a2.25 2.25 0 0 0-2.25 2.25v8.786a2.25 2.25 0 0 0 2.25 2.25H13.329v-2.154a2.75 2.75 0 0 1 2.75-2.75h2.155V7.607a2.25 2.25 0 0 0-2.25-2.25H8.016z'/%3E%3C/svg%3E"); }

.floating-tool {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 48px;
  height: 48px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 22px;
}

.modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.68);
}

.modal[hidden] {
  display: none;
}

.login-card {
  position: relative;
  width: 726px;
  min-height: 483px;
  padding: 24px 56px 56px;
  color: #161823;
  background:
    linear-gradient(135deg, rgba(213, 255, 252, 0.95), rgba(255, 255, 255, 0.84) 25%, #fff 42%),
    #fff;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.login-card h1 {
  margin: 0 0 55px;
  text-align: center;
  font-size: 26px;
  line-height: 32px;
}

.modal-close {
  position: absolute;
  right: 22px;
  top: 22px;
  border: 0;
  color: #9ca0aa;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

.login-grid {
  display: grid;
  grid-template-columns: 253px 1px 253px;
  gap: 54px;
}

.login-grid::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: #e8e9ee;
}

.qr-login,
.phone-login {
  display: grid;
  justify-items: center;
}

.phone-login {
  grid-column: 3;
}

.qr-login h2 {
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 500;
}

.qr {
  position: relative;
  display: grid;
  width: 180px;
  height: 180px;
  padding: 0;
  background: #fff;
  border: 1px solid #ededf0;
  border-radius: 10px;
}

.qr-img {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}

body.modal-open .shell,
body.modal-open .sidebar {
  overflow: hidden;
}

.qr-login p {
  margin: 24px 0 16px;
  color: #8b8f9b;
  font-size: 14px;
}

.qr-emphasis {
  color: var(--accent);
}

.qr-login button {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #e8e8ee;
  color: #6d7280;
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
}

.login-tabs {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 26px;
}

.login-tabs button {
  border: 0;
  color: #a1a5af;
  background: transparent;
  font-size: 16px;
}

.login-tabs button.is-active {
  color: #1f232d;
}

.phone-row,
.code-row {
  display: flex;
  align-items: center;
  width: 253px;
  height: 52px;
  margin-bottom: 16px;
  padding: 0 12px;
  background: #f5f5f7;
  border-radius: 10px;
}

.phone-row span {
  width: 58px;
  color: #4f5563;
  border-right: 1px solid #dedfe5;
}

.phone-row input,
.code-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #1f232d;
  background: transparent;
}

.code-row button {
  border: 0;
  color: #a0a4ae;
  background: transparent;
}

.submit-login {
  width: 253px;
  height: 48px;
  margin-top: 54px;
  border: 0;
  color: #fff;
  background: #ffb0c1;
  border-radius: 10px;
  font-weight: 800;
}

.agreement {
  margin: 10px 0 0;
  color: #b5b8c1;
  font-size: 12px;
}

.app-card-close {
  position: absolute;
  right: -14px;
  top: -14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(119, 191, 255, 0.45);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.58);
  background: #252938;
  font-size: 0;
  cursor: pointer;
}

.app-card-close::before,
.app-card-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2px;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  transform-origin: center;
}

.app-card-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.app-card-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.app-card.is-dismissed {
  display: none;
}

.side-popover {
  position: fixed;
  left: 12px;
  bottom: 58px;
  z-index: 60;
  width: 286px;
  padding: 18px 18px;
  background: #282a36;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.settings-popover {
  width: 280px;
}

.more-popover {
  width: 280px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.side-popover[hidden],
.private-popover[hidden],
.profile-popover[hidden] {
  display: none;
}

.side-pop-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  color: rgba(255, 255, 255, 0.64);
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.side-pop-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.side-pop-row span:first-child[data-icon] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

.side-pop-row i {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
  font-size: 20px;
  font-weight: 200;
}

.side-pop-row.strong {
  color: rgba(255, 255, 255, 0.92);
}

.mode-row {
  gap: 0;
}

.mode-row .sun {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.58);
  font-size: 20px;
  font-weight: 400;
}

.mode-row .moon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  font-size: 0;
  font-weight: 300;
}

.mode-row .moon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 18px;
  border-radius: 50%;
  box-shadow: -4px 0 0 0 #fff;
  transform: translate(-34%, -50%);
}

.private-popover,
.profile-popover,
.small-login-popover,
.upload-popover {
  position: fixed;
  z-index: 70;
  background: #282a36;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.private-popover,
.notice-popover {
  right: 132px;
  top: 54px;
  width: 280px;
  padding: 28px 20px 20px;
  text-align: center;
}

.private-popover p,
.notice-popover p,
.diamond-popover p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 600;
}

.private-popover button,
.profile-popover button,
.small-login-popover button,
.upload-popover button {
  border: 0;
  color: #fff;
  cursor: pointer;
}

.private-popover button,
.notice-popover button,
.diamond-popover button {
  width: 100%;
  height: 40px;
  background: #f43f5e;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.small-login-popover {
  width: 280px;
  padding: 28px 20px 20px;
  text-align: center;
}

.diamond-popover {
  right: 172px;
  top: 54px;
}

.diamond-popover strong {
  position: relative;
  display: block;
  margin: 0 0 24px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.diamond-popover em {
  position: absolute;
  top: -6px;
  right: 18px;
  padding: 2px 6px;
  color: #fff;
  background: #ff5a74;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
}

.notice-popover {
  right: 118px;
}

.upload-popover {
  right: 118px;
  top: 54px;
  display: grid;
  gap: 0;
  width: 220px;
  padding: 16px 24px 18px;
}

.upload-popover[hidden],
.notice-popover[hidden],
.diamond-popover[hidden],
.search-popover[hidden] {
  display: none;
}

.upload-popover button {
  position: relative;
  min-height: 38px;
  padding: 0;
  background: transparent;
  font-size: 14px;
  text-align: left;
}

.upload-popover em {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 16px;
  margin-left: 8px;
  padding: 0 5px;
  color: #fff;
  background: #ff526d;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  vertical-align: middle;
}

.profile-popover {
  right: 18px;
  top: 54px;
  width: 280px;
  padding: 16px 14px 0;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #8b8d98 0 12px, transparent 13px),
    radial-gradient(ellipse at 50% 83%, #8b8d98 0 27px, transparent 28px),
    #444753;
}

.profile-head h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.profile-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.profile-popover button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  margin-bottom: 6px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.profile-popover button i {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
  font-style: normal;
  font-size: 18px;
  font-weight: 200;
}

.badge {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 5px;
  font-size: 12px;
}

.badge.heart { color: #ff5d7e; }
.badge.star { color: #ffc878; }
.badge.history {
  color: #172318;
  background: linear-gradient(135deg, #b8ffd1, #78d989);
}
.badge.later {
  color: #fff;
  background: linear-gradient(135deg, #c168ff, #853fe4);
}
.badge.work {
  color: #0d2b44;
  background: linear-gradient(135deg, #8bd5ff, #4aa8f4);
}

.profile-muted {
  margin: 8px -14px 0;
  padding: 8px 26px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
}

.profile-muted p {
  margin: 8px 0;
}

[data-icon="video"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5v-9zm6 2.2v4.6l4-2.3-4-2.3z'/%3E%3C/svg%3E"); }
[data-icon="shirt"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h8l4 4-3 3v9H7v-9L4 8l4-4zm2 1.5A2.5 2.5 0 0 0 12 7a2.5 2.5 0 0 0 2-1.5h-4z'/%3E%3C/svg%3E"); }
[data-icon="ai"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l1.7 5.1L19 5.5l-3.2 4.5 5.2 1.8-5.2 1.8L19 18.5l-5.3-1.6L12 22l-1.7-5.1L5 18.5l3.2-4.9L3 11.8 8.2 10 5 5.5l5.3 1.6L12 2z'/%3E%3C/svg%3E"); }
[data-icon="keyboard"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm2 4h2V8H6v2zm3 0h2V8H9v2zm3 0h2V8h-2v2zm3 0h2V8h-2v2zM6 14h10v-2H6v2z'/%3E%3C/svg%3E"); }
[data-icon="service"] { --icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12a8 8 0 0 1 16 0v5a3 3 0 0 1-3 3h-2v-2h2a1 1 0 0 0 1-1v-5a6 6 0 0 0-12 0v5H4v-5zm3 1h3v6H7a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2zm10 0a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-3v-6h3z'/%3E%3C/svg%3E"); }

@media (max-width: 1180px) {
  body {
    min-width: 0;
  }

  .sidebar {
    width: 72px;
    padding: 0 8px;
  }

  .brand-name,
  .nav-item span:last-child,
  .app-card,
  .sidebar-footer {
    display: none;
  }

  .nav-item {
    width: 48px;
    justify-content: center;
    padding: 0;
  }

  .shell,
  .topbar {
    margin-left: 72px;
    left: 72px;
  }

  .feed {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    padding-right: 16px;
  }

  .video-card,
  .thumb {
    width: 100%;
  }

  .thumb {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .top-actions .top-link {
    display: none;
  }

  .sidebar-tools {
    width: 72px;
    grid-template-columns: repeat(2, 32px);
  }
}