* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    /* 新增：让网页背景铺满全屏并固定 */
    html {
      height: 100%;
      background: image-set(url('/assets/img/bg-390.webp') 1x, url('/assets/img/bg-780.webp') 2x) no-repeat center center fixed;
      background-size: cover;
    }

    body {
      /* 原本的白色背景改为 85% 透明度的白色，这样既能看清背景图，又不会影响文字阅读 */
      background-color: rgba(255, 255, 255, 0.38);
      max-width: 480px;
      min-height: 100%;
      margin: 0 auto;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      /* 阴影加深一点，让主体更突出 */
      padding-bottom: 80px;
      /* 如果您使用的是 Safari 或者想兼容 iOS，可以加上背景模糊（可选） */
      /* backdrop-filter: blur(5px); */
    }

    /* 顶部导航栏 */
    header {
      background: linear-gradient(135deg, #d97bcd, #9c5ce8);
      color: white;
      padding: 10px 15px;
      height: 60px;
      position: relative;
      display: flex;
      align-items: center;
    }

    /* 左侧 Logo 样式 */
    .header-logo {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      z-index: 2;
    }



    /* 文字和右侧新图标的包裹层，用来整体居中 */
    .title-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      /* 保证文字和图标垂直居中对齐 */
      gap: 6px;
      /* 文字和图标之间的间距 */
      z-index: 1;
    }

    /* 标题文字 */
    .header-title {
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
      color: white;
    }

    /* 右侧新增的图标样式（如果是 Emoji） */
    .new-icon {
      font-size: 18px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
      /* 加点阴影更立体 */
    }

    /* 如果右侧新增的图标是图片，使用这个样式 */
    .new-icon-img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    /* 横幅容器 */
    .banner {
      height: auto;
      min-height: 190px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      margin: 15px;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      background: #222;
    }

    /* 背景图片 */
    .banner img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      z-index: 1;
    }

    /* 底部的半透明渐变遮罩，让文字无比清晰 */
    .banner::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
      z-index: 2;
    }

    /* 文字样式 */
    .banner-text {
      position: relative;
      z-index: 3;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: 100%;
    }

    .banner-text .top-text {
      color: #e0e0e0;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: none;
    }

    .banner-text .main-text {
      color: #ffd700;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.3px;
      line-height: 1.45;
      text-transform: none;
      white-space: pre-wrap;
      word-break: break-word;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.4);
    }

    /* 动态公告栏样式 */
    .marquee-container {
      background: #fff0f5;
      color: #d97bcd;
      padding: 8px 0;
      margin: 0 15px 15px;
      border-radius: 8px;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      font-size: 13px;
      font-weight: bold;
      border: 1px solid #ffd1dc;
    }

    /* 跑马灯动画 */
    .marquee-text {
      display: inline-block;
      animation: marquee 12s linear infinite;
    }

    @keyframes marquee {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    /* 在爱心上方加个提示气泡 */
    .center-item::before {
      content: '¡Empieza aquí!';
      position: absolute;
      top: -35px;
      background: #d97bcd;
      color: white;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 10px;
      white-space: nowrap;
      animation: floatUp 2s infinite;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* 气泡的小尾巴 */
    .center-item::after {
      content: '';
      position: absolute;
      top: -12px;
      border-width: 5px;
      border-style: solid;
      border-color: #d97bcd transparent transparent transparent;
      animation: floatUp 2s infinite;
    }

    @keyframes floatUp {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }
    }

    /* ================= 城市筛选按钮区域 ================= */
    .city-filter {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 1px;
      background-color: #e0e0e0;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
      margin-bottom: 15px;
    }

    .city-filter button {
      width: 100%;
      border: none;
      padding: 14px 5px;
      font-size: 12px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      outline: none;
    }

    /* 每个城市专属的渐变背景色 */
    .city-filter button:nth-child(1) {
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    }

    .city-filter button:nth-child(2) {
      background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    }

    .city-filter button:nth-child(3) {
      background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    }

    .city-filter button:nth-child(4) {
      background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);
    }

    .city-filter button:nth-child(5) {
      background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    }

    .city-filter button:nth-child(6) {
      background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    }

    .city-filter button:nth-child(7) {
      background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    }

    .city-filter button:nth-child(8) {
      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    }

    .city-filter button:nth-child(9) {
      background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%);
    }

    .city-filter button:hover {
      filter: brightness(0.9);
      font-weight: bold;
    }

    .city-filter button.active {
      background: #d97bcd !important;
      color: white !important;
      font-weight: bold;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
    }

    .whatsapp-contact {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #d97bcd, #9c5ce8);
      color: white;
      text-decoration: none;
      padding: 12px 15px;
      margin: 0 15px 15px;
      border-radius: 12px;
      transition: transform 0.2s ease, box-shadow 0.2s;
      box-shadow: 0 4px 12px rgba(156, 92, 232, 0.4);
    }

    .whatsapp-contact:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(156, 92, 232, 0.6);
    }

    .btn-logo {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      /* 圆角矩形，看起来像 App 图标 */
      object-fit: cover;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      /* 添加阴影显得浮起来 */
      border: 1px solid rgba(255, 255, 255, 0.2);
      flex-shrink: 0;
    }

    .whatsapp-contact div {
      display: flex;
      flex-direction: column;
      line-height: 1.4;
      /* 稍微增加行高，让三行字不挤在一起 */
      gap: 2px;
      /* 文字之间留出一点点空隙 */
    }

    .whatsapp-contact strong {
      font-size: 15px;
      font-weight: 900;
    }

    .whatsapp-contact span {
      font-size: 12px;
      color: #fce7ff;
    }

    /* ================= 卡片网格布局 ================= */
    .profiles-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 0 15px 20px;
    }

    .profile-card {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
    }

    /* ================= 骨架屏（加载占位）动画 ================= */
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }


    .media-container {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      background: #f0f0f0;
    }

    .media-container img,
    .media-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 25%;
      display: block;
      background: #000;
    }

    .overlay-bottom {
      position: absolute;
      bottom: 8px;
      left: 8px;
      right: 8px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      pointer-events: none;
    }

    .stat-badge {
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(4px);
      color: #fff;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .stat-badge.bust {
      background: rgba(217, 123, 205, 0.85);
    }

    .profile-info {
      padding: 10px 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .desc-text {
      font-size: 12px;
      color: #333;
      font-weight: 600;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 31px;
    }

    .id-likes {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: #888;
      border-top: 1px dashed #eee;
      padding-top: 8px;
      margin-top: 2px;
    }

    .id-text {
      color: #555;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      /* 增加一点间距，让圆和编号分开 */
    }

    /* 新增：ID的黄色圆圈背景 */
    .id-badge {
      background-color: #ffcc00;
      /* 明亮的黄色 */
      color: #333;
      /* 深灰色文字 */
      font-size: 9px;
      /* 字体小一点 */
      font-weight: 900;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      /* 画成完美的圆 */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .likes {
      color: #ff4d79;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 2px;
      background: #fff0f3;
      padding: 2px 6px;
      border-radius: 10px;
    }

    .empty-msg {
      grid-column: 1 / -1;
      text-align: center;
      color: #999;
      padding: 40px 0;
      font-size: 14px;
    }

    .subpage {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 480px;
      height: 100%;
      background: white;
      z-index: 1000;
      display: none;
      flex-direction: column;
    }

    .subpage.open {
      display: flex;
    }

    .subpage-header {
      background: linear-gradient(135deg, #d97bcd, #9c5ce8);
      color: white;
      padding: 15px;
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 16px;
      font-weight: bold;
    }

    .subpage-header span {
      cursor: pointer;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.2);
    }

    .subpage-body {
      padding: 15px;
      overflow-y: auto;
      flex: 1;
    }

    .rating-summary {
      background: linear-gradient(135deg, #fde6f7, #efe6ff);
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .rating-summary .big-score {
      font-size: 36px;
      font-weight: 900;
      color: #9c5ce8;
      line-height: 1;
    }

    .rating-summary .rating-info {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #555;
    }

    .rating-summary .stars-line {
      color: #ffb400;
      font-size: 16px;
      letter-spacing: 1px;
    }

    .review-card {
      background: #f9f9f9;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px;
      font-size: 13px;
      border-left: 4px solid #d97bcd;
    }

    .review-card .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .review-card strong {
      color: #333;
      font-size: 13px;
    }

    .review-card .stars {
      color: #ffb400;
      font-size: 12px;
    }

    .review-card p {
      color: #555;
      margin-top: 5px;
      line-height: 1.4;
    }

    .review-card .review-date {
      color: #aaa;
      font-size: 11px;
      margin-top: 6px;
    }

    .help-item {
      background: #f9f9f9;
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 10px;
      font-size: 13px;
      cursor: pointer;
    }

    .help-item summary {
      font-weight: bold;
      color: #333;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .help-item summary::-webkit-details-marker {
      display: none;
    }

    .help-item summary::after {
      content: '+';
      font-size: 18px;
      color: #d97bcd;
    }

    .help-item[open] summary::after {
      content: '−';
    }

    .help-item p {
      margin-top: 8px;
      color: #555;
      line-height: 1.5;
    }

    /* ================= 底部导航栏 ================= */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 480px;
      height: 65px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
      /* 改为居中排列 */
      gap: 40px;
      /* 按钮之间的间距 */
      align-items: center;
      border-top: 1px solid #eee;
      z-index: 900;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }


    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #888;
      flex: 1;
      transition: transform 0.2s ease;
      filter: none !important;
      opacity: 1 !important;
      padding: 0 2px;
    }

    .nav-icon {
      font-size: 22px;
      margin-bottom: 3px;
    }

    .nav-text {
      font-size: 11px;
      font-weight: 500;
      white-space: nowrap;
    }

    /* ===== 中间按钮特殊处理 ===== */
    .center-item {
      position: relative;
      top: -12px;
    }

    .center-item .nav-icon {
      font-size: 34px;
      margin-bottom: 2px;
      filter: drop-shadow(0px 3px 6px rgba(217, 123, 205, 0.5));
      animation: heartbeat 1.5s infinite;
    }

    .center-item .nav-text {
      color: #d97bcd;
      font-weight: 900;
      font-size: 13.5px;
      text-shadow: 0 0 8px rgba(217, 123, 205, 0.5);
    }

    @keyframes heartbeat {
      0% {
        transform: scale(1);
      }

      14% {
        transform: scale(1.15);
      }

      28% {
        transform: scale(1);
      }

      42% {
        transform: scale(1.15);
      }

      70% {
        transform: scale(1);
      }
    }

    /* WhatsApp 专属图标样式 */
    .whatsapp-icon-wrapper {
      width: 22px;
      height: 22px;
      background-color: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 3px;
    }

    .whatsapp-icon-wrapper img {
      width: 33px;
      height: 33px;
      display: block;
    }

/* ============================================================
   模板修正段（源站缺陷修复，逐条对应审查报告）
   ============================================================ */

/* [FIX-1] 底部固定导航压住城市筛选：源站 body 已留 80px 下边距，这里不再动它。
   真正被压住的是首屏那个「¡Empieza aquí!」气泡（.center-item::before，top:-35px
   正好落在第三行城市按钮上），改成滚过一屏后才出现（见 app.js bindNavHint）。 */
.center-item::before,
.center-item::after {
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.nav-hint .center-item::before,
body.nav-hint .center-item::after {
  opacity: 1;
}

/* [FIX-5] 描述区写死高度，微信放大字号后被裁：改最小高度，行数限制保留 */
.desc-text {
  height: auto !important;
  min-height: 31px;
}

/* [FIX-14] 源站零响应式：≥768 放宽到 720 并改 3 列，≥1024 改 4 列。
   默认关闭 —— 默认值与源站逐像素一致（480 居中单列）。
   需要桌面/平板铺开时，后台把 layout_wide 打开，platform.js 会给 body 加
   .layout-wide，此时才生效。 */
@media (min-width: 768px) {
  body.layout-wide {
    max-width: 720px;
  }

  body.layout-wide .profiles-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  body.layout-wide .profiles-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* [FIX-7] 横屏（844×390）首屏只剩 banner：压缩 banner 与头部高度。
   同样挂在 .layout-wide 下，默认保持源站行为。 */
@media (max-height: 480px) and (orientation: landscape) {
  body.layout-wide .banner {
    min-height: 120px;
    max-height: 34vh;
    margin: 8px;
  }

  body.layout-wide header {
    padding: 4px 12px;
  }

  body.layout-wide .header-logo {
    width: 36px;
    height: 36px;
  }
}

/* iOS Safari：源站 .subpage 用 height:100%，在 fixed 元素上就是可视视口高度，
   本身没有 100vh 那个地址栏问题，这里不动它 —— 改了反而与源站不一致。 */

/* backdrop-filter 在低端机掉帧：不支持时退化为纯色 */
@supports not (backdrop-filter: blur(6px)) {
  .stat-badge,
  .bottom-nav {
    background: rgba(0, 0, 0, 0.72) !important;
  }
}

/* [FIX-11] 无障碍/省电：尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .marquee-text,
  .center-item::before,
  .center-item::after,
  .heart-icon,
  .nav-icon {
    animation: none !important;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* 桌面鼠标：源站只有 CTA 与城市按钮有 hover，卡片补抬升 */
@media (hover: hover) {
  .profile-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .profile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }
}

/* 图片未加载完成时的占位，避免 CLS */
.media-container {
  background: #f0f0f0;
}