/* Header geometry taken from the user-provided reference captures. */
.topbar-inner > .primary-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-inner > .primary-nav::-webkit-scrollbar {
  display: none;
}

.topbar-inner > .top-actions {
  flex: 0 0 auto;
}

.mobile-search-trigger {
  display: none;
}

.primary-nav .nav-recovery {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  color: #c9c3cd;
  font-size: 11px;
  white-space: nowrap;
}

.nav-recovery-home,
.nav-recovery button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #ffffff35;
  border-radius: 19px;
  background: #ffffff0c;
  color: #fff;
  cursor: pointer;
}

.nav-recovery button {
  border-color: #ee378c80;
  background: #ee378c24;
}

/* Source DOM anchors: 1280px -> 60px and 1440px -> 67.5px.
   Keep the existing desktop scroll offset 8px beyond the sticky bar. */
@media (min-width: 1024px) {
  html {
    --public-header-height: clamp(48px, 4.6875vw, 90px);
    scroll-padding-top: calc(var(--public-header-height) + 8px);
  }

  .topbar {
    height: var(--public-header-height);
  }
}

@media (max-width: 480px) {
  .primary-nav .nav-recovery {
    gap: 7px;
    font-size: 10px;
  }
  .nav-recovery-home,
  .nav-recovery button {
    min-height: 35px;
    padding: 7px 9px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html {
    scroll-padding-top: 80px;
  }

  .topbar {
    height: 72px;
    background: #282828;
  }

  .topbar-inner {
    width: min(1800px, calc(100% - 120px));
    max-width: none;
    gap: 16px;
    padding: 0;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 48px;
  }

  .topbar {
    height: 48px;
    background: #282828;
    border-bottom-color: #24242a;
    backdrop-filter: none;
  }

  .topbar-inner {
    position: relative;
    justify-content: space-between;
    padding: 0 16px;
  }

  .topbar-inner > .primary-nav {
    display: none !important;
  }

  .topbar-inner > .brand {
    display: inline-flex !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 7px;
  }

  .topbar-inner > .brand .brand-mark {
    width: 27px;
    height: 27px;
  }

  .topbar-inner > .brand .brand-copy b {
    font-size: 15px;
  }

  .topbar-inner > .top-actions {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }

  .topbar-inner > .top-actions .desktop-recharge-link,
  .topbar-inner > .top-actions .install-button {
    display: none !important;
  }

  .topbar-inner > .top-actions .search-box {
    display: none;
  }

  .topbar-inner > .top-actions .search-box.is-open {
    display: flex;
    top: 4px;
    height: 40px;
  }

  .topbar-inner > .top-actions .profile-button {
    display: flex !important;
    width: 34px;
    height: 34px;
    justify-content: center;
  }

  .topbar-inner > .top-actions .profile-avatar {
    width: 28px;
    height: 28px;
  }

  .mobile-search-trigger {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #eeeaf0;
    cursor: pointer;
  }

  .mobile-search-trigger svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .topbar-inner > .mobile-menu {
    display: flex !important;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
  }

  .mobile-menu span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
  }

  .mobile-menu[aria-expanded="true"] span {
    background: #f769aa;
  }

  .mobile-nav {
    position: fixed;
    top: 48px;
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 35;
    width: min(280px, 74.666667vw);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 24px 24px 30px;
    border: 0;
    border-right: 1px solid #ffffff1e;
    border-radius: 0;
    background: #282828;
    flex-direction: column;
    gap: 11px;
  }

  .mobile-nav.is-open {
    display: flex !important;
  }

  .mobile-nav[hidden] {
    display: none !important;
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 14px 23px;
    border-radius: 9px;
    background: #ffffff0d;
    color: #e8e4e9;
    font-size: 13px;
    text-align: left;
  }

  .mobile-nav a.is-active {
    background: #ee378c25;
    color: #ffabd0;
  }

  .mobile-nav .nav-recovery {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 5px 0;
  }

  .mobile-nav .nav-recovery-home {
    min-height: 35px;
  }

  .mobile-nav .mobile-install-action {
    grid-column: 1 / -1;
    min-height: 44px;
    margin-top: 7px;
    padding: 10px 14px;
    border: 1px solid #ee378c85;
    border-radius: 7px;
    background: #ee378c28;
    color: #ffd5e9;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }

  .search-discovery-backdrop {
    inset-block-start: 48px;
  }

  .search-discovery {
    top: 48px;
    right: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 60px);
  }

  html.telegram-mini-app {
    scroll-padding-top: calc(48px + max(env(safe-area-inset-top, 0px), var(--jumu-telegram-safe-top, 0px)));
  }

  body.telegram-mini-app .topbar {
    height: calc(48px + var(--jumu-telegram-top-clearance));
  }

  body.telegram-mini-app .mobile-nav,
  body.telegram-mini-app .search-discovery {
    top: calc(48px + max(env(safe-area-inset-top, 0px), var(--jumu-telegram-safe-top, 0px)));
  }

  body.telegram-mini-app .search-discovery-backdrop {
    inset-block-start: calc(48px + max(env(safe-area-inset-top, 0px), var(--jumu-telegram-safe-top, 0px)));
  }
}

@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .bottom-nav::-webkit-scrollbar {
    display: none;
  }

  .bottom-nav a {
    flex: 0 0 calc((100% - 14px) / 5);
    min-width: 60px;
  }

  .bottom-nav button[data-public-columns-retry] {
    flex: 0 0 calc((100% - 14px) / 5);
    min-width: 76px;
    cursor: pointer;
  }
}

.route-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 680px;
  margin: 12px 0 24px;
}

.route-search-form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #ffffff1a;
  border-radius: 5px;
  background: #17171c;
  color: #f5f2f5;
}

.route-search-form input::placeholder {
  color: #89838d;
}

.route-search-form .button {
  min-height: 42px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Search discovery is fed by the same public catalog and ranking APIs as the pages. */
.search-discovery-backdrop[hidden],
.search-discovery[hidden] {
  display: none;
}

.search-discovery-backdrop {
  position: fixed;
  inset: 76px 0 0;
  z-index: 29;
  background: rgba(7, 6, 11, .72);
  backdrop-filter: blur(4px);
}

.search-discovery {
  position: fixed;
  z-index: 32;
  top: 67px;
  right: max(24px, calc((100vw - 1780px) / 2 + 116px));
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  padding: 18px 20px 6px;
  border: 1px solid #ffffff21;
  border-radius: 14px;
  background: #1c1b22;
  box-shadow: 0 22px 65px #000b;
}

.search-discovery-top,
.search-discovery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search-discovery-top {
  padding-bottom: 9px;
  color: #a5a0aa;
  font-size: 11px;
  letter-spacing: .13em;
}

.search-discovery-close {
  width: 29px;
  height: 29px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  background: #ffffff0b;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.search-discovery-section {
  min-width: 0;
  padding: 17px 0 19px;
  border-top: 1px solid #ffffff14;
}

.search-discovery-heading {
  margin-bottom: 12px;
}

.search-discovery-heading h2 {
  margin: 0;
  color: #f5f1f5;
  font-size: 15px;
  font-weight: 650;
}

.search-discovery-heading button,
.search-discovery-heading small {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #d8a3bc;
  font-size: 11px;
}

.search-discovery-heading button {
  cursor: pointer;
}

.search-discovery-heading button:disabled {
  color: #77717d;
  cursor: default;
}

.search-discovery-empty {
  margin: 0;
  color: #9e98a5;
  font-size: 12px;
  line-height: 1.6;
}

.search-discovery-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.search-discovery-chips button {
  max-width: 100%;
  padding: 7px 11px;
  overflow-wrap: anywhere;
  border: 1px solid #ffffff20;
  border-radius: 18px;
  background: #ffffff0a;
  color: #e2dde5;
  cursor: pointer;
  font-size: 11px;
}

.search-discovery-hot {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-discovery-hot button,
.search-discovery-picks button {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #ebe6ed;
  cursor: pointer;
  text-align: left;
}

.search-discovery-hot button:hover,
.search-discovery-picks button:hover,
.search-discovery-chips button:hover {
  background: #ee378c1c;
}

.search-discovery-hot button > span {
  width: 27px;
  flex: 0 0 27px;
  color: #ed559a;
  font-weight: 700;
  font-size: 12px;
}

.search-discovery-hot b,
.search-discovery-pick-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.search-discovery-hot small,
.search-discovery-picks small {
  margin-left: auto;
  padding-left: 10px;
  flex: 0 0 auto;
  color: #89828f;
  font-size: 10px;
}

.search-discovery-picks {
  display: grid;
  gap: 4px;
}

.search-discovery-picks button {
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #ffffff11;
  background: #ffffff08;
}

.search-discovery-picks button > span:last-child {
  color: #ed559a;
}

.search-route-discovery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 26px;
}

.search-route-discovery .search-discovery-section {
  min-height: 190px;
  padding: 17px;
  border: 1px solid #ffffff16;
  border-radius: 9px;
  background: #1b1a21;
}

@media (max-width: 900px) {
  .search-route-discovery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .search-route-discovery {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .search-route-discovery .search-discovery-section {
    min-height: 0;
    padding: 15px;
  }
}

@media (max-width: 640px) {
  .route-search-form {
    gap: 7px;
    margin-bottom: 18px;
  }

  .route-search-form input,
  .route-search-form .button {
    min-height: 40px;
    height: 40px;
  }
}

/* Ordinary public-shell source: header.css v13 and footer.css v12,
   desktop site-shell #282828. The Studio console keeps its own tokens. */
@media (min-width: 1024px) {
  body:not(.admin-mode) .topbar,
  body:not(.admin-mode) .site-footer {
    background: #282828;
  }
}

/* Phone footer.css v12: ordinary mobile card, legal copy and wrapped links.
   Reuse the platform's lawful links/brand; reserve space for its live bottom
   navigation. Social identities and source image assets are not copied. */
@media (max-width: 767px) {
  body:not(.admin-mode) .site-footer {
    width: calc(100% - (2 * clamp(14px, 3.5vw, 16px)));
    margin: 24px clamp(14px, 3.5vw, 16px) calc(74px + env(safe-area-inset-bottom, 0px));
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    overflow: hidden;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
  }

  body:not(.admin-mode) .site-footer .footer-main {
    display: contents;
  }

  body:not(.admin-mode) .site-footer .footer-main > .brand {
    order: 0;
  }

  body:not(.admin-mode) .site-footer .footer-main > p {
    display: none;
  }

  body:not(.admin-mode) .site-footer .footer-bottom {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 18px;
    overflow-wrap: anywhere;
  }

  body:not(.admin-mode) .site-footer .footer-links {
    order: 2;
    width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  body:not(.admin-mode) .site-footer .footer-links a {
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    overflow-wrap: anywhere;
  }

  body:not(.admin-mode) .site-footer .footer-links a:hover,
  body:not(.admin-mode) .site-footer .footer-links a:focus-visible {
    color: #ec237f;
  }
}

/* Product defenses for operator-defined column titles (model max 40).
   These clipping/wrapping rules are adaptations, not source-raster proof. */
@media (max-width: 767px) {
  body:not(.admin-mode) .mobile-nav a {
    overflow-wrap: anywhere;
  }

  body:not(.admin-mode) .bottom-nav .bottom-nav-label {
    width: 100%;
    min-width: 0;
    padding: 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 9px;
    line-height: 13px;
  }
}

/* Column-body defense: a legal model-valid unbroken title must wrap.
   Keep all public renderer, route, sorting and pagination semantics. */
body:not(.admin-mode) .column-page .route-head h1 {
  overflow-wrap: anywhere;
}

/* Preserve the platform Telegram controller's safe area in the phone card.
   This is product clearance, not a source-site visual declaration. */
@media (max-width: 767px) {
  body.telegram-mini-app:not(.admin-mode) .site-footer {
    margin-bottom: calc(74px + max(env(safe-area-inset-bottom, 0px), var(--jumu-telegram-safe-bottom, 0px)));
  }
}


/* Approved public footer contacts and finite platform icons. */
#footerPublicContact[hidden], #footerPublicSocial[hidden] { display: none !important; }
.footer-contact { display: none; min-width: 0; }
.footer-contact-line { margin: 0; overflow-wrap: anywhere; }
.footer-contact-line a { color: inherit; text-decoration: none; }
.footer-contact-line a:hover { color: var(--pink-soft); }
.footer-social { display: flex; align-items: center; gap: 16px; margin-left: auto; min-width: 0; }
.footer-social-links { display: flex; align-items: center; gap: 18px; }
.footer-social-label { color: #a3a3a3; }
.footer-social-link { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: #242424; color: #a3a3a3; }
.footer-social-link svg { width: 18px; height: 18px; }
.footer-social-link:hover { color: var(--pink-soft); }
.footer-contact a:focus-visible, .footer-social-link:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: 3px; }
@media (max-width: 1023px) {
  .footer-contact { display: none; }
  .footer-social-label { display: none; }
  .footer-social { margin: 0 auto; }
}
@media (min-width: 1024px) {
  body:not(.admin-mode) .site-footer .footer-contact { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: min(4px, 0.208333vw); }
  body:not(.admin-mode) .site-footer .footer-contact-line { color: #a3a3a3; font-size: clamp(12px, 0.833333vw, 16px); line-height: clamp(18px, 1.145833vw, 22px); }
  body:not(.admin-mode) .site-footer .footer-links a { position: relative; }
  body:not(.admin-mode) .site-footer .footer-links a + a::before { content: ''; position: absolute; left: -8px; top: 50%; width: 1px; height: min(18px, 0.9375vw); transform: translateY(-50%); background: #444; }
  body:not(.admin-mode) .site-footer .footer-social-link { width: min(38px, 1.979167vw); height: min(38px, 1.979167vw); }
  body:not(.admin-mode) .site-footer .footer-social-link svg { width: min(20px, 1.041667vw); height: min(20px, 1.041667vw); }
  body:not(.admin-mode) .site-footer .footer-social-links { gap: min(16px, 0.833333vw); }
  body:not(.admin-mode) .site-footer .footer-social-label { font-size: clamp(12px, 0.833333vw, 16px); line-height: clamp(18px, 1.145833vw, 22px); }
}

/* Desktop ordinary footer.css v12, full late cascade129–133: brand row1,
   product display:contents, legal navigation row2. Keep the lawful platform
   copy, brand graphic and all destinations. Contact/social identities and
   the unavailable source raster are not fabricated. */
@media (min-width: 1024px) {
  body:not(.admin-mode) .site-footer {
    min-height: min(252px, 13.125vw);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  body:not(.admin-mode) .site-footer .footer-outer {
    width: min(1800px, calc(100% - 120px));
    max-width: none;
    min-height: min(251px, 13.072917vw);
    margin: 0 auto;
    padding: min(24px, 1.25vw) 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: min(12px, 0.625vw);
    box-sizing: border-box;
    overflow: hidden;
  }

  body:not(.admin-mode) .site-footer .footer-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: min(32px, 1.666667vw);
  }

  body:not(.admin-mode) .site-footer .footer-product {
    display: contents;
  }

  body:not(.admin-mode) .site-footer .footer-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: min(18px, 0.9375vw);
  }

  body:not(.admin-mode) .site-footer .footer-product p {
    margin: 0;
    color: #a3a3a3;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.9375vw, 18px);
    line-height: clamp(20px, 1.25vw, 24px);
  }

  /* Ten existing platform links can wrap. This is content-fit adaptation;
     source six-link separators/contact destinations are not invented. */
  body:not(.admin-mode) .site-footer .footer-links {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
  }

  body:not(.admin-mode) .site-footer .footer-links a {
    color: #fff;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833333vw, 16px);
    line-height: clamp(18px, 1.145833vw, 22px);
  }

  body:not(.admin-mode) .site-footer .footer-links a:hover,
  body:not(.admin-mode) .site-footer .footer-links a:focus-visible {
    color: #ec237f;
  }

  body:not(.admin-mode) .site-footer .footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
  }

  body:not(.admin-mode) .site-footer .footer-bottom {
    width: 100%;
    max-width: none;
    min-height: min(38px, 1.979167vw);
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: min(24px, 1.25vw);
  }

  body:not(.admin-mode) .site-footer .footer-copy {
    color: #a3a3a3;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, 0.729167vw, 14px);
    line-height: clamp(16px, 1.041667vw, 20px);
  }
}

/* Transparent wrappers preserve the already measured tablet/phone flow.
   This compatibility rule is platform-authored, not a source declaration. */
@media (max-width: 1023px) {
  body:not(.admin-mode) .site-footer .footer-outer,
  body:not(.admin-mode) .site-footer .footer-product,
  body:not(.admin-mode) .site-footer .footer-brand {
    display: contents;
  }

  body:not(.admin-mode) .site-footer .footer-divider {
    display: none;
  }

  body:not(.admin-mode) .site-footer .footer-product p {
    color: #77717a;
    font-size: 10px;
  }
}

@media (max-width: 767px) {
  body:not(.admin-mode) .site-footer .footer-product p {
    display: none;
  }
}