/* ========================================
 * mini-align.css
 * H5 样式 1:1 对齐小程序 miniprogram UI
 * 覆盖策略：仅通过 CSS 选择器覆盖，不改动任何 DOM/JS
 * ======================================== */

/* ========== 1. 全局设计 Token 对齐 ========== */

:root {
  /* 主题色 — 严格对齐 app.wxss */
  --mp-primary: #1DB9A6;
  --mp-primary-light: #EBF8F6;
  --mp-primary-border: #A8DDD2;
  --mp-primary-dark: #149A85;
  --mp-success: #5BAE7A;
  --mp-warning: #28C9B3;
  --mp-danger: #E04A46;

  /* 文字色阶 — 严格对齐 app.wxss */
  --mp-text-primary: #2D3A3A;
  --mp-text-secondary: #5A6B6B;
  --mp-text-placeholder: #98A8A8;
  --mp-text-disabled: #C8D4D4;

  /* 背景色阶 — 严格对齐 app.wxss */
  --mp-bg-page: #F0FAF8;
  --mp-bg-card: #FFFFFF;
  --mp-bg-overlay: rgba(45, 58, 58, 0.5);

  /* 圆角规范 — 严格对齐 app.wxss (rpx/2 = px) */
  --mp-radius-primary: 8px;      /* 16rpx */
  --mp-radius-secondary: 6px;    /* 12rpx */
  --mp-radius-card: 6px;         /* 12rpx */
  --mp-radius-input: 4px;        /* 8rpx  */
  --mp-radius-avatar: 50%;
  --mp-radius-full: 9999px;

  /* 间距规范 — 严格对齐 app.wxss */
  --mp-spacing-page: 16px;       /* 32rpx */
  --mp-spacing-module: 24px;     /* 48rpx */
  --mp-spacing-list: 12px;       /* 24rpx */
  --mp-spacing-card-y: 12px;     /* 24rpx */
  --mp-spacing-card-x: 16px;     /* 32rpx */

  /* 阴影规范 — 严格对齐 app.wxss */
  --mp-shadow-sm: 0 1px 4px rgba(29, 185, 166, 0.08);
  --mp-shadow-md: 0 2px 8px rgba(29, 185, 166, 0.12);
  --mp-shadow-lg: 0 4px 16px rgba(29, 185, 166, 0.16);
}

/* ========== 2. 页面容器对齐 ========== */

.page {
  background: var(--mp-bg-page);
  color: var(--mp-text-primary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ========== 3. 底部 Tab 导航栏对齐 ========== */

.bottom-tab-bar {
  max-width: 430px;
  margin: 0 auto;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  padding: 0 0 env(safe-area-inset-bottom);
}

.btab-inner {
  height: 53px;
  border-radius: 26px;
  margin: 0 12px 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 0.5px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 4px 16px rgba(29, 185, 166, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.btab-item {
  padding: 7px 0 5px;
}

.btab-icon-img {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}

.btab-text {
  font-size: 12px;
  color: var(--mp-text-placeholder);
  font-weight: 400;
}

.btab-item.active .btab-text {
  color: var(--mp-primary);
  font-weight: 600;
}

.btab-item.publish-tab .btab-icon-img {
  animation: none;
  filter: drop-shadow(0 0 5px rgba(255, 185, 0, 0.5));
}

/* ========== 4. 首页头部渐变区对齐 ========== */

.header-gradient {
  background: linear-gradient(180deg, #1DB9A6 0%, #2DD4BF 40%, #F0FAF8 100%);
  margin: 0 -16px;
  padding: env(safe-area-inset-top, 16px) 16px 16px;
  box-sizing: border-box;
}

/* ========== 5. 搜索栏对齐 ========== */

.search-bar {
  padding: 10px 0 0;
  min-height: 48px;
}

.search-box {
  background: #fff;
  border-radius: 4px;
  padding: 9px 14px;
  box-shadow: 0 2px 8px rgba(29, 185, 166, 0.25);
}

.search-box .search-input {
  font-size: 13px;
  color: #333;
  height: 21px;
  line-height: 21px;
}

.search-box .search-icon {
  width: 17px;
  height: 17px;
  margin-right: 8px;
}

.district-pill {
  height: 24px;
  border-radius: 10px;
  padding: 0 8px;
  background: #f0faf8;
  border: 0.75px solid rgba(29, 185, 166, 0.25);
}

.district-pill-text {
  font-size: 12px;
  color: var(--mp-primary);
}

.search-inner-btn {
  padding: 5px 13px;
  font-size: 12px;
  border-radius: 10px;
  background: #f0faf8;
  border: 0.75px solid rgba(29, 185, 166, 0.25);
}

.search-inner-btn:active {
  background: #e6f5f1;
}

/* 搜索统计数据 */
.search-stats .stats-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
}

.search-stats .stats-val {
  font-size: 10px;
  color: #FF2D2D;
  font-weight: 700;
}

.search-stats .stats-sep {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
}

/* ========== 6. 区县选择面板对齐 ========== */

.district-panel {
  background: linear-gradient(135deg, #1AB89C, #22C4AD);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 10px rgba(29, 185, 166, 0.3);
}

.district-option .option-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.district-option .option-hint {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
}

.district-option.active .option-name {
  color: #fff;
  font-weight: 700;
}

.district-option.active::after {
  width: 80%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

/* ========== 7. 分类图标网格对齐 ========== */

/* ★ 分类宫格容器高度：改用 vw 跟随屏幕缩放（原写死 90px，在大屏上留白过多把分页圆点顶远）
   内容实际约 18.25vw（图标9.6+间距0.8+文字≈4.91+内距1.34），19.5vw 留约 1.25vw 余量，不会裁切 */
.category-swiper {
  height: 19.5vw;
}

.category-swiper-item {
  height: 19.5vw;
}

.cat-item {
  width: 25%;
  padding: 4px 2px;
}

.cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.cat-text {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.cat-name {
  font-size: 11px;
  color: var(--mp-text-primary);
  font-weight: 500;
}

.badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 6px 6px 6px 0;
}

/* 分页指示器 */
.category-dot {
  width: 7px;
  height: 7px;
}

.category-dot.active {
  width: 21px;
  border-radius: 3px;
}

/* ========== 8. Tab 栏对齐 ========== */

.tab-bar {
  background: #fff;
  border-radius: 6px 6px 0 0;
  padding-top: 2px;
}

.tab-item {
  padding: 7px 14px;
  font-size: 15px;
  color: var(--mp-text-secondary);
  min-height: 28px;
  line-height: 1;
}

.tab-item.active {
  color: var(--mp-primary) !important;
  font-weight: 700 !important;
}

.tab-item.active::after {
  bottom: 5px;
  width: 18px;
  height: 3px;
  background: var(--mp-primary);
  border-radius: 1.5px;
}

/* ========== 9. 信息卡片对齐 ========== */

.info-list {
  padding: 5px 0 env(safe-area-inset-bottom);
}

.info-item {
  background: #fff;
  margin-bottom: 3px;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 0.5px 2px rgba(29, 185, 166, 0.08);
  gap: 2px;
  min-height: 50px;
}

.info-item.is-top {
  background: linear-gradient(135deg, #EDF9F7, #EAF7F4);
  border: 1px solid var(--mp-primary-border);
  box-shadow: 0 2px 9px rgba(29, 185, 166, 0.12);
}

.info-item.is-super-top {
  background: linear-gradient(135deg, #E8FCF9, #DFFBF7);
  border: 1px solid transparent;
  background-image:
    linear-gradient(#E8FCF9, #DFFBF7),
    linear-gradient(135deg, #2EF0CC, #14B89F);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 2px 9px rgba(46, 240, 204, 0.15);
}

/* 卡片内容区 */
.info-main {
  gap: 3px;
}

.title {
  font-size: 14px;
  color: var(--mp-text-primary);
  line-height: 1.4;
}

.title.title-super {
  color: #0A9585;
  font-weight: 800;
}

.category-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.4;
}

.top-badge {
  float: left;
  margin: 2px 5px 0 0;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.top-badge.super {
  background: linear-gradient(135deg, #FF3B30, #D60000);
}

.top-badge.normal {
  background: linear-gradient(135deg, #FF5252, #FF2D2D);
}

/* 超级置顶角标叠加在图片左上角 */
.top-badge.thumb-badge {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  margin: 0;
  z-index: 2;
  border-radius: 0 0 4px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.core-info-inline {
  height: 19px;
  font-size: 13px;
}

.image-icon {
  width: 14px;
  height: 14px;
}

.image-icon::before {
  width: 8px;
  height: 7px;
  border: 1px solid var(--mp-primary);
  border-radius: 2px;
}

.image-icon::after {
  width: 3px;
  height: 3px;
  background: var(--mp-primary);
}

.time-in-core {
  font-size: 10px;
  color: var(--mp-text-placeholder);
}

.core-info-item {
  font-size: 14px;
  color: var(--mp-text-secondary);
  font-weight: 500;
}

.core-divider {
  font-size: 9px;
  color: var(--mp-primary-border);
}

.core-address {
  font-size: 14px;
  color: var(--mp-text-secondary);
  font-weight: 500;
}

/* 车辆卡片 */
.info-item.car-card {
  padding: 8px 16px;
  gap: 8px;
}

.car-thumb {
  width: 120px;
  height: 93px;
  border-radius: 5px;
}

.car-thumb-count {
  font-size: 10px;
  padding: 0.5px 5px;
  border-radius: 4px;
}

.car-title {
  font-size: 14px;
}

.car-title.title-super {
  color: #0A9585;
  font-weight: 800;
}

.car-attr {
  font-size: 14px;
  color: var(--mp-text-secondary);
}

.car-attr-sep {
  font-size: 9px;
  color: var(--mp-primary-border);
}

.car-address {
  font-size: 10px;
  color: var(--mp-text-placeholder);
}

.car-time {
  font-size: 10px;
  color: var(--mp-text-placeholder);
}

.car-time-inline {
  font-size: 10px;
  line-height: 19px;
}

/* ========== 10. 刷新按钮对齐 ========== */

.refresh-arrow {
  width: 28px;
  height: 28px;
}

@keyframes refresh-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ========== 11. 回到顶部按钮对齐 ========== */

.back-top-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  border: 0.75px solid rgba(29, 185, 166, 0.25);
}

.back-top-arrow {
  font-size: 18px;
  color: var(--mp-primary);
  font-weight: 800;
}

/* ========== 12. 底部操作栏对齐 ========== */

.home-action-bar {
  padding: 10px 0 12px;
  gap: 16px;
}

.action-btn-icon {
  padding: 8px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(29, 185, 166, 0.08);
  font-size: 14px;
  color: var(--mp-primary);
}

/* ========== 13. 空状态对齐 ========== */

.empty-state {
  padding: 50px 20px;
  min-height: 200px;
}

.empty-text {
  font-size: 14px;
  color: var(--mp-text-placeholder);
}

.empty-state-icon {
  font-size: 32px;
  opacity: 0.6;
}

/* ========== 14. 加载更多对齐 ========== */

.load-more-area {
  padding: 12px 0 20px;
  gap: 6px;
}

.load-more-text {
  font-size: 12px;
  color: var(--mp-text-secondary);
}

.loading-spinner-sm {
  width: 16px;
  height: 16px;
  border: 1px solid #E8F8F5;
  border-top-color: var(--mp-primary);
}

/* ========== 15. 弹窗对齐 ========== */

.modal-mask {
  background: rgba(0, 0, 0, 0.55);
}

.modal-content {
  border-radius: 16px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}

.modal-mask.modal-center .modal-content {
  border-radius: 12px;
  width: 88%;
  max-width: 310px;
  padding: 0;
}

.modal-header {
  padding: 14px 16px;
  border-bottom: 0.5px solid #F2F2F7;
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}

.modal-body {
  padding: 12px 16px 16px;
}

.modal-close {
  font-size: 22px;
  color: #bbb;
  padding: 4px;
}

.refresh-sub {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.refresh-info-card {
  background: #F0FAF8;
  border-radius: 6px;
  padding: 9px;
  font-size: 12px;
  color: var(--mp-primary);
  margin-bottom: 12px;
}

.modal-btns {
  gap: 10px;
}

.btn-skip {
  height: 44px;
  background: #f5f5f5;
  color: #666;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
}

.btn-buy {
  height: 44px;
  background: linear-gradient(135deg, #1DB9A6, #28C9B3);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 3px 11px rgba(29, 185, 166, 0.35);
}

/* ========== 16. 弹窗服务号对齐 ========== */

.oa-service-card {
  border-radius: 12px;
  padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
}

.oa-service-close {
  top: 12px;
  right: 12px;
  font-size: 22px;
  color: var(--mp-text-placeholder);
}

.oa-service-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mp-text-primary);
}

.oa-service-desc {
  font-size: 13px;
  color: #E53935;
}

.oa-service-qr {
  width: 170px;
  height: 182px;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid #E8EDED;
}

.oa-service-confirm {
  background: linear-gradient(135deg, #1DB9A6, #16A085);
  font-size: 15px;
  border-radius: 22px;
  padding: 11px 0;
}

.oa-service-confirm.mine-svc-confirm {
  background: #fff;
  color: var(--mp-primary);
  border: 0.5px solid var(--mp-primary);
}

/* ========== 17. 详情页对齐 ========== */

/* 详情页头部 */
.detail-header {
  padding: 13px 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

.detail-back {
  width: 44px;
  height: 44px;
}

.detail-header-title {
  font-size: 16px;
  font-weight: 600;
}

/* 发布者栏 */
.detail-publisher-bar {
  gap: 12px;
}

.detail-publisher-avatar {
  width: 36px;
  height: 36px;
}

.detail-publisher-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-text-primary);
}

.detail-publisher-time {
  font-size: 12px;
  color: var(--mp-text-placeholder);
}

.detail-publisher-actions {
  gap: 16px;
}

.detail-action-btn {
  padding: 5px 10px;
  font-size: 10px;
  color: var(--mp-primary);
}

.detail-action-icon {
  width: 18px;
  height: 16px;
}

/* 图片网格 */
.detail-img-grid {
  gap: 5px;
  padding: 10px 18px;
}

.detail-img-item {
  height: 120px;
  border-radius: 5px;
}

/* 标题区 */
.detail-title-section {
  padding: 14px;
  margin-bottom: 7px;
}

.detail-title-text {
  font-size: 20px;
  font-weight: 600;
}

.detail-meta-row {
  font-size: 12px;
  gap: 7px;
}

/* 详细信息卡片 */
.detail-extra-card {
  margin: 5px 0 13px;
  padding: 15px;
}

.detail-extra-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 13px;
}

.detail-extra-row {
  padding: 6px 0;
}

.detail-extra-label {
  font-size: 15px;
  color: var(--mp-text-secondary);
  width: 105px;
}

.detail-extra-value {
  font-size: 15px;
  color: var(--mp-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 地图卡片 */
.detail-map-card {
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid var(--mp-primary);
}

.detail-map-title {
  font-size: 16px;
  font-weight: 700;
}

.detail-map-desc {
  font-size: 12px;
  color: #555;
}

/* 安全提示 */
.detail-safety {
  padding: 10px 15px;
  background: var(--mp-primary-light);
  border-left: 3px solid var(--mp-warning);
}

.detail-safety-title {
  font-size: 13px;
  font-weight: 600;
}

.detail-safety-desc {
  font-size: 12px;
}

/* 联系方式卡片 */
.detail-contact-card {
  padding: 15px;
}

.detail-contact-title {
  font-size: 16px;
  font-weight: 700;
}

.detail-contact-name {
  font-size: 17px;
  color: #06AE56;
  font-weight: 600;
}

.detail-contact-val {
  font-size: 19px;
  font-weight: 700;
}

.detail-contact-tip {
  font-size: 13px;
}

/* 底部操作栏 */
.detail-bottom-actions {
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 4px));
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}

.detail-btm-btn {
  width: 47px;
  height: 40px;
  font-size: 12px;
  color: #666;
}

.detail-btm-icon {
  width: 25px;
  height: 25px;
}

.detail-btm-call {
  height: 40px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
}

.detail-btm-call.call-btn {
  background: linear-gradient(135deg, #1DB9A6, #17A08D);
  box-shadow: 0 2px 6px rgba(29, 185, 166, 0.3);
}

.detail-btm-call.sms-btn {
  background: linear-gradient(135deg, #3DBAA8, #2E9E8D);
}

.detail-bottom-spacer {
  height: 80px;
}

/* 详情页正文卡片 + 品牌页脚（放大比例，对齐小程序可读性） */
.detail-content-card {
  margin: 12px 0;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.detail-content-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.detail-content-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mp-text-secondary);
}
.detail-content-body {
  font-size: 15px;
  color: var(--mp-text-secondary);
  line-height: 1.8;
}
.detail-brand-footer {
  margin-top: 16px;
  padding-top: 12px;
}
.detail-brand-line {
  font-size: 13px;
  margin-bottom: 4px;
}
.detail-brand-link {
  font-size: 13px;
}
/* 胶囊标签放大 */
.detail-capsule-tag {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 5px;
}
/* 置顶横幅放大 */
.detail-top-banner-inner {
  padding: 10px 15px;
}
.banner-icon {
  font-size: 22px;
}
.banner-title {
  font-size: 15px;
}
.banner-desc {
  font-size: 13px;
}
.banner-tag {
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 6px;
}
/* 内联置顶徽章放大 */
.detail-top-inline,
.dt-inline-top {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
}
/* 发布者头像放大 */
.detail-publisher-avatar {
  width: 40px;
  height: 40px;
}
.detail-publisher-avatar-placeholder {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
/* 相关推荐放大 */
.detail-related-title {
  font-size: 15px;
  padding: 0 14px 8px;
}
.detail-related-item {
  padding: 10px 14px;
  margin: 0 8px 3px;
}
.rel-title-merged {
  font-size: 15px;
}
.rel-info {
  font-size: 13px;
}
.rel-info .rel-first {
  font-size: 14px;
}

/* ========== 18. 我的页对齐 ========== */

#page-mine {
  background: var(--mp-bg-page);
  padding: 0 16px calc(107px + env(safe-area-inset-bottom));
}

/* 头部渐变 */
.mine-header-gradient {
  background: linear-gradient(180deg, #1DB9A6 0%, #2DD4BF 55%, #E0F7F4 100%);
  padding: calc(env(safe-area-inset-top, 0) + 29px) 16px 27px;
}

/* 用户卡片 */
.mine-user-card {
  gap: 19px;
  margin-bottom: 10px;
}

.mine-avatar {
  width: 64px;
  height: 64px;
}

.mine-nickname {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.mine-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* 积分栏 */
.mine-points-bar {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
}

.mine-points-num {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.mine-points-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.mine-sign-btn {
  font-size: 12px;
  border-radius: 24px;
  padding: 8px 19px;
}

.mine-earn-btn {
  font-size: 12px;
  border-radius: 24px;
  padding: 8px 19px;
}

/* 功能网格 */
.mine-grid-section {
  background: #fff;
  margin: -11px 0 16px;
  border-radius: 21px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04);
}

.mine-grid-item {
  padding: 24px 0 19px;
}

.mine-grid-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin-bottom: 8px;
}

.mine-grid-text {
  font-size: 12px;
  color: var(--mp-text-secondary);
}

/* 列表菜单 */
.mine-list-section {
  border-radius: 21px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04);
}

.mine-list-item {
  padding: 21px 24px;
}

.mine-li-left {
  font-size: 15px;
}

.mine-li-icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
}

.mine-li-arrow {
  font-size: 15px;
}

/* 通知开关 */
.mine-notify-row {
  padding: 13px 16px;
  border-radius: 10px;
  box-shadow: 0 0 1px 6px rgba(0, 0, 0, 0.04);
}

/* ========== 19. Toast 对齐 ========== */

.global-toast {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 12px 30px;
  border-radius: 12px;
  font-size: 16px;
  max-width: 80%;
}

/* ========== 20. 加载遮罩对齐 ========== */

.global-loading {
  background: rgba(255, 255, 255, 0.85);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(29, 185, 166, 0.2);
  border-top-color: var(--mp-primary);
}

/* ========== 21. 分类页对齐 ========== */

.category-grid-4 {
  max-width: 100%;
  padding: 6px 5px;
}

/* ========== 22. 广告轮播对齐 ========== */

.ad-swiper-wrapper {
  border-radius: 16px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
}

.ad-swiper-content {
  padding: 16px 21px;
  min-height: 85px;
}

.ad-swiper-title {
  font-size: 15px;
  font-weight: 600;
}

.ad-swiper-desc {
  font-size: 12px;
}

/* ========== 23. 顶部导航栏对齐 ========== */

.sticky-anchor {
  background: #f0faf8;
  padding: 0 16px;
  margin: 0 -16px;
}

.sticky-anchor.float-under {
  top: 25px;
  z-index: 99;
}

/* ========== 24. 骨架屏对齐 ========== */

.skeleton-card {
  padding: 7px 14px;
  border-radius: 12px;
}

.skeleton-thumb {
  width: 96px;
  height: 75px;
  border-radius: 5px;
}

.skeleton-title {
  height: 15px;
}

.skeleton-text {
  height: 11px;
}

/* ========== 25. 网络错误对齐 ========== */

.network-error {
  padding: 50px 20px;
}

.network-error-icon {
  font-size: 36px;
}

.network-error-text {
  font-size: 14px;
  color: #666;
}

.network-error-btn {
  padding: 8px 25px;
  border-radius: 21px;
  font-size: 14px;
}

/* ========== 26. 审核状态提示条对齐 ========== */

.detail-review-banner {
  padding: 13px 21px;
  gap: 10px;
  box-shadow: none;
}

.detail-review-banner.pending {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-left: 4px solid #F39C12;
}

.detail-review-banner.rejected {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  border-left: 4px solid #E04A46;
}

.review-title {
  font-size: 14px;
  font-weight: 600;
}

.review-desc {
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========== 27. 置顶标识栏对齐 ========== */

.detail-top-banner {
  background: linear-gradient(135deg, #1DB9A6, #28C9B3);
  padding: 10px 14px;
}

.banner-icon {
  font-size: 24px;
}

.banner-title {
  font-size: 14px;
  font-weight: 700;
}

.banner-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.banner-tag {
  font-size: 11px;
  padding: 1px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.3);
}

/* ========== 28. Meta 行动按钮对齐 ========== */

.meta-action-btn {
  font-size: 11px;
  color: var(--mp-text-placeholder);
  border: 1px solid var(--mp-border);
  padding: 2px 7px;
  border-radius: 4px;
}

.meta-action-btn.fav-active {
  color: #28C9B3;
  border-color: #28C9B3;
}

.meta-action-btn.meta-report {
  color: #E04A46;
  border-color: #f8c4c4;
}

/* ========== 29. 举报/分享底部弹出层对齐 ========== */

.report-sheet,
.share-sheet {
  border-radius: 21px 21px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

.report-sheet-title,
.share-sheet-title {
  font-size: 15px;
  font-weight: 600;
  padding: 21px;
}

.report-item,
.share-sheet-item {
  padding: 14px 16px;
  font-size: 15px;
}

.report-item.report-cancel,
.share-sheet-cancel {
  margin-top: 8px;
  border-top: 8px solid #f5f5f5;
}

/* ========== 30. 多车 TAB 栏对齐 ========== */

.car-tab-bar {
  margin: 16px 32px 0;
  background: #fff;
  border-radius: 13px 13px 0 0;
}

.car-tab-item {
  font-size: 13px;
  color: var(--mp-text-placeholder);
  padding: 10px 19px;
}

.car-tab-item.active {
  color: var(--mp-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--mp-primary);
}

/* ========== 31. 相关推荐对齐 ========== */

.related-section {
  background: var(--mp-bg-page);
  margin-bottom: 5px;
}

.related-tab-bar {
  border-radius: 6px 6px 0 0;
}

.rel-tab-item {
  font-size: 15px;
  color: var(--mp-text-secondary);
  padding: 7px 14px;
}

.rel-tab-item.active {
  color: var(--mp-primary);
  font-weight: 700;
}

.rel-tab-item.active::after {
  width: 18px;
  height: 3px;
  background: var(--mp-primary);
  border-radius: 1.5px;
}

/* ========== 32. 社群弹窗卡片对齐 ========== */

.community-card {
  border-radius: 12px;
  padding: 18px 14px calc(14px + env(safe-area-inset-bottom));
}

.community-title {
  font-size: 17px;
  font-weight: 700;
}

.co-row-card {
  background: #F8FAFA;
  border-radius: 10px;
  padding: 12px;
  gap: 10px;
}

.co-row-qr {
  width: 80px;
  height: 80px;
  border-radius: 6px;
}

.co-row-name {
  font-size: 14px;
  font-weight: 600;
}

.co-row-desc {
  font-size: 12px;
  color: var(--mp-text-secondary);
}

.co-row-hint {
  font-size: 10px;
  color: var(--mp-primary);
}

/* ========== 33. 分类标签对齐 ========== */

.post-tag-super {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  background: #FFF8E1;
  color: #F39C12;
}

.post-tag-top {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--mp-primary-light);
  color: var(--mp-primary);
}

.post-tag-cat {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
}

/* ========== 34. 联系客服弹窗对齐 ========== */

.h5-mask-card {
  border-radius: 20px;
}

.h5-mask-title {
  font-size: 19px;
  font-weight: 700;
}

.h5-mask-close {
  padding: 13px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 28px;
  margin-top: 8px;
}

/* ========== 35. 分类页搜索对齐 ========== */

#page-category .search-box {
  border-radius: 8px;
}

/* ========== 36. 页面头部返回栏对齐 ========== */

.page-header {
  padding: 13px 16px;
  box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
}

/* ========== 37. 字体渲染对齐 ========== */

body,
.page,
.page * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
}

/* ========== 38. 点击反馈对齐 ========== */

.info-item:active,
.cat-item:active,
.grid-item:active,
.mine-list-item:active,
.tab-item:active {
  opacity: 0.92;
  transform: scale(0.985);
}

/* ========== 39. 安全区适配 ========== */

.bottom-tab-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#page-mine {
  padding-bottom: calc(107px + env(safe-area-inset-bottom, 0px));
}

.detail-bottom-spacer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========== 40. 骨架屏对齐 ========== */

.skeleton-list {
  padding: 5px 0;
}

.skeleton-card {
  margin-bottom: 2px;
}

/* ========== 41. 广告位详情页对齐 ========== */

.ad-title-wrap {
  padding: 16px 20px;
  gap: 12px;
}

.ad-title-text {
  font-size: 20px;
  font-weight: 800;
}

.ad-desc-box {
  margin: 12px 12px 8px;
  padding: 14px 14px 14px 18px;
  border-left: 5px solid #1E88E5;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-radius: 2px;
}

.ad-desc-text {
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========== 42. 企业认证徽章对齐 ========== */

.enterprise-badge,
.merchant-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #2D8CF0, #8A5CF6);
  background-size: 300% 300%;
  animation: badgeShimmer 3s ease infinite;
}

/* ========== 43. 置顶方案卡片对齐 ========== */

.top-card {
  border: 1px solid #eef0f0;
  border-radius: 9px;
  padding: 12px;
  margin-bottom: 8px;
}

.top-card.card-selected {
  border-color: var(--mp-primary);
  box-shadow: 0 2px 9px rgba(29, 185, 166, 0.18);
  background: #f4fbfa;
}

.top-card-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(29, 185, 166, 0.4);
}

.top-row {
  border: 1px solid #eef0f0;
  border-radius: 7px;
  padding: 10px 11px;
}

.top-row.row-on {
  border-color: var(--mp-primary);
  background: #f4fbfa;
  box-shadow: 0 2px 7px rgba(29, 185, 166, 0.16);
}

/* ========== 44. 价格汇总条对齐 ========== */

.price-summary {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.price-total {
  font-size: 16px;
}

/* ========== 45. 筛选项对齐 ========== */

.job-filter-btn {
  background: var(--mp-primary-light);
  border-radius: 15px;
  padding: 6px 0;
}

.job-filter-btn.active {
  background: linear-gradient(135deg, #1DB9A6, #28C9B3);
}

/* ========== 46. 关注服务号通知卡片对齐 ========== */

.oa-notify-card {
  padding: 14px 12px;
  background: linear-gradient(135deg, #E8FAF6, #F2FCF9);
  border-radius: 8px;
  border: 1px solid #C9EFE6;
}

.oa-notify-name {
  font-size: 14px;
  color: #1C7C6E;
}

.oa-notify-desc {
  font-size: 12px;
  color: #6B8A84;
}

.oa-notify-btn {
  min-height: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  border-radius: 21px;
  background: linear-gradient(135deg, #1DB9A6, #16A085);
}

/* ========== 47. 发布页标签对齐 ========== */

.tag-primary {
  background: var(--mp-primary-light);
  color: var(--mp-primary);
  border: 0.5px solid var(--mp-primary-border);
  border-radius: 6px;
}

/* ========== 48. ICP 备案对齐 ========== */

.icp-footer {
  font-size: 11px;
  color: var(--mp-text-placeholder);
  padding: 27px 21px 13px;
}