/* Mobile search: the Figma frames use a 375px-wide canvas. */
.mobile-search {
  --mobile-search-unit: 1px;
  width: 375px;
  max-width: 100%;
  min-height: 100vh;
  margin-inline: auto;
  background: var(--bg, #0b0b0d);
  color: var(--text, #f2f2f4);
  font-family: var(--font, "PingFang SC", sans-serif);
}

.mobile-search__header {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(56 * var(--mobile-search-unit));
  padding-inline: calc(12 * var(--mobile-search-unit));
  background: var(--bg, #0b0b0d);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-search__back {
  display: grid;
  flex: 0 0 calc(36 * var(--mobile-search-unit));
  place-items: center;
  width: calc(36 * var(--mobile-search-unit));
  height: calc(36 * var(--mobile-search-unit));
  border-radius: 50%;
}

.mobile-search__back img,
.mobile-search__back svg {
  display: block;
  width: calc(22 * var(--mobile-search-unit));
  height: calc(22 * var(--mobile-search-unit));
}

.mobile-search__form {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: calc(8 * var(--mobile-search-unit));
  min-width: 0;
  height: calc(36 * var(--mobile-search-unit));
  padding-inline: calc(14 * var(--mobile-search-unit));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #ec237f;
  border-radius: 999px;
}

.mobile-search__search-icon {
  display: block;
  flex: 0 0 calc(18 * var(--mobile-search-unit));
  width: calc(18 * var(--mobile-search-unit));
  height: calc(18 * var(--mobile-search-unit));
}

.mobile-search__input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--text, #f2f2f4);
  background: transparent;
  border: 0;
  outline: 0;
  font: 400 calc(14 * var(--mobile-search-unit)) / calc(22 * var(--mobile-search-unit)) var(--font, "PingFang SC", sans-serif);
  appearance: none;
}

.mobile-search__input::placeholder {
  color: var(--text-dim, #7c7c86);
  opacity: 1;
}

.mobile-search__input::-webkit-search-cancel-button,
.mobile-search__input::-webkit-search-decoration {
  appearance: none;
}

.mobile-search__clear {
  display: grid;
  flex: 0 0 calc(16 * var(--mobile-search-unit));
  place-items: center;
  width: calc(16 * var(--mobile-search-unit));
  height: calc(16 * var(--mobile-search-unit));
}

.mobile-search__clear[hidden] {
  display: none;
}

.mobile-search__clear img,
.mobile-search__clear svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-search__cancel {
  flex: 0 0 auto;
  padding-left: 8px;
  color: var(--text-muted, #a1a1aa);
  font-size: calc(14 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(22 * var(--mobile-search-unit));
  white-space: nowrap;
}

.mobile-search__main,
.mobile-search__default,
.mobile-search__suggestions {
  width: 100%;
}

.mobile-search__default[hidden],
.mobile-search__suggestions[hidden],
.mobile-search__suggestion-list[hidden],
.mobile-search__suggestion[hidden],
.mobile-search__history[hidden] {
  display: none;
}

.mobile-search__history {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(10 * var(--mobile-search-unit));
  padding: calc(16 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(8 * var(--mobile-search-unit));
}

.mobile-search__history-head,
.mobile-search__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-search__section-label {
  margin: 0;
  color: var(--text-dim, #7c7c86);
  font-size: calc(12 * var(--mobile-search-unit));
  font-weight: 500;
  line-height: calc(16 * var(--mobile-search-unit));
}

.mobile-search__history-clear {
  display: grid;
  flex: 0 0 calc(14 * var(--mobile-search-unit));
  place-items: center;
  width: calc(14 * var(--mobile-search-unit));
  height: calc(14 * var(--mobile-search-unit));
}

.mobile-search__history-clear img,
.mobile-search__history-clear svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--mobile-search-unit));
}

.mobile-search__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(30 * var(--mobile-search-unit));
  padding-inline: calc(12 * var(--mobile-search-unit));
  color: var(--text-muted, #a1a1aa);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-size: calc(13 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(20 * var(--mobile-search-unit));
  white-space: nowrap;
}

.mobile-search__trending {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--mobile-search-unit));
  padding: calc(12 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit));
}

.mobile-search__trend-list {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--mobile-search-unit));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-search__trend {
  min-width: 0;
}

.mobile-search__trend > a {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--mobile-search-unit));
  width: 100%;
  min-width: 0;
  min-height: calc(40 * var(--mobile-search-unit));
  padding-block: calc(9 * var(--mobile-search-unit));
}

.mobile-search__trend-rank {
  flex: 0 0 calc(18 * var(--mobile-search-unit));
  width: calc(18 * var(--mobile-search-unit));
  color: var(--text-dim, #7c7c86);
  font-family: Inter, var(--font, "PingFang SC", sans-serif);
  font-size: calc(16 * var(--mobile-search-unit));
  font-weight: 600;
  line-height: calc(20 * var(--mobile-search-unit));
}

.mobile-search__trend:nth-child(-n + 3) .mobile-search__trend-rank {
  color: var(--accent-hot, #ff4a7b);
}

.mobile-search__trend-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text, #f2f2f4);
  font-size: calc(14 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(22 * var(--mobile-search-unit));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-search__trend-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: calc(18 * var(--mobile-search-unit));
  padding-inline: calc(5 * var(--mobile-search-unit));
  border-radius: 999px;
  font-size: calc(11 * var(--mobile-search-unit));
  font-weight: 500;
  line-height: calc(14 * var(--mobile-search-unit));
}

.mobile-search__trend-badge--hot,
.mobile-search__trend-badge:not(.mobile-search__trend-badge--new) {
  color: #fff;
  background: linear-gradient(135deg, #ff4a7b 15%, #ec237f 51%, #93226f 85%);
}

.mobile-search__trend-badge--new {
  color: var(--accent-hot, #ff4a7b);
  background: rgba(236, 35, 127, 0.1);
  border: 1px solid rgba(236, 35, 127, 0.3);
}

.mobile-search__trend-heat {
  flex: 0 0 auto;
  color: var(--text-dim, #7c7c86);
  font-size: calc(12 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(18 * var(--mobile-search-unit));
  white-space: nowrap;
}

.mobile-search__recommendations {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--mobile-search-unit));
  padding: calc(8 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(24 * var(--mobile-search-unit));
}

.mobile-search__recommend-title {
  margin: 0;
  color: var(--text, #f2f2f4);
  font-size: calc(16 * var(--mobile-search-unit));
  font-weight: 600;
  line-height: calc(22 * var(--mobile-search-unit));
}

.mobile-search__recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16 * var(--mobile-search-unit)) calc(8 * var(--mobile-search-unit));
}

.mobile-search__card {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--mobile-search-unit));
  min-width: 0;
}

.mobile-search__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 109 / 145;
  overflow: hidden;
  background: var(--bg-panel, #1b1b1f);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(8 * var(--mobile-search-unit));
}

.mobile-search__cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-search__cover-shade {
  position: absolute;
  inset: 58% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.mobile-search__episodes {
  position: absolute;
  z-index: 1;
  bottom: calc(10 * var(--mobile-search-unit));
  left: calc(10 * var(--mobile-search-unit));
  color: var(--text, #f2f2f4);
  font-size: calc(11 * var(--mobile-search-unit));
  font-weight: 500;
  line-height: calc(14 * var(--mobile-search-unit));
  white-space: nowrap;
}

.mobile-search__title,
.mobile-search__meta {
  display: block;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-search__title {
  color: var(--text, #f2f2f4);
  font-size: calc(14 * var(--mobile-search-unit));
  font-weight: 600;
  line-height: calc(20 * var(--mobile-search-unit));
}

.mobile-search__meta {
  color: var(--text-muted, #a1a1aa);
  font-size: calc(11 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(16 * var(--mobile-search-unit));
}

.mobile-search__suggestions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(12 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit)) calc(16 * var(--mobile-search-unit));
}

.mobile-search__suggestion-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(6 * var(--mobile-search-unit));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-search__suggest-empty {
  margin: 0;
  padding: calc(12 * var(--mobile-search-unit)) calc(4 * var(--mobile-search-unit));
  color: var(--text-dim, #7c7c86);
  font-size: calc(13 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(20 * var(--mobile-search-unit));
}

.mobile-search__suggestion-feature {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--mobile-search-unit));
  width: 100%;
  min-height: calc(84 * var(--mobile-search-unit));
  padding: calc(10 * var(--mobile-search-unit));
  background: var(--bg-panel, #1b1b1f);
  border-radius: calc(12 * var(--mobile-search-unit));
}

.mobile-search__feature-cover {
  display: block;
  flex: 0 0 calc(48 * var(--mobile-search-unit));
  width: calc(48 * var(--mobile-search-unit));
  height: calc(64 * var(--mobile-search-unit));
  overflow: hidden;
  border-radius: calc(6 * var(--mobile-search-unit));
}

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

.mobile-search__feature-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: calc(4 * var(--mobile-search-unit));
  min-width: 0;
}

.mobile-search__feature-title {
  margin: 0;
  overflow: hidden;
  color: var(--text, #f2f2f4);
  font-size: calc(15 * var(--mobile-search-unit));
  font-weight: 600;
  line-height: calc(21 * var(--mobile-search-unit));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-search__feature-title mark,
.mobile-search__feature-title > span:first-child,
.mobile-search__suggestion-text mark,
.mobile-search__suggestion-text > span:first-child,
.mobile-search__highlight {
  color: var(--accent-hot, #ff4a7b);
  background: none;
}

.mobile-search__feature-meta {
  margin: 0;
  overflow: hidden;
  color: var(--text-dim, #7c7c86);
  font-size: calc(12 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(18 * var(--mobile-search-unit));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-search__feature-play {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--mobile-search-unit));
  height: calc(32 * var(--mobile-search-unit));
  padding-inline: calc(12 * var(--mobile-search-unit));
  color: #fff;
  background: linear-gradient(135deg, #ff4a7b 0%, #ec237f 52%, #93226f 100%);
  border-radius: 999px;
  font-size: calc(14 * var(--mobile-search-unit));
  font-weight: 500;
  line-height: calc(20 * var(--mobile-search-unit));
  white-space: nowrap;
}

.mobile-search__feature-play img,
.mobile-search__feature-play svg {
  width: calc(16 * var(--mobile-search-unit));
  height: calc(16 * var(--mobile-search-unit));
}

.mobile-search__suggestion {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--mobile-search-unit));
  min-width: 0;
  padding: calc(10 * var(--mobile-search-unit)) calc(4 * var(--mobile-search-unit));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-search__suggestion-icon {
  display: block;
  flex: 0 0 calc(16 * var(--mobile-search-unit));
  width: calc(16 * var(--mobile-search-unit));
  height: calc(16 * var(--mobile-search-unit));
}

.mobile-search__suggestion-text {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text, #f2f2f4);
  font-size: calc(14 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(22 * var(--mobile-search-unit));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-search__suggestion-type {
  flex: 0 0 auto;
  color: var(--text-dim, #7c7c86);
  font-size: calc(12 * var(--mobile-search-unit));
  font-weight: 400;
  line-height: calc(18 * var(--mobile-search-unit));
  white-space: nowrap;
}

@media (max-width: 768px) {
  .mobile-search {
    --mobile-search-unit: calc(100vw / 375);
    width: 100%;
  }
}