/* 页面级布局只消费共享 tokens；壳层、品牌色、侧栏宽度和顶栏高度来自 shared。 */

[hidden] { display: none !important; }
a[href*="#homepage-rankings"] { display: none !important; }

body {
  color: var(--pc-text);
  background: var(--pc-canvas);
  font-size: var(--pc-font-body, 16px);
  line-height: 1.5;
}

button, input, select { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(93, 76, 241, .2); outline-offset: 2px; }

.pc-nav-icon svg,
.pc-header-button svg,
.pc-search-icon svg,
.pc-search button svg,
.pc-avatar + svg,
[data-icon] svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.pc-nav-icon { font-size: 17px; }
.pc-nav-icon svg { width: 17px; height: 17px; }
.pc-header-button > [data-icon] { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.pc-header-button > [data-icon] svg { width: 16px; height: 16px; }
.pc-header-button:first-child > [data-icon] { color: var(--pc-warning); }
.pc-header-button:nth-child(2) > [data-icon] { color: var(--pc-warning); }
.header-plus { width: 30px; justify-content: center; padding: 0; }
.header-plus > [data-icon] { color: var(--pc-text-secondary); }
.pc-search-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 17px; margin-left: 12px; color: var(--pc-text-secondary); }
.pc-search-icon svg { width: 16px; height: 16px; }
.pc-search button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 45px; padding: 0; }
.pc-search button [data-icon] { display: inline-flex; font-size: 16px; }
.pc-avatar { padding: 0; color: #374151; border: 1px solid #e2e5ec; cursor: pointer; }
.pc-avatar:hover { border-color: #cfc9ff; box-shadow: 0 0 0 3px rgba(93, 76, 241, .08); }

.discover-page { width: 100%; max-width: none; padding: 24px clamp(24px, 2vw, 40px) 42px; }
.discover-app { display: grid; gap: 20px; }
.hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.discover-loading { min-height: 220px; }

.discover-hero {
  position: relative;
  display: flex;
  min-height: 204px;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  padding: 25px 28px 24px;
  border-color: #e6e5f7;
  background: linear-gradient(113deg, #f6f4ff 0%, #fbfbff 52%, #f1f6ff 100%);
}

.discover-hero::before,
.discover-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.discover-hero::before {
  top: -118px;
  right: 286px;
  width: 430px;
  height: 270px;
  border: 1px solid rgba(172, 164, 255, .28);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.discover-hero::after {
  right: 0;
  bottom: 0;
  width: 380px;
  height: 130px;
  opacity: .32;
  background-image: radial-gradient(#c9c5f7 .8px, transparent .8px);
  background-size: 10px 10px;
  mask-image: linear-gradient(120deg, transparent 2%, #000 72%);
}

.discover-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.discover-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--pc-brand); font-size: 12px; font-weight: 700; }
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-brand); box-shadow: 0 0 0 4px rgba(93, 76, 241, .1); }
.discover-hero h1 { margin: 0; color: var(--pc-text); font-size: 29px; line-height: 1.18; letter-spacing: -.045em; }
.discover-hero-copy > p:last-child { max-width: 560px; margin: 11px 0 0; color: var(--pc-text-secondary); font-size: var(--pc-font-body, 16px); }
.discover-hero-meta { display: flex; align-items: flex-end; gap: 26px; margin-top: 21px; }
.hero-stat { display: grid; gap: 2px; }
.hero-stat strong { color: var(--pc-text); font-size: 18px; line-height: 1.1; letter-spacing: -.025em; }
.hero-stat span { color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); }
.hero-stat--accent strong { color: var(--pc-brand); }

.discover-hero-visual { position: relative; z-index: 2; flex: 0 0 315px; min-height: 150px; }
.hero-orbit { position: absolute; top: 20px; right: 22px; width: 220px; height: 120px; border: 1px solid rgba(170, 164, 250, .4); border-radius: 50%; transform: rotate(-23deg); }
.hero-orbit::after { position: absolute; inset: 13px -13px; content: ""; border: 1px solid rgba(186, 198, 255, .47); border-radius: 50%; }
.hero-tile { position: absolute; display: block; overflow: hidden; width: 118px; height: 80px; border: 4px solid rgba(255, 255, 255, .95); border-radius: 10px; box-shadow: 0 9px 18px rgba(64, 67, 137, .16); transform: rotate(-8deg); }
.hero-tile .sprite { display: block; width: 100%; height: 100%; background: #0f141f; }
.hero-tile-a { top: 4px; right: 123px; }
.hero-tile-b { top: 57px; right: 12px; width: 132px; height: 87px; transform: rotate(8deg); }
.hero-tile-c { right: 114px; bottom: 0; width: 112px; height: 76px; transform: rotate(5deg); }
.hero-spark { position: absolute; color: #9d94f8; font-size: 17px; line-height: 1; }
.hero-spark-a { top: 1px; right: 67px; }
.hero-spark-b { right: 3px; bottom: 19px; color: #e497be; font-size: 20px; }

.discovery-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.discover-main-column { min-width: 0; }
.discover-toolbar { margin-bottom: 18px; padding: 18px 20px 17px; }
.toolbar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.toolbar-heading h2 { margin: 0; color: var(--pc-text); font-size: 16px; line-height: 1.25; }
.toolbar-heading p { margin: 5px 0 0; color: var(--pc-text-secondary); font-size: var(--pc-font-body, 16px); }
.toolbar-clear { min-height: 29px; padding: 0 10px; color: var(--pc-text-secondary); border: 0; background: transparent; font-size: var(--pc-font-control, 14px); }
.toolbar-clear:hover { color: var(--pc-brand); }
.result-search { display: flex; align-items: center; height: 36px; margin-top: 15px; border: 1px solid #e2e5ee; border-radius: 9px; background: var(--pc-surface); transition: border-color .16s ease, box-shadow .16s ease; }
.result-search:focus-within { border-color: #b3aaff; box-shadow: 0 0 0 3px rgba(93, 76, 241, .08); }
.result-search > [data-icon] { display: inline-flex; flex: 0 0 auto; margin-left: 11px; color: var(--pc-text-muted); font-size: 16px; }
.result-search input { min-width: 0; flex: 1; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; font-size: var(--pc-font-body, 16px); }
.result-search input::placeholder { color: var(--pc-text-muted); }
.result-search button { height: 100%; padding: 0 14px; color: var(--pc-brand); border: 0; border-left: 1px solid #e5e5f0; background: transparent; font-size: var(--pc-font-control, 14px); font-weight: 650; }
.result-search button:hover { background: var(--pc-brand-soft); }
.toolbar-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.discover-filter-bar { margin-bottom: 0; }
.discover-filter-bar .pc-filter { min-height: 30px; }
.discover-facet-controls { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.facet-select { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--pc-text-secondary); font-size: 12px; white-space: nowrap; }
.facet-select select { min-width: 106px; max-width: 160px; height: 31px; padding: 0 24px 0 9px; overflow: hidden; color: var(--pc-text); border: 1px solid var(--pc-border); border-radius: 8px; outline: 0; background: #fff; font-size: var(--pc-font-control, 14px); text-overflow: ellipsis; }
.facet-select select:hover { border-color: #d8d3ff; }
.sort-control { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; color: var(--pc-text-secondary); font-size: 12px; white-space: nowrap; }
.sort-control select { min-width: 103px; height: 31px; padding: 0 24px 0 9px; color: var(--pc-text); border: 1px solid var(--pc-border); border-radius: 8px; outline: 0; background: #fff; font-size: var(--pc-font-body, 16px); }
.sort-control select:hover { border-color: #d8d3ff; }

.result-grid { align-items: stretch; }
.media-grid, .trend-result-grid, .search-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.orientation-groups { display: grid; gap: 28px; }
.orientation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.orientation-heading strong { color: var(--pc-text); font-size: 16px; }
.orientation-heading span { color: var(--pc-text-muted); font-size: 12px; }
.orientation-grid--landscape { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.orientation-grid--portrait { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.orientation-grid--other { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.orientation-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orientation-grid--landscape .media-card,
.orientation-grid--portrait .media-card,
.orientation-grid--wide .media-card,
.orientation-grid--other .media-card { aspect-ratio: auto; }
.orientation-grid--landscape .media-visual { aspect-ratio: 16 / 9; }
.orientation-grid--portrait .media-visual { aspect-ratio: 9 / 16; }
.orientation-grid--wide .media-visual { aspect-ratio: 21 / 9; background: #0f141f; }
.orientation-grid--other .media-visual { aspect-ratio: 1 / 1; background: #0f141f; }
.orientation-grid--wide .media-art.is-live img,
.orientation-grid--wide .media-art.is-live video { object-fit: contain; object-position: center; background: #0f141f; }
.orientation-grid .media-art.is-live img,
.orientation-grid .media-art.is-live video { object-fit: contain; object-position: center; background: #0f141f; }
.orientation-grid--other .media-art.is-live img,
.orientation-grid--other .media-art.is-live video { object-fit: contain; object-position: center; background: #0f141f; }
.media-card { display: grid; grid-template-rows: auto minmax(0, 1fr); aspect-ratio: 1 / 1; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); background: #fff; box-shadow: var(--pc-shadow-sm); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.media-card:hover { border-color: #d8d3ff; box-shadow: 0 8px 20px rgba(42, 50, 100, .09); transform: translateY(-2px); }
.media-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e8ebf4; }
.media-visual .pc-media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.media-visual .sprite { display: block; width: 100%; height: 100%; background: #0f141f; }
.media-art.is-live { position: relative; overflow: hidden; background: #152033; }
.media-art.is-empty,
.media-placeholder { display: block; width: 100%; height: 100%; background: #0f141f; }
.media-placeholder.is-video { background: radial-gradient(circle at 50% 46%, #1c2433 0 18px, #0f141f 19px); }
.media-art.is-live img,
.media-art.is-live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.orientation-grid--other .media-art.is-live img,
.orientation-grid--other .media-art.is-live video,
.orientation-grid--wide .media-art.is-live img,
.orientation-grid--wide .media-art.is-live video { object-fit: contain; object-position: center; background: #0f141f; }
.gallery-collage { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) 27%; gap: 3px; background: #e8ebf4; }
.gallery-main, .gallery-strip { position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden; }
.gallery-main img, .gallery-main .sprite, .gallery-strip img, .gallery-strip .sprite { width: 100%; height: 100%; object-fit: cover; }
.gallery-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.gallery-strip b { display: grid; place-items: center; color: #fff; background: rgba(24, 31, 48, .74); font-size: 12px; }
.media-card:hover .media-visual .sprite { transform: scale(1.045); }
.search-group-stack { display: grid; gap: 28px; }
.search-result-group { min-width: 0; }
.search-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.search-group-heading h3 { margin: 0; color: var(--pc-text); font-size: 18px; }
.search-group-heading span { color: var(--pc-text-muted); font-size: 12px; }
.media-image-link { position: absolute; z-index: 1; inset: 0; display: block; }
.media-card-play { position: absolute; z-index: 4; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .86); border-radius: 50%; background: rgba(8, 12, 22, .62); box-shadow: 0 4px 12px rgba(0, 0, 0, .22); transform: translate(-50%, -50%); cursor: pointer; }
.media-card-play [data-icon], .media-card-play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
.media-card.is-playing .media-card-play { opacity: 0; pointer-events: none; }
.media-image-link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 42%; content: ""; background: linear-gradient(transparent, rgba(19, 25, 42, .35)); }
.media-type-label { position: absolute; z-index: 1; top: 9px; left: 9px; display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; color: #fff; border: 1px solid rgba(255, 255, 255, .34); border-radius: 6px; background: rgba(22, 28, 45, .48); font-size: var(--pc-font-caption, 12px); font-weight: 650; }
.media-duration { position: absolute; z-index: 1; right: 9px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; color: #fff; border-radius: 5px; background: rgba(22, 28, 45, .65); font-size: var(--pc-font-caption, 12px); }
.media-duration [data-icon] { display: inline-flex; font-size: var(--pc-font-caption, 12px); }
.media-duration svg { width: 12px; height: 12px; fill: none; stroke: currentColor; }
.media-preview-note { position: absolute; z-index: 1; right: 9px; bottom: 8px; display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 5px; background: rgba(22, 28, 45, .68); font-size: var(--pc-font-control, 14px); font-weight: 650; }
.media-favorite { position: absolute; z-index: 2; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(24, 31, 48, .4); }
.media-favorite:hover, .media-favorite.is-saved { color: #fff; border-color: rgba(255, 255, 255, .5); background: var(--pc-brand); }
.media-favorite [data-icon] { display: inline-flex; font-size: 14px; }
.media-favorite svg { width: 14px; height: 14px; }
.media-card-body { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; padding: 12px 12px 11px; }
.media-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.media-card-title { min-width: 0; color: var(--pc-text); }
.media-card-title h3 { overflow: hidden; margin: 0; font-size: var(--pc-font-body, 16px); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.media-card-title:hover { color: var(--pc-brand); }
.media-kind { flex: 0 0 auto; color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); }
.media-meta { overflow: hidden; margin: 6px 0 8px; color: var(--pc-text-secondary); font-size: var(--pc-font-caption, 12px); text-overflow: ellipsis; white-space: nowrap; }
.media-prompt-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px; min-height: 38px; margin: 0 0 10px; color: var(--pc-text-secondary); font-size: var(--pc-font-body, 16px); line-height: 1.55; }
.media-prompt-preview b { color: var(--pc-brand); font-size: var(--pc-font-body, 16px); letter-spacing: .02em; }
.media-prompt-preview span { display: -webkit-box; min-width: 0; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); }
.media-model { display: inline-flex; align-items: center; min-width: 0; max-width: 63%; overflow: hidden; padding: 3px 6px; color: #686fb5; border-radius: 5px; background: #f1f2ff; text-overflow: ellipsis; white-space: nowrap; }
.media-metric { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.media-metric-note { display: inline-flex; align-items: center; color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); white-space: nowrap; }
.media-metric [data-icon] { display: inline-flex; color: var(--pc-text-muted); font-size: 12px; }
.media-card-actions { display: flex; gap: 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f1f5; }
.media-card-actions[data-action-count="1"] { display: grid; grid-template-columns: 1fr; }
.media-card-actions[data-action-count="2"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-card-action { display: inline-flex; min-width: 0; flex: 1 1 0; align-items: center; justify-content: center; min-height: 30px; overflow: hidden; padding: 0 6px; color: var(--pc-brand); border: 1px solid #dedaff; border-radius: 7px; background: var(--pc-brand-soft); font: inherit; font-size: var(--pc-font-control, 14px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.media-card-action:disabled { color: var(--pc-text-muted); border-color: var(--pc-border); background: #f7f8fa; cursor: not-allowed; }
.media-card-action:hover, .media-card-action:focus-visible { color: var(--pc-brand-dark); border-color: #bbb3ff; background: #e9e6ff; }
.media-card-action:focus-visible { outline: 3px solid rgba(93, 76, 241, .2); outline-offset: 2px; }
.media-card-action.is-primary { color: #fff; border-color: transparent; background: var(--pc-brand-gradient); }
.media-card-action.is-primary:hover, .media-card-action.is-primary:focus-visible { color: #fff; background: var(--pc-brand-dark); transform: translateY(-1px); }
.media-card:focus-within { border-color: #c8c1ff; box-shadow: 0 9px 22px rgba(42, 50, 100, .12); }
.media-image-link:focus-visible, .media-card-title:focus-visible { outline: 3px solid rgba(93, 76, 241, .2); outline-offset: -3px; }
.media-card[data-orientation="portrait"] { grid-template-columns: minmax(0, 9fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); }
.media-card[data-orientation="portrait"] .media-visual { width: 100%; height: 100%; aspect-ratio: 9 / 16; }
.media-card[data-orientation="portrait"] .media-card-body { padding: 10px; }
.media-card[data-orientation="portrait"] .media-card-title-row { align-items: flex-start; }
.media-card[data-orientation="portrait"] .media-card-title h3 { font-size: var(--pc-font-body, 16px); white-space: normal; }
.media-card[data-orientation="portrait"] .media-kind { display: none; }
.media-card[data-orientation="portrait"] .media-meta { display: -webkit-box; margin: 5px 0 7px; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-card[data-orientation="portrait"] .media-prompt-preview { display: block; min-height: 0; margin-bottom: 7px; }
.media-card[data-orientation="portrait"] .media-prompt-preview b { display: block; margin-bottom: 2px; }
.media-card[data-orientation="portrait"] .media-prompt-preview span { -webkit-line-clamp: 3; }
.media-card[data-orientation="portrait"] .media-card-foot { align-items: flex-start; flex-direction: column; }
.media-card[data-orientation="portrait"] .media-model { max-width: 100%; }
.media-card[data-orientation="portrait"] .media-metric-note { display: none; }
.media-card[data-orientation="portrait"] .media-card-actions { gap: 4px; flex-direction: column; padding-top: 7px; }
.media-card[data-orientation="portrait"] .media-card-action { min-height: 26px; }
.media-card[data-orientation="landscape"] .media-card-body { padding: 7px 10px 7px; }
.media-card[data-orientation="landscape"] .media-meta { display: none; }
.media-card[data-orientation="landscape"] .media-prompt-preview { min-height: 0; margin: 4px 0; line-height: 1.4; }
.media-card[data-orientation="landscape"] .media-card-foot { min-height: 18px; }
.media-card[data-orientation="landscape"] .media-card-actions { padding-top: 5px; }
.media-card[data-orientation="landscape"] .media-card-action { min-height: 27px; }
.trend-inline { display: inline-flex; align-items: center; gap: 3px; color: var(--pc-success); font-weight: 700; }
.trend-inline [data-icon] { display: inline-flex; font-size: 12px; }

.discover-rail { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 16px; min-width: 0; }
.discover-rail > * { min-width: 0; }
.rail-card { padding: 17px 16px; }
.rail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; margin-bottom: 5px; }
.rail-heading h2 { margin: 0; color: var(--pc-text); font-size: var(--pc-font-body, 16px); line-height: 1.3; }
.rail-heading p { margin: 4px 0 0; color: var(--pc-text-secondary); font-size: var(--pc-font-caption, 12px); }
.rail-count { color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); white-space: nowrap; }
.topic-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.topic-chip { min-height: 27px; padding: 0 9px; color: var(--pc-text-secondary); border: 1px solid #edf0f5; border-radius: 7px; background: #fff; font-size: var(--pc-font-control, 14px); }
.topic-chip:hover { color: var(--pc-brand); border-color: #d8d3ff; background: var(--pc-brand-soft); }
.rail-note { display: flex; gap: 9px; margin-top: 15px; padding-top: 13px; color: var(--pc-text-secondary); border-top: 1px solid #f0f1f5; font-size: var(--pc-font-caption, 12px); line-height: 1.55; }
.rail-note [data-icon] { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: var(--pc-brand); font-size: 15px; }

.prompt-card { min-width: 0; padding: 15px; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); background: #fff; box-shadow: var(--pc-shadow-sm); }
.prompt-card:hover { border-color: #d8d3ff; }
.prompt-card-header, .prompt-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prompt-card-header { margin-bottom: 11px; }
.prompt-card .pc-tag { min-height: 22px; }
.points-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; color: var(--pc-brand); border: 1px solid #dedaff; border-radius: 6px; background: var(--pc-brand-soft); font-size: var(--pc-font-caption, 12px); font-weight: 650; white-space: nowrap; }
.points-badge [data-icon] { display: inline-flex; font-size: 12px; }
.points-badge svg { width: 12px; height: 12px; }
.prompt-card-content { display: block; }
.prompt-card-content h3 { overflow: hidden; margin: 0; color: var(--pc-text); font-size: var(--pc-font-body, 16px); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.prompt-card-content:hover h3 { color: var(--pc-brand); }
.prompt-card-content p { display: -webkit-box; overflow: hidden; margin: 7px 0 13px; color: var(--pc-text-secondary); font-size: var(--pc-font-body, 16px); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.prompt-card-footer { padding-top: 10px; border-top: 1px solid #f0f1f5; }
.prompt-author { overflow: hidden; color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); text-overflow: ellipsis; white-space: nowrap; }
.prompt-card-footer .pc-button { min-height: 27px; padding: 0 9px; font-size: var(--pc-font-control, 14px); }
.prompt-card-footer .pc-button [data-icon] { display: inline-flex; font-size: var(--pc-font-control, 14px); }
.prompt-card.is-compact { padding: 14px; }
.prompt-card.is-compact .prompt-card-content p { -webkit-line-clamp: 2; }

.empty-state { display: grid; min-height: 290px; place-items: center; align-content: center; gap: 8px; margin-top: 18px; padding: 32px 20px; text-align: center; }
.empty-icon { display: grid; width: 44px; height: 44px; place-items: center; color: var(--pc-brand); border-radius: 50%; background: var(--pc-brand-soft); }
.empty-icon [data-icon] { display: inline-flex; font-size: 21px; }
.empty-icon svg { width: 21px; height: 21px; }
.empty-state h2 { margin: 5px 0 0; color: var(--pc-text); font-size: 16px; }
.empty-state p { max-width: 360px; margin: 0 0 7px; color: var(--pc-text-secondary); font-size: var(--pc-font-body, 16px); }
.empty-state .pc-button { min-height: 32px; }

.result-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 14px 16px; color: var(--pc-text-secondary); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-md); background: #fff; box-shadow: var(--pc-shadow-sm); font-size: var(--pc-font-control, 14px); }
.result-pagination > div { display: flex; gap: 8px; }
.pagination-link { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; padding: 0 13px; color: var(--pc-brand); border: 1px solid #dedaff; border-radius: 8px; background: var(--pc-brand-soft); font-weight: 700; }
.pagination-link.is-primary { color: #fff; border-color: transparent; background: var(--pc-brand-gradient); }
.pagination-link.is-disabled { color: var(--pc-text-muted); border-color: var(--pc-border); background: #f7f8fa; }

.trend-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.trend-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-md); background: #fff; box-shadow: var(--pc-shadow-sm); }
.trend-stat-copy { min-width: 0; }
.trend-stat-copy small { display: block; margin-bottom: 4px; color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); }
.trend-stat-copy strong { display: block; overflow: hidden; color: var(--pc-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.trend-stat-copy button { max-width: 100%; overflow: hidden; padding: 0; color: inherit; border: 0; background: transparent; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.trend-stat-copy button:hover { color: var(--pc-brand); }
.trend-stat-value { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; color: var(--pc-success); font-size: 13px; font-weight: 750; }
.trend-stat-value [data-icon] { display: inline-flex; font-size: 13px; }
.trend-stat-value svg { width: 13px; height: 13px; }
.trend-card .media-card-body { padding-top: 10px; }
.trend-card .media-visual { aspect-ratio: 16 / 9; }

.search-hero { min-height: 184px; }
.search-hero .discover-hero-visual { flex-basis: 245px; }
.series-detail-app { gap: 18px; }
.series-detail-hero { padding: 25px 28px 22px; border-color: #e6e5f7; background: linear-gradient(113deg, #f6f4ff 0%, #fbfbff 52%, #f1f6ff 100%); }
.series-detail-hero h1 { margin: 0; color: var(--pc-text); font-size: 29px; line-height: 1.18; letter-spacing: -.045em; }
.series-detail-hero > p:not(.discover-kicker) { max-width: 760px; margin: 11px 0 0; color: var(--pc-text-secondary); font-size: var(--pc-font-body, 16px); }
.series-detail-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
.series-detail-meta span { display: grid; gap: 2px; }
.series-detail-meta strong { color: var(--pc-brand); font-size: 18px; line-height: 1.1; }
.series-detail-meta small { color: var(--pc-text-muted); font-size: var(--pc-font-caption, 12px); }
.series-detail-difference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.series-difference-card { min-width: 0; padding: 19px 20px; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); background: #fff; box-shadow: var(--pc-shadow-sm); }
.series-difference-card--keep { color: #2b986e; border-color: #ccecdf; background: linear-gradient(180deg, #f2fff9, #fff); }
.series-difference-card--change { color: #c86d1a; border-color: #f8dec2; background: linear-gradient(180deg, #fffaf4, #fff); }
.series-difference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.series-difference-heading h2 { margin: 2px 0 0; color: var(--pc-text); font-size: 18px; }
.series-difference-eyebrow { color: var(--pc-text-muted); font-size: 12px; }
.series-difference-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .7); font-size: 18px; font-weight: 800; }
.series-difference-note { margin: 10px 0 12px; color: var(--pc-text-secondary); font-size: var(--pc-font-control, 14px); line-height: 1.55; }
.series-difference-card ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.series-difference-card li { display: flex; align-items: flex-start; gap: 8px; color: var(--pc-text-secondary); font-size: var(--pc-font-control, 14px); line-height: 1.45; }
.series-difference-card li [data-icon] { display: inline-flex; flex: 0 0 auto; margin-top: 2px; color: currentColor; font-size: 15px; }
.series-difference-card li svg { width: 15px; height: 15px; }
.series-detail-works { display: grid; gap: 12px; }
.series-detail-works .toolbar-heading { padding: 0 2px; }
.series-detail-works .toolbar-heading p { font-size: var(--pc-font-control, 14px); }
.series-detail-works .result-grid { margin-top: 0; }
.search-tip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--pc-text-secondary); font-size: var(--pc-font-caption, 12px); }
.search-tip [data-icon] { display: inline-flex; color: var(--pc-brand); font-size: 14px; }
.search-result-grid .prompt-card { height: 100%; }
.search-result-grid .media-card { height: 100%; }
.search-filter-bar .pc-filter { min-width: 55px; text-align: center; }

.sprite-portrait { background-position: 0 0; }
.sprite-city { background-position: 33.3333% 0; }
.sprite-perfume { background-position: 66.6667% 0; }
.sprite-mountain { background-position: 100% 0; }
.sprite-anime { background-position: 0 50%; }
.sprite-moon { background-position: 33.3333% 50%; }
.sprite-car { background-position: 66.6667% 50%; }
.sprite-house { background-position: 100% 50%; }
.sprite-forest { background-position: 0 100%; }
.sprite-castle { background-position: 33.3333% 100%; }
.sprite-space { background-position: 66.6667% 100%; }
.sprite-character { background-position: 100% 100%; }

@media (max-width: 1180px) {
  .discovery-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .media-grid, .trend-result-grid, .search-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .discover-hero-visual { flex-basis: 280px; }
}

@media (max-width: 920px) {
  .discovery-layout { grid-template-columns: 1fr; }
  .discover-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trend-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .discover-page { padding: 16px 14px 30px; }
  .discover-hero { min-height: 0; padding: 21px 19px; }
  .discover-hero-visual { display: none; }
  .discover-hero-meta { gap: 18px; margin-top: 18px; }
  .discover-hero h1 { font-size: 25px; }
  .discover-toolbar { padding: 15px; }
  .toolbar-controls { align-items: flex-start; flex-direction: column; gap: 12px; }
  .discover-facet-controls { width: 100%; align-items: stretch; }
  .facet-select { flex: 1 1 180px; justify-content: space-between; }
  .facet-select select { flex: 1; max-width: none; }
  .sort-control { width: 100%; justify-content: space-between; }
  .sort-control select { flex: 1; max-width: 180px; }
  .series-detail-difference { grid-template-columns: 1fr; }
  .series-detail-hero { padding: 21px 19px; }
  .series-detail-hero h1 { font-size: 25px; }
  .media-grid, .trend-result-grid, .search-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discover-rail { grid-template-columns: minmax(0, 1fr); }
  .trend-overview { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .pc-content { padding-left: 14px; padding-right: 14px; }
  .media-grid, .trend-result-grid, .search-result-grid { grid-template-columns: 1fr; }
  .toolbar-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .toolbar-clear { padding-left: 0; }
  .facet-select { flex-basis: 100%; }
  .result-search button { padding: 0 11px; }
  .media-card-actions { gap: 6px; }
  .media-card-action { min-height: 34px; padding-right: 6px; padding-left: 6px; font-size: var(--pc-font-control, 14px); }
  .media-card-foot { align-items: flex-start; flex-wrap: wrap; }
  .media-model { max-width: 100%; }
  .result-pagination { align-items: flex-start; flex-direction: column; }
  .result-pagination > div { width: 100%; }
  .pagination-link { flex: 1 1 0; }
}

body[data-theme="dark"] .discover-hero {
  border-color: #293142;
  background: linear-gradient(113deg, #15122a 0%, #111620 52%, #121826 100%);
}
body[data-theme="dark"] .series-detail-hero {
  border-color: #293142;
  background: linear-gradient(113deg, #15122a 0%, #111620 52%, #121826 100%);
}
body[data-theme="dark"] .discover-hero::after {
  background-image: radial-gradient(#3a3270 .8px, transparent .8px);
}
body[data-theme="dark"] .discover-hero::before {
  border-color: rgba(93, 76, 241, .22);
}
body[data-theme="dark"] .media-card,
body[data-theme="dark"] .prompt-card,
body[data-theme="dark"] .result-pagination,
body[data-theme="dark"] .trend-stat,
body[data-theme="dark"] .discover-toolbar,
body[data-theme="dark"] .series-difference-card,
body[data-theme="dark"] .rail-card,
body[data-theme="dark"] .empty-state {
  background: #111620;
  border-color: #293142;
  box-shadow: none;
}
body[data-theme="dark"] .result-search,
body[data-theme="dark"] .sort-control select,
body[data-theme="dark"] .facet-select select,
body[data-theme="dark"] .topic-chip {
  background: #151b28;
  border-color: #293142;
  color: #d4d9e8;
}
body[data-theme="dark"] .series-difference-card--keep { border-color: #24583f; background: linear-gradient(180deg, #13271f, #111620); }
body[data-theme="dark"] .series-difference-card--change { border-color: #60401f; background: linear-gradient(180deg, #2b2117, #111620); }
body[data-theme="dark"] .result-search button { border-left-color: #293142; }
body[data-theme="dark"] .media-model {
  color: #cbb6ff;
  background: #211b42;
}
body[data-theme="dark"] .media-card-actions,
body[data-theme="dark"] .prompt-card-footer,
body[data-theme="dark"] .rail-note {
  border-top-color: #293142;
}
body[data-theme="dark"] .media-card-action {
  color: #cbb6ff;
  border-color: #3a3270;
  background: #211b42;
}
body[data-theme="dark"] .media-card-action:hover,
body[data-theme="dark"] .media-card-action:focus-visible {
  color: #e4dcff;
  border-color: #5d4cf1;
  background: #2a2452;
}
body[data-theme="dark"] .media-card-action:disabled {
  color: #737e96;
  border-color: #293142;
  background: #151b28;
}
body[data-theme="dark"] .pc-filter {
  color: #d4d9e8;
  border-color: #293142;
  background: #151b28;
}
body[data-theme="dark"] .pc-filter.is-active,
body[data-theme="dark"] .pc-filter:hover {
  color: #cbb6ff;
  border-color: #3a3270;
  background: #211b42;
}
body[data-theme="dark"] .pagination-link {
  color: #cbb6ff;
  border-color: #3a3270;
  background: #211b42;
}
body[data-theme="dark"] .pagination-link.is-disabled {
  color: #737e96;
  border-color: #293142;
  background: #151b28;
}
body[data-theme="dark"] .topic-chip:hover {
  color: #cbb6ff;
  border-color: #3a3270;
  background: #211b42;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}