/* Discover V2: service window, recommended stream and persistent live feed controls. */
body.panda-app .discover-v2-query-row {
  grid-template-columns: minmax(0, 1fr);
}

body.panda-app .discover-primary-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 10px var(--pc-inset, 18px) 0;
  padding: 5px;
  border: 1px solid rgba(56, 43, 66, 0.065);
  border-radius: 20px;
  background: rgba(247, 245, 250, 0.96);
  box-shadow: 0 10px 26px rgba(55, 42, 65, 0.055);
}
body.panda-app .discover-primary-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #777080;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 160ms ease;
}
body.panda-app .discover-primary-tabs button:active { transform: scale(0.98); }
body.panda-app .discover-primary-tabs button.is-active {
  background: linear-gradient(145deg, #fff8df, #ffefb7);
  color: #956400;
  box-shadow: 0 7px 18px rgba(214, 157, 22, 0.13), inset 0 0 0 1px rgba(234, 179, 38, 0.24);
}
body.panda-app .discover-primary-panel[hidden] { display: none !important; }
body.panda-app .discover-primary-panel { animation: discover-primary-enter 220ms ease both; }
@keyframes discover-primary-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

body.panda-app .panda-app-stage[data-active-route="home"] .app-shell-primary-actions [data-app-route="shop"] {
  display: none;
}

body.panda-app .discover-service-window {
  margin: 10px var(--pc-inset, 18px) 12px;
  padding: 10px;
  border: 1px solid rgba(41, 31, 50, 0.06);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(56, 42, 66, 0.07);
}

body.panda-app .discover-service-window > header,
body.panda-app .discover-recommended-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

body.panda-app .discover-service-window > header {
  align-items: center;
  margin: 0 2px 8px;
}
body.panda-app .discover-service-window header small,
body.panda-app .discover-recommended-title small {
  display: block;
  margin-bottom: 2px;
  color: #9c91a6;
  font-size: 8px;
  font-weight: 850;
}
body.panda-app .discover-service-window h2,
body.panda-app .discover-recommended-title h2 {
  margin: 0;
  color: #19151e;
  font-size: 17px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.035em;
}
body.panda-app .discover-service-window h2 { font-size: 15px; }
body.panda-app .discover-service-window > header > a {
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff5d7;
  color: #a56f00;
  font-size: 8px;
  font-weight: 900;
  text-decoration: none;
}

body.panda-app .discover-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
body.panda-app .discover-service-grid > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 5px 2px;
  border: 1px solid rgba(48, 37, 57, 0.055);
  border-radius: 13px;
  background: #faf9fc;
  color: #201b25;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}
body.panda-app .discover-service-grid > a:active { transform: scale(0.98); }
body.panda-app .discover-service-grid i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: linear-gradient(145deg, #fff, #f2eef8);
  font-size: 14px;
  font-style: normal;
  box-shadow: 0 5px 12px rgba(74, 56, 89, 0.08);
}
body.panda-app .discover-service-grid span { min-width: 0; width: 100%; text-align: center; }
body.panda-app .discover-service-grid strong,
body.panda-app .discover-service-grid small { display: block; white-space: nowrap; }
body.panda-app .discover-service-grid strong { overflow: hidden; font-size: 8px; font-weight: 900; text-overflow: ellipsis; }
body.panda-app .discover-service-grid small { margin-top: 1px; overflow: hidden; color: #9b94a2; font-size: 5.8px; font-weight: 750; text-overflow: ellipsis; }

body.panda-app .discover-shop-window {
  margin: 10px var(--pc-inset, 18px) 12px;
  padding: 12px;
  border: 1px solid rgba(41, 31, 50, 0.06);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 34px rgba(56, 42, 66, 0.07);
}
body.panda-app .discover-shop-window > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 10px;
}
body.panda-app .discover-shop-window header small {
  display: block;
  margin-bottom: 2px;
  color: #9c91a6;
  font-size: 8px;
  font-weight: 850;
}
body.panda-app .discover-shop-window h2 {
  margin: 0;
  color: #19151e;
  font-size: 15px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.035em;
}
body.panda-app .discover-shop-window > header > a {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff5d7;
  color: #a56f00;
  font-size: 8px;
  font-weight: 900;
  text-decoration: none;
}
body.panda-app .discover-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
body.panda-app .discover-shop-grid > a {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(48, 37, 57, 0.06);
  border-radius: 15px;
  background: #faf9fc;
  color: #201b25;
  text-decoration: none;
}
body.panda-app .discover-shop-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
  background: #f1eef5;
}
body.panda-app .discover-shop-grid span { display: block; min-width: 0; padding: 7px 7px 8px; }
body.panda-app .discover-shop-grid strong,
body.panda-app .discover-shop-grid small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.panda-app .discover-shop-grid strong { font-size: 8px; font-weight: 900; }
body.panda-app .discover-shop-grid small { margin-top: 2px; color: #9b94a2; font-size: 6px; font-weight: 750; }

body.panda-app .home-phone .home-unified-stream { margin-top: 10px; }
body.panda-app .discover-recommended-title { margin: 0 3px 10px; }
body.panda-app .discover-recommended-title > span { color: #9d95a5; font-size: 8px; font-weight: 800; }
body.panda-app .discover-recommended-title[hidden],
body.panda-app .home-feed-ad-carousel[hidden] { display: none !important; }

body.panda-app .post-sponsored-label {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid rgba(161, 123, 45, .18);
  border-radius: 999px;
  background: #fff7dc;
  color: #926b18;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  vertical-align: 1px;
}

body.panda-app .discover-live-toolbar {
  position: sticky;
  z-index: 12;
  top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px -4px 11px;
  padding: 8px 10px;
  border: 1px solid rgba(68, 49, 83, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 9px 22px rgba(56, 42, 66, 0.08);
  backdrop-filter: blur(20px);
}
body.panda-app .discover-live-title { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
body.panda-app .discover-live-title svg { width: 24px; height: 18px; fill: none; stroke: #8b62ec; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.panda-app .discover-live-title strong { color: #241d2d; font-size: 12px; font-weight: 950; }
body.panda-app .discover-live-sorts { display: flex; align-items: center; min-width: 0; }
body.panda-app .discover-live-sorts button {
  position: relative;
  padding: 6px 7px;
  border: 0;
  background: transparent;
  color: #8f8798;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
body.panda-app .discover-live-sorts button + button::before { content: ""; position: absolute; left: 0; top: 8px; width: 1px; height: 10px; background: #e3dee8; }
body.panda-app .discover-live-sorts button.is-active { color: #7d51de; }
body.panda-app .home-unified-feed-anchor.is-live-refreshing { animation: discover-live-refresh 220ms ease; }
@keyframes discover-live-refresh { from { opacity: 0.55; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Secondary search page: one sticky surface, persistent combination filters and a scrolling type rail. */
body.panda-app .library-phone { padding-top: 8px; }
body.panda-app .library-controls {
  top: 6px;
  padding: 7px 7px 6px;
  border-radius: 22px;
}
body.panda-app .library-toolbar { grid-template-columns: 40px minmax(0, 1fr); }
body.panda-app .library-selection-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 4px 1px;
  padding: 5px 8px;
  border-radius: 10px;
  background: #faf8fe;
  color: #7e6f8f;
  font-size: 8px;
  font-weight: 800;
}
body.panda-app .library-selection-status[hidden] { display: none !important; }
body.panda-app .library-selection-status button { padding: 2px 4px; border: 0; background: transparent; color: #8a5ae0; font-size: 8px; font-weight: 900; }
body.panda-app .library-condition-tabs,
body.panda-app .library-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.panda-app .library-condition-tabs::-webkit-scrollbar,
body.panda-app .library-tabs::-webkit-scrollbar { display: none; }
body.panda-app .library-condition-tabs { margin: 6px 1px 0; padding: 0 1px; }
body.panda-app .library-condition-tabs button {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7e7687;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}
body.panda-app .library-condition-tabs button.is-active { background: #f1ecfa; color: #665775; }
body.panda-app .library-controls .library-tabs {
  justify-content: flex-start;
  gap: 2px;
  margin-top: 2px;
  scroll-snap-type: x proximity;
}
body.panda-app .library-controls .library-tabs button {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  color: #777080;
  scroll-snap-align: start;
}
body.panda-app .library-controls .library-tabs button.is-active { background: #fff2c4; color: #976600; }

@media (max-width: 360px) {
  body.panda-app .discover-primary-tabs { gap: 4px; padding: 4px; }
  body.panda-app .discover-primary-tabs button { min-height: 40px; }
  body.panda-app .discover-service-window { padding-inline: 8px; }
  body.panda-app .discover-service-grid { gap: 4px; }
  body.panda-app .discover-service-grid > a { min-height: 56px; }
  body.panda-app .discover-shop-grid { gap: 5px; }
}

/* Discover V2.2: three complete streams share one docked search / tab / filter surface. */
body.panda-app .discover-sticky-hub {
  position: relative;
  z-index: 24;
  padding: 0 0 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}
body.panda-app .discover-sticky-hub.is-docked {
  position: relative;
  inset: auto;
  width: auto;
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
}
body.panda-app .discover-sticky-placeholder { height: 0; }
body.panda-app .discover-sticky-placeholder.is-active { height: 0; }
body.panda-app .discover-sticky-hub .discover-v2-query-row { margin-top: 0; }
body.panda-app .discover-sticky-hub .discover-primary-tabs { margin-top: 7px; }

body.panda-app .discover-stream-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px var(--pc-inset, 18px) 0;
  padding: 1px 1px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
body.panda-app .discover-stream-filters::-webkit-scrollbar { display: none; }
body.panda-app .discover-stream-filters button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #82798a;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
body.panda-app .discover-stream-filters button:active { transform: scale(.97); }
body.panda-app .discover-stream-filters button.is-active {
  border-color: rgba(237, 184, 42, .28);
  background: #fff3c8;
  color: #966500;
}

body.panda-app .discover-pull-indicator {
  position: absolute;
  z-index: 25;
  top: 2px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #8d7e98;
  box-shadow: 0 8px 20px rgba(47,36,57,.09);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -36px) scale(.92);
  transition: opacity 180ms ease, transform 220ms ease;
}
body.panda-app .discover-pull-indicator i { font-size: 14px; font-style: normal; }
body.panda-app .discover-pull-indicator span { font-size: 8px; font-weight: 850; }
body.panda-app .home-phone.is-discover-pulling .discover-pull-indicator,
body.panda-app .home-phone.is-discover-refreshing .discover-pull-indicator {
  opacity: 1;
  transform: translate(-50%, calc(var(--discover-pull-distance, 0px) - 4px)) scale(1);
}
body.panda-app .home-phone.is-discover-refreshing .discover-pull-indicator i { animation: discover-refresh-spin 700ms linear infinite; }
@keyframes discover-refresh-spin { to { transform: rotate(360deg); } }

/* APP-like function stream. The ten icons are exact crops from the supplied source image. */
body.panda-app .discover-service-window,
body.panda-app .discover-shop-window {
  margin-top: 12px;
  padding: 14px;
  border-radius: 26px;
}
body.panda-app .discover-service-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 7px;
  padding: 4px 0 6px;
}
body.panda-app .discover-service-grid > a {
  gap: 7px;
  min-height: 93px;
  padding: 2px 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
body.panda-app .discover-service-grid .discover-app-icon {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 17px;
  background-color: #fff;
  background-image: url("./original-assets/discover-function-app-icons-source.png?v=source-1");
  background-repeat: no-repeat;
  background-size: 431px 287px;
  box-shadow: 0 9px 20px rgba(86, 70, 112, .13);
}
body.panda-app .discover-app-icon.app-camera { background-position: -19px -42px; }
body.panda-app .discover-app-icon.app-document { background-position: -100px -42px; }
body.panda-app .discover-app-icon.app-delivery { background-position: -181px -42px; }
body.panda-app .discover-app-icon.app-makeup { background-position: -263px -42px; }
body.panda-app .discover-app-icon.app-study { background-position: -344px -42px; }
body.panda-app .discover-app-icon.app-event { background-position: -19px -154px; }
body.panda-app .discover-app-icon.app-place { background-position: -100px -154px; }
body.panda-app .discover-app-icon.app-recycle { background-position: -181px -154px; }
body.panda-app .discover-app-icon.app-agent { background-position: -263px -154px; }
body.panda-app .discover-app-icon.app-support { background-position: -344px -154px; }
body.panda-app .discover-service-grid strong { font-size: 9px; }
body.panda-app .discover-service-grid small { margin-top: 3px; font-size: 6.2px; }
body.panda-app .discover-service-grid > a[hidden],
body.panda-app .discover-shop-grid > a[hidden] { display: none !important; }

/* Shop is information-first: every item is a full card instead of a small shortcut. */
body.panda-app .discover-shop-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.panda-app .discover-shop-grid > a {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  min-height: 106px;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(52, 40, 62, .055);
}
body.panda-app .discover-shop-grid img {
  width: 106px;
  height: 100%;
  min-height: 106px;
  aspect-ratio: auto;
  object-fit: cover;
}
body.panda-app .discover-shop-grid span { position: relative; padding: 12px 13px 10px; }
body.panda-app .discover-shop-grid em {
  display: block;
  margin-bottom: 5px;
  color: #b87b00;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}
body.panda-app .discover-shop-grid strong { font-size: 11px; }
body.panda-app .discover-shop-grid small {
  margin-top: 5px;
  color: #89808f;
  font-size: 7px;
  line-height: 1.45;
  white-space: normal;
}
body.panda-app .discover-shop-grid b {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff3c9;
  color: #9d6900;
  font-size: 7px;
  font-weight: 900;
}

/* One shared filter surface replaces the older dynamic-only sticky toolbar. */
body.panda-app .discover-live-toolbar { position: relative; top: auto; }
body.panda-app .home-phone[data-discover-primary-view="dynamic"] .discover-live-toolbar { display: none; }
body.panda-app .discover-primary-panel.is-stream-refreshed {
  animation: discover-stream-refresh 320ms cubic-bezier(.2,.8,.2,1);
}
@keyframes discover-stream-refresh {
  from { opacity: .72; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stable action shell: navigation keeps its identity while content scrolls. */
body.panda-app .discover-sticky-hub .discover-stream-filters { margin-top: 6px; }

/* The discovery controls belong to the top of the page, not to the viewport.
   Dynamic ranking is a calm, evenly weighted four-way choice. */
body.panda-app .home-phone[data-discover-primary-view="dynamic"] .discover-stream-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 8px var(--pc-inset, 18px) 1px;
  padding: 4px;
  overflow: visible;
  border: 1px solid rgba(56, 43, 66, .065);
  border-radius: 18px;
  background: rgba(247, 245, 250, .92);
  box-shadow: 0 8px 22px rgba(55, 42, 65, .045);
}
body.panda-app .home-phone[data-discover-primary-view="dynamic"] .discover-stream-filters button {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0 4px;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #817988;
  font-size: 9px;
  font-weight: 850;
}
body.panda-app .home-phone[data-discover-primary-view="dynamic"] .discover-stream-filters button.is-active {
  color: #8c6200;
  background: linear-gradient(145deg, #fff9e6, #ffefb7);
  box-shadow: inset 0 0 0 1px rgba(231, 176, 36, .2), 0 5px 13px rgba(202, 148, 24, .1);
}

body.panda-app .panda-app-stage:is([data-active-route="home"], [data-active-route="discover"]) .app-shell-top {
  position: absolute;
  z-index: 45;
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
  transform: none !important;
  transition: top 200ms ease, left 200ms ease, right 200ms ease, padding 200ms ease, background-color 200ms ease, border-radius 200ms ease, box-shadow 200ms ease;
}

body.panda-app .panda-app-stage.is-discover-compact:is([data-active-route="home"], [data-active-route="discover"]) .app-shell-top {
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  padding: 7px 9px;
  border: 1px solid rgba(56, 43, 66, .07);
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(48, 37, 58, .08);
  backdrop-filter: blur(20px);
}

body.panda-app .panda-app-stage.is-discover-compact .discover-sticky-hub.is-docked {
  top: auto;
}

body.panda-app .bottom-nav .create-action-nav {
  gap: 2px;
  color: #111;
}
body.panda-app .bottom-nav .create-action-nav .bottom-nav-icon {
  width: 28px;
  height: 28px;
  color: #111;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .08));
}
body.panda-app .bottom-nav .create-action-nav > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  color: #111;
  font-size: 11px;
  font-weight: 700;
}
body.panda-app .bottom-nav .create-action-nav.active .bottom-nav-icon {
  color: #f2b51d;
  filter: drop-shadow(0 7px 12px rgba(242, 181, 29, .32));
  transform: translateY(-1px);
}
body.panda-app .bottom-nav .create-action-nav.active > span {
  color: #f2b51d;
}
body.panda-app .panda-app-stage[data-active-route="home"] .app-shell-bottom,
body.panda-app .panda-app-stage[data-active-route="discover"] .app-shell-bottom {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
}

@media (max-width: 380px) {
  body.panda-app .discover-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.panda-app .discover-shop-grid > a { grid-template-columns: 96px minmax(0, 1fr); }
  body.panda-app .discover-shop-grid img { width: 96px; }
}
