/* 黑金移动端导航模板：仅负责视觉样式，页面数据与交互由 index.php 保持原样。 */
:root {
  --page-bg: #050505;
  --surface: #171717;
  --surface-deep: #0e0e0e;
  --gold: #f4d87a;
  --gold-strong: #ffe9a5;
  --gold-shadow: rgba(226, 174, 62, .42);
  --muted-gold: #c9ad68;
  --text: #f8efd7;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  background: var(--page-bg);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  width: min(100%, 590px);
  margin: 0 auto;
  padding: 0 8px calc(36px + env(safe-area-inset-bottom));
  overflow-x: clip;
  position: relative;
  isolation: isolate;
  color: var(--text);
  background:
    radial-gradient(80% 22% at 78% 12%, rgba(245, 193, 73, .25), transparent 68%),
    radial-gradient(52% 12% at 86% 36%, rgba(255, 212, 114, .19), transparent 69%),
    radial-gradient(95% 26% at 35% 24%, rgba(138, 95, 22, .14), transparent 74%),
    var(--page-bg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* 参考图的静态黑金光束与稀疏星点：不用闪烁动图，避免背景干扰入口内容。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 104% 24% at 116% 12%, rgba(255, 230, 161, .67), transparent 60%),
    radial-gradient(ellipse 65% 15% at 109% 26%, rgba(249, 193, 67, .37), transparent 69%),
    linear-gradient(145deg, transparent 0 47%, rgba(255, 215, 109, .025) 52%, rgba(255, 231, 164, .21) 55%, rgba(250, 191, 63, .075) 59%, transparent 66%),
    linear-gradient(145deg, transparent 0 56%, rgba(255, 227, 149, .08) 58%, transparent 62%),
    radial-gradient(circle at 72% 18%, rgba(255, 232, 159, .8) 0 2px, transparent 3.2px),
    radial-gradient(circle at 64% 40%, rgba(255, 221, 126, .56) 0 1px, transparent 2px),
    radial-gradient(circle at 29% 43%, rgba(255, 218, 109, .4) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 55%, rgba(255, 231, 149, .48) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 49% 70%, rgba(255, 214, 107, .31) 0 2px, transparent 4px),
    linear-gradient(180deg, #050505 0%, #070605 30%, #050505 72%, #030303 100%);
  opacity: .96;
  transform-origin: 82% 13%;
  animation: reference-gold-ambient 13s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 36% 9% at 93% 17%, rgba(255, 227, 146, .57), transparent 74%),
    radial-gradient(ellipse 23% 8% at 71% 46%, rgba(255, 220, 129, .13), transparent 72%),
    radial-gradient(circle at 60% 51%, rgba(255, 225, 141, .27) 0 4px, transparent 10px),
    radial-gradient(circle at 69% 57%, rgba(255, 216, 111, .22) 0 7px, transparent 16px),
    linear-gradient(90deg, transparent 0 17%, rgba(255, 217, 121, .035) 35%, rgba(255, 235, 171, .53) 50%, rgba(255, 217, 121, .035) 65%, transparent 83%) 0 35% / 100% 2px no-repeat,
    linear-gradient(145deg, transparent 0 64%, rgba(255, 227, 149, .14) 67%, rgba(255, 212, 98, .04) 72%, transparent 78%);
  transform-origin: 74% 31%;
  animation: reference-gold-sheen 10s ease-in-out infinite alternate;
}

body > * {
  position: relative;
  z-index: 1;
}

/* 顶部动态 Banner：仍由后台 banner_bg 提供图片，只重塑容器与文字表现。 */
.sjb {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.52 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto 18px;
  padding: 42px 18px 34px;
  border: 0;
  border-radius: 0 0 28px 28px;
  background-image: url("/assets/images/banner-black-gold-soft-light-20261022.webp") !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .52), inset 0 -28px 34px rgba(0, 0, 0, .5);
}

.sjb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 65% at 50% 34%, transparent 0 36%, rgba(0, 0, 0, .2) 70%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .04) 44%, rgba(0, 0, 0, .56));
  pointer-events: none;
}

.sjb::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 58%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 159, .08) 13%, #ffe7a0 50%, rgba(255, 233, 159, .08) 87%, transparent);
  box-shadow: 0 0 12px rgba(255, 214, 103, .85), 0 0 30px rgba(240, 175, 55, .48);
  pointer-events: none;
}

.sjb h1,
.sjb h3 {
  width: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .88), 0 0 16px rgba(255, 220, 127, .25);
}

.sjb h1 {
  margin: 0;
  color: var(--gold-strong);
  font-size: clamp(34px, 10.3vw, 61px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .025em;
  -webkit-text-stroke: 1px rgba(255, 246, 210, .25);
}

.sjb h3 {
  margin: 18px 0 0;
  color: #fff5d7;
  font-size: clamp(13px, 3.55vw, 20px);
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: .035em;
}

/* 奖杯位于上半区，保留标题与副标题原文并下移到暗部安全区。 */
.sjb h1,
.sjb h3 {
  transform: translateY(43px);
}

/* 所有分类均沿用后台输出顺序与内容；仅重做网格、标题与入口卡片。 */
.app-desktop {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px 8px;
  margin: 0 auto 18px;
  padding: 0;
  list-style: none;
  background: transparent;
}

.app-desktop + br {
  display: none;
}

.app-title {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: 4px 10px 8px;
  list-style: none;
  color: var(--text);
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
  text-align: left;
}

.cat-main-title {
  display: block;
  color: var(--gold-strong);
  font-size: clamp(20px, 5vw, 29px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .72), 0 0 14px rgba(238, 194, 82, .18);
}

.cat-sub-title {
  display: block;
  margin-top: 4px;
  color: #f4e2b1;
  font-size: clamp(12px, 3.2vw, 17px);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: .02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.app-item {
  min-width: 0;
  min-height: clamp(68px, 19.5vw, 108px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: clamp(5px, 1.35vw, 8px) 2px clamp(6px, 1.4vw, 9px);
  overflow: hidden;
  list-style: none;
  cursor: pointer;
  text-align: center;
  color: var(--gold);
  border: 1px solid rgba(255, 227, 143, .12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(55, 55, 55, .96), rgba(27, 27, 27, .98) 57%, rgba(17, 17, 17, .99)),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 9px 16px rgba(0, 0, 0, .36);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.app-item:hover,
.app-item:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(255, 224, 135, .62);
  background: linear-gradient(145deg, #45413a, #24221e 60%, #151515);
  box-shadow: inset 0 1px 0 rgba(255, 248, 218, .12), 0 11px 20px rgba(0, 0, 0, .48), 0 0 14px rgba(226, 174, 62, .12);
}

.app-item:active {
  transform: translateY(0) scale(.985);
}

.app-icon {
  display: grid;
  place-items: center;
  width: clamp(30px, 8.4vw, 46px);
  height: clamp(30px, 8.4vw, 46px);
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 139, .38);
  border-radius: 50%;
  background: #0b0b0b;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .67), 0 5px 12px rgba(0, 0, 0, .58), inset 0 0 10px rgba(255, 214, 102, .12);
}

.app-icon img,
.app-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  object-fit: cover;
}

.app-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  color: var(--gold) !important;
  font-size: clamp(9px, 2.55vw, 14px);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .94), 0 0 7px rgba(255, 213, 106, .22);
}

.app-name.is-pg-simulator-red {
  color: #ff4545 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .94), 0 0 7px rgba(255, 69, 69, .32);
}

.app-name.is-reference-red {
  color: #ed0202 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .94), 0 0 7px rgba(237, 2, 2, .30);
}

.app-name.is-reference-deep-blue {
  color: #1437c2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .94), 0 0 7px rgba(20, 55, 194, .34);
}

.app-name.is-reference-blue {
  color: #146eff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .94), 0 0 7px rgba(20, 110, 255, .34);
}

.app-name .title-line {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-name .title-line1 {
  font-weight: 850;
}

.app-name:not(.has-second-line) .title-line1 {
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
  line-height: 1.08;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-name .title-line2 {
  font-size: .82em;
  font-weight: 650;
  opacity: .92;
}

/* 首分类为主推广卡：不改变里面入口数量或链接，只将其做成参考图中的金边展示面板。 */
body > .sjb + .app-desktop {
  --promo-lift: clamp(54px, 16vw, 86px);
  gap: 2px;
  top: calc(-1 * var(--promo-lift));
  margin-top: 0;
  margin-bottom: calc(23px - var(--promo-lift));
  padding: 8px 10px 9px;
  border: 1px solid rgba(255, 230, 147, .88);
  border-radius: 22px;
  background:
    radial-gradient(circle at 67% 73%, rgba(255, 228, 149, .2) 0 5px, transparent 12px),
    radial-gradient(circle at 78% 55%, rgba(255, 215, 111, .11) 0 13px, transparent 28px),
    radial-gradient(ellipse 58% 82% at 78% 55%, rgba(153, 115, 39, .2), transparent 72%),
    linear-gradient(145deg, rgba(62, 61, 56, .96), rgba(24, 24, 23, .97) 56%, rgba(15, 15, 15, .99));
  box-shadow: inset 0 0 0 1px rgba(255, 247, 205, .13), 0 0 0 2px rgba(129, 91, 26, .22), 0 13px 24px rgba(0, 0, 0, .5), 0 0 26px rgba(229, 174, 57, .17);
}

body > .sjb + .app-desktop .app-title {
  padding: 0 6px;
}

body > .sjb + .app-desktop .app-item {
  width: 88%;
  justify-self: start;
  min-height: clamp(64px, 17.5vw, 96px);
  gap: 4px;
  padding: clamp(4px, 1.1vw, 6px) 2px clamp(5px, 1.15vw, 7px);
}

body > .sjb + .app-desktop .app-icon {
  width: clamp(30px, 8.2vw, 44px);
  height: clamp(30px, 8.2vw, 44px);
}

body > .sjb + .app-desktop .app-name {
  font-size: clamp(10px, 2.75vw, 15px);
}

/* 最末帮助区沿用原文与 VPN 链接，只将其收束为低调的黑金提示卡。 */
.app-desktop:last-of-type {
  margin-top: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 226, 142, .18);
  border-radius: 16px;
  background: rgba(21, 21, 21, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.app-desktop:last-of-type .app-title {
  padding: 2px 0;
  color: var(--gold) !important;
  font-size: clamp(13px, 3.4vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.55;
}

.app-desktop:last-of-type .app-title:first-child {
  margin-bottom: 4px;
  color: var(--gold-strong) !important;
  font-size: clamp(18px, 4.5vw, 24px) !important;
  font-weight: 850 !important;
}

.app-desktop:last-of-type a {
  color: var(--gold-strong) !important;
  text-decoration-color: rgba(255, 227, 143, .6);
}

/* 分享功能与交互完全保留，只将视觉统一为黑金主题。 */
#msw-share-dock {
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

#msw-share-fab {
  padding: 11px 16px !important;
  border: 1px solid rgba(255, 226, 139, .6) !important;
  background: linear-gradient(135deg, #7b5820, #d7aa4c 52%, #8d6528) !important;
  color: #201606 !important;
  font-size: 15px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .44), 0 0 14px rgba(231, 181, 72, .24) !important;
}

#msw-share-collapse {
  height: 41px !important;
  margin-left: 5px !important;
  border: 1px solid rgba(255, 226, 139, .34) !important;
  background: #201b13 !important;
  color: var(--gold) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .35) !important;
}

#msw-share-overlay {
  background: rgba(4, 4, 4, .77) !important;
}

#msw-share-dialog {
  border: 1px solid rgba(255, 224, 137, .36) !important;
  background: linear-gradient(145deg, #292720, #151515 72%) !important;
  color: var(--text) !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .66) !important;
}

#msw-share-title,
#msw-share-label,
#msw-share-platform-title {
  color: var(--gold-strong) !important;
}

#msw-share-subtitle,
.msw-share-option {
  color: #e2d4b1 !important;
}

#msw-share-close {
  background: #39342a !important;
  color: var(--gold) !important;
}

#msw-share-text {
  border-color: rgba(255, 224, 137, .22) !important;
  background: #111 !important;
  color: #e9ddb9 !important;
}

#msw-copy-btn {
  background: linear-gradient(135deg, #7b5820, #d7aa4c 52%, #8d6528) !important;
  color: #211706 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34) !important;
}

#msw-share-divider {
  background: rgba(255, 226, 139, .16) !important;
}

.msw-share-icon {
  border: 1px solid rgba(255, 229, 151, .18);
  box-shadow: 0 7px 13px rgba(0, 0, 0, .34) !important;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  html {
    background: #030303;
  }

  body {
    max-width: 590px;
    padding-left: 8px;
    padding-right: 8px;
    box-shadow: 0 0 55px rgba(0, 0, 0, .56);
  }

  #msw-share-dock {
    right: max(18px, calc(50% - 282px)) !important;
  }
}

@media (max-width: 390px) {
  body {
    padding-left: 6px;
    padding-right: 6px;
  }

  .app-desktop {
    gap: 7px 6px;
  }

  .app-item {
    border-radius: 11px;
    gap: 5px;
  }

  body > .sjb + .app-desktop {
    padding: 9px 7px 10px;
    border-radius: 18px;
  }
}

/* 参考图中的流光为缓慢呼吸，不做高频跳闪。 */
@keyframes reference-gold-ambient {
  0% {
    opacity: .82;
    transform: scale(1) translate3d(0, 0, 0);
  }
  55% {
    opacity: 1;
    transform: scale(1.035) translate3d(-.45%, .15%, 0);
  }
  100% {
    opacity: .9;
    transform: scale(1.015) translate3d(.2%, -.15%, 0);
  }
}

@keyframes reference-gold-sheen {
  0% {
    opacity: .58;
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1.025) translate3d(-.35%, .2%, 0);
  }
}

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