/* Pink-Blue-White mobile H5 theme — App Store inspired layout */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --pb-blue: #5B8DEF;
  --pb-blue-dark: #3B6FD9;
  --pb-blue-light: #EBF2FF;
  --pb-pink: #F472B6;
  --pb-pink-light: #FDF2F8;
  --pb-white: #FFFFFF;
  --pb-bg: #F8FAFF;
  --pb-border: #E8EDF5;
  --pb-text: #1E293B;
  --pb-text-muted: #64748B;
  --pb-shadow: 0 2px 12px rgba(91, 141, 239, 0.1);
  --pb-radius: 14px;
}

html, body {
  background-color: var(--pb-bg) !important;
  background-image: linear-gradient(180deg, var(--pb-pink-light) 0%, var(--pb-bg) 30%, var(--pb-blue-light) 100%) !important;
  background-size: 100% 100% !important;
}

body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Sticky header — frosted glass like iOS App Store */
.top1 {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--pb-border) !important;
  box-shadow: 0 1px 8px rgba(91, 141, 239, 0.08) !important;
}

/* Hero banner — rounded card style */
.top-img.swiper-container {
  border-radius: var(--pb-radius) !important;
  margin: 8px 12px 0 !important;
  overflow: hidden !important;
  box-shadow: var(--pb-shadow) !important;
}

.swiper-pagination-bullet-active {
  background: var(--pb-pink) !important;
}

/* Announcement bar */
.top-text {
  background: var(--pb-white) !important;
  border-radius: 20px !important;
  margin: 10px 12px 0 !important;
  padding: 0 12px !important;
  box-shadow: 0 1px 6px rgba(244, 114, 182, 0.1) !important;
  border: 1px solid var(--pb-border) !important;
}

.top-text-notice {
  color: var(--pb-text-muted) !important;
}

/* Main content card */
.index-middle-body {
  background-color: var(--pb-white) !important;
  border-top: none !important;
  border-radius: var(--pb-radius) var(--pb-radius) 0 0 !important;
  margin: 12px 12px 0 !important;
  box-shadow: var(--pb-shadow) !important;
  padding-bottom: 2.4rem !important;
}

/* Section title */
.middle-title {
  border-left: 4px solid var(--pb-pink) !important;
  padding-left: 8px !important;
}

.middle-title-text {
  color: var(--pb-text) !important;
  font-weight: 600 !important;
}

/* App list — card rows like App Store */
.platform {
  background-color: var(--pb-white) !important;
  border-bottom: 1px solid var(--pb-border) !important;
  margin: 0 8px !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 4px rgba(91, 141, 239, 0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.platform:active {
  transform: scale(0.98) !important;
}

.platform-title-text {
  color: var(--pb-text) !important;
  font-weight: 600 !important;
}

.platform-title-intro {
  color: var(--pb-text-muted) !important;
}

.platform-icon {
  border-radius: 12px !important;
}

.platform-icon img {
  border-radius: 12px !important;
  image-rendering: auto !important;
  box-shadow: 0 2px 8px rgba(91, 141, 239, 0.2) !important;
}

/* Install buttons — pill style */
.platform-buttont,
.platform-buttont1 {
  background: linear-gradient(135deg, var(--pb-blue-light), var(--pb-white)) !important;
  border: 1.5px solid var(--pb-blue) !important;
  border-radius: 20px !important;
  color: var(--pb-blue-dark) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(91, 141, 239, 0.15) !important;
}

.platform-buttont1 {
  border-color: var(--pb-pink) !important;
  color: var(--pb-pink) !important;
  background: linear-gradient(135deg, var(--pb-pink-light), var(--pb-white)) !important;
}

/* Bottom tab bar — iOS style */
.footer {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid var(--pb-border) !important;
  box-shadow: 0 -2px 12px rgba(91, 141, 239, 0.08) !important;
}

.navbar-desc {
  color: var(--pb-text-muted) !important;
  font-weight: 500 !important;
}

.navbar-desc.s {
  color: var(--pb-blue) !important;
  font-weight: 600 !important;
}

/* Category dropdown */
#menu a {
  color: var(--pb-text) !important;
  font: 600 14px/16px 'Inter', 'PingFang SC', sans-serif !important;
  letter-spacing: 0 !important;
}

#menu li:hover > a {
  color: var(--pb-pink) !important;
}

#menu ul {
  border: 1px solid var(--pb-border) !important;
  box-shadow: var(--pb-shadow) !important;
  border-radius: 12px !important;
  background: var(--pb-white) !important;
  overflow: hidden !important;
}

#menu ul a {
  color: var(--pb-text) !important;
}

#menu ul li:hover a {
  background: var(--pb-blue-light) !important;
  color: var(--pb-blue-dark) !important;
}

/* Search bar — pill input like major app stores */
div.searchDiv {
  border-radius: 24px !important;
  background-color: var(--pb-bg) !important;
  border: 1.5px solid var(--pb-border) !important;
  overflow: hidden !important;
}

div.searchDiv input {
  color: var(--pb-text) !important;
  font-family: inherit !important;
}

div.searchDiv button {
  background: linear-gradient(135deg, var(--pb-blue), var(--pb-blue-dark)) !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}

/* Side floating nav */
.right_nav li {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--pb-border) !important;
  box-shadow: var(--pb-shadow) !important;
}

.right_nav li:hover {
  background: var(--pb-blue-light) !important;
}

/* Modal / popup */
.hongbao-body {
  border-radius: var(--pb-radius) !important;
}

.hongbao-body-b2 {
  background: linear-gradient(135deg, var(--pb-blue), var(--pb-pink)) !important;
  border-radius: 24px !important;
}

/* User center card overrides */
.aui-super-box {
  background: linear-gradient(135deg, var(--pb-blue) 0%, var(--pb-pink) 100%) !important;
  border-radius: var(--pb-radius) !important;
  box-shadow: 0 8px 24px rgba(91, 141, 239, 0.25) !important;
}

.aui-super-nav {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 12px 12px 0 0 !important;
}

.aui-more-eay button {
  background: var(--pb-white) !important;
  color: var(--pb-blue-dark) !important;
  font-weight: 600 !important;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #0F172A !important;
    background-image: linear-gradient(180deg, #1E1B4B 0%, #0F172A 50%, #172554 100%) !important;
  }

  .top1 {
    background: rgba(15, 23, 42, 0.9) !important;
    border-bottom-color: rgba(91, 141, 239, 0.2) !important;
  }

  .index-middle-body {
    background-color: rgba(30, 41, 59, 0.95) !important;
  }

  .middle-title-text,
  .platform-title-text {
    color: #F1F5F9 !important;
  }

  .platform {
    background-color: rgba(51, 65, 85, 0.6) !important;
    border-bottom-color: rgba(91, 141, 239, 0.15) !important;
  }

  .platform-title-intro {
    color: #94A3B8 !important;
  }

  .footer {
    background: rgba(15, 23, 42, 0.95) !important;
    border-top-color: rgba(91, 141, 239, 0.2) !important;
  }

  .navbar-desc {
    color: #94A3B8 !important;
  }

  .navbar-desc.s {
    color: var(--pb-blue) !important;
  }

  div.searchDiv {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(91, 141, 239, 0.3) !important;
  }
}