/* Explore page: search, categories, hashtags, creators, promo grid, charts */
.xwrap { max-width: 1040px; margin: 0 auto; padding: 28px 16px 80px; }
.xtitle { font-size: clamp(34px, 5vw, 48px); }
.xsub { color: #c9c6d8; margin-top: 8px; max-width: 56ch; }

.xsearch { position: relative; margin-top: 22px; }
.xsearch svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: #a8a5b8; pointer-events: none; }
.xsearch input {
  width: 100%; font: 500 16px var(--body); color: #fff;
  padding: 15px 16px 15px 46px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: #14141f;
}
.xsearch input::placeholder { color: #8f8ca3; }
.xsearch input:focus-visible { outline: 2px solid #c6ff3d; outline-offset: 2px; border-color: transparent; }

.xchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.xchip {
  font: 600 14px var(--body); color: #e9e7f2; cursor: pointer;
  padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.xchip:hover { border-color: rgba(255, 255, 255, 0.35); }
.xchip[aria-pressed="true"] { background: #fff; color: #101014; border-color: #fff; }
.xchip:focus-visible, .xtag:focus-visible, .xclear:focus-visible, .xcreator:focus-visible { outline: 2px solid #c6ff3d; outline-offset: 2px; }

.xsection { margin-top: 36px; }
.xh2 { font: 800 20px var(--display); margin-bottom: 14px; }
.xcount { color: #a8a5b8; font: 500 15px var(--body); }
.xhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.xclear { font: 600 14px var(--body); color: #c6ff3d; background: none; border: 0; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }

.xtags { display: flex; flex-wrap: wrap; gap: 8px; }
.xtag {
  font: 600 14px var(--body); color: #dcd9e8; text-decoration: none;
  padding: 7px 12px; border-radius: 10px; background: #14141f; border: 1px solid rgba(255, 255, 255, 0.08);
}
.xtag:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.xtag.is-on { background: #c6ff3d; color: #101014; border-color: #c6ff3d; }

.xcreators { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.xcreator {
  display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; color: #fff;
  padding: 18px 12px; border-radius: 16px; background: #14141f; border: 1px solid rgba(255, 255, 255, 0.08);
}
.xcreator:hover { border-color: rgba(255, 255, 255, 0.3); }
.xcreator[hidden] { display: none; }
.xcreator-avatar { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; margin-bottom: 6px; }
.xcreator-avatar-mono { display: grid; place-items: center; background: #c6ff3d; color: #101014; font: 800 26px var(--display); }
.xcreator-name { font: 700 15px var(--body); }
.xcreator-kind { font-size: 13px; color: #c9c6d8; }

.xgrid .ptile[hidden] { display: none; }
.ptile-who { position: absolute; left: 10px; right: 10px; bottom: 50px; z-index: 1; font: 600 12px var(--body); color: #c9c6d8; }
.xgrid .ptile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xempty { color: #c9c6d8; padding: 28px 0; }

.xcharts { padding: 22px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, 0.18); }
.xperiods { display: flex; gap: 8px; flex-wrap: wrap; }
.xperiods span { font: 600 13px var(--body); color: #a8a5b8; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.12); }
.xcharts-t { font: 700 17px var(--body); color: #fff; margin-top: 16px; }
.xcharts-p { color: #c9c6d8; font-size: 15px; margin-top: 6px; max-width: 62ch; }

@media (max-width: 640px) {
  .xcreators { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .xchip { transition: none; } }