/* =========================================================
   湘里情·异业联盟 H5 全站响应式基线
   手机优先（沿用各页原有内联样式），平板 / PC 渐进增强。
   引入：<link rel="stylesheet" href="responsive.css?v=2">
   断点：≥600px · ≥768px 平板 · ≥1024px PC · ≥1280px 宽屏
   说明：各页内容块普遍带 16px 侧内边距，故只做“限宽/居中/多列”，
        不改原配色与组件视觉，保证不破坏既有设计。
   ========================================================= */

.app, .page { width: 100%; margin-left: auto; margin-right: auto; }
.tabbar, .cta, .submit-bar, .bottom-bar, .city-panel { width: 100%; margin-left: auto; margin-right: auto; }

/* ===================== ≥600px ===================== */
@media (min-width: 600px) {
  .app, .page,
  .tabbar, .cta, .submit-bar, .bottom-bar, .city-panel { max-width: 560px; }
}

/* ===================== ≥768px 平板 ===================== */
@media (min-width: 768px) {
  .app, .page,
  .tabbar, .cta, .submit-bar, .bottom-bar, .city-panel { max-width: 720px; }

  body { font-size: 15px; }

  /* 首页金刚区：5 列 → 10 列 */
  .kingkong { grid-template-columns: repeat(10, 1fr); row-gap: 18px; padding: 18px 12px 14px; }
  .kk-icon { width: 52px; height: 52px; }
  .kk-name { font-size: 13px; }

  /* 首页商圈地图：3 列 → 4 列 */
  .map-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .map-cell { padding: 14px 8px; }

  /* 介绍页权益：2 列 → 4 列 */
  .benefit-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* 商家列表 / 订单列表：单列 → 两列 */
  .merchant-list, .order-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }

  /* 横向统计条、快捷入口：限宽居中，避免在宽容器里被拉得过散 */
  .overview, .stats-row, .stats, .quick-actions,
  .income-row, .share-section, .chart-section,
  .filter-bar, .filter-tabs {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 表单：限宽居中 */
  .form-section, .modal { max-width: 640px; margin-left: auto; margin-right: auto; }
  .form-input, .form-textarea,
  input[type=text], input[type=tel], input[type=number], select {
    font-size: 15px; padding: 13px 14px;
  }

  /* 搜索框不横跨整屏 */
  .search-box { max-width: 640px; margin-left: auto; margin-right: auto; }

  /* 卡片圆角更舒展 */
  .card, .income-card, .share-card, .info-card, .ov-card { border-radius: 16px; }
}

/* ===================== ≥1024px PC ===================== */
@media (min-width: 1024px) {
  .app, .page,
  .tabbar, .cta, .submit-bar, .bottom-bar, .city-panel { max-width: 980px; }

  body { background: #EDF0F4; }
  .app, .page { background: #F7F8FA; box-shadow: 0 0 44px rgba(0,0,0,.07); }

  /* 首页金刚区一排 10 个；商圈 6 列 */
  .kingkong { grid-template-columns: repeat(10, 1fr); }
  .map-grid { grid-template-columns: repeat(6, 1fr); }

  /* 列表两列（沿用 768 档），统计与入口横向排布并限宽 */
  .overview, .stats-row, .stats, .quick-actions,
  .income-row, .share-section, .chart-section,
  .member-section, .commission-section, .trend, .records,
  .filter-bar, .filter-tabs, .tab-bar {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 快捷入口在 PC 上允许换行成两行，图标区不被压扁 */
  .quick-actions { flex-wrap: wrap; }
  .quick-actions .qa-item { flex: 1 1 30%; min-width: 150px; }

  /* 表单 / 弹窗 / 详情卡限宽 */
  .form-section, .modal, .discount-card, .info-card,
  .user-card, .qr-section, .tip-section, .store-card {
    max-width: 680px; margin-left: auto; margin-right: auto;
  }

  .rec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ===================== ≥1280px 宽屏 ===================== */
@media (min-width: 1280px) {
  .app, .page,
  .tabbar, .cta, .submit-bar, .bottom-bar, .city-panel { max-width: 1140px; }

  /* 列表升级三列 */
  .merchant-list, .order-list { grid-template-columns: repeat(3, 1fr); }

  .overview, .stats-row, .stats, .quick-actions,
  .income-row, .share-section, .chart-section,
  .member-section, .commission-section, .trend, .records,
  .filter-bar, .filter-tabs, .tab-bar { max-width: 1040px; }

  /* 快捷入口：3 个一排 */
  .quick-actions .qa-item { flex: 1 1 30%; }
}

/* ===================== ≥1440px 封顶 ===================== */
@media (min-width: 1440px) {
  .app, .page,
  .tabbar, .cta, .submit-bar, .bottom-bar, .city-panel { max-width: 1200px; }
}

/* ========== 扫码核销：全屏取景场景，不套用居中书签 ========== */
.scan-area, .amount-stage { max-width: 100% !important; box-shadow: none !important; }
@media (min-width: 768px) {
  body:has(.scan-area), body:has(.amount-stage) { background: #f5f5f5; }
}

/* ========== 尊重系统“减少动态效果”偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   共享基线层（可访问性 + 状态组件）
   说明：只做“可读性 / 点击区 / 状态反馈”，不改各页原有配色与视觉。
   配色如需统一，只改下面 :root 的 token 即可全站生效。
   ========================================================= */
:root {
  --xlq-brand: #E53935;
  --xlq-brand-2: #FF6B35;
  --xlq-brand-grad: linear-gradient(135deg, #E53935, #FF6B35);
  --xlq-text: #333333;
  --xlq-text-muted: #666666;   /* 白底对比度约 5.7:1，满足 WCAG AA(4.5:1) */
  --xlq-line: #F0F0F0;
  --xlq-bg: #F7F8FA;
  --xlq-radius: 12px;
  --xlq-tap: 44px;             /* 最小可点击尺寸 */

  /* —— 视觉动效 token（视频导演方案并入，仅定义待用，不改现有渲染）—— */
  /* 品牌扩展 */
  --c-warm-bg: #FFF0EB;
  --c-card: #FFFFFF;
  /* 圆角三档 + 胶囊 */
  --r-sm: 8px;                 /* 标签 / 图片 / 输入框 */
  --r-md: 12px;                /* 卡片 / 面板 */
  --r-lg: 16px;                /* 大卡片 / Banner / 弹层 */
  --r-pill: 999px;
  /* 阴影两档（扁平优先） */
  --shadow-card: 0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --shadow-pop: 0 8px 24px rgba(17,24,39,.12);
  --shadow-brand: 0 4px 12px rgba(229,57,53,.20);
  /* 留白四档 */
  --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --pad-side: 16px;
  /* 图标尺寸 */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  /* 动效时长（上限 0.4s）/ 缓动 */
  --dur-fast: .15s; --dur-base: .25s; --dur-slow: .4s;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1. 次要文字统一到 --xlq-text-muted ---------- */
.empty-state, .loading-state, .empty-text, .loading, .section-more, .map-more,
.card-dist, .rating-count, .price-unit, .card-addr, .card-spec,
.merchant-category, .ti-label, .m-ti-label, .filter-tab, .dash-sub,
.ov-label, .stat-label, .merch-time, .com-time, .chart-label,
.info-label, .form-hint, .com-icon-label, .role-desc, .upload-box .text,
.list-time, .order-time, .about-text, .rule-text, .tips-text, .muted {
  color: var(--xlq-text-muted);
}

/* ---------- 2. 点击区 ≥ 44px ---------- */
.search-box, .search-bar { min-height: var(--xlq-tap); }

.header-back, .back-btn, .dash-share-btn, .nav-back,
.hero-back, .scan-back, .act-btn {
  width: var(--xlq-tap); height: var(--xlq-tap);
  min-width: var(--xlq-tap); min-height: var(--xlq-tap);
  display: inline-flex; align-items: center; justify-content: center;
}

.area-tab, .filter-item, .filter-tab, .section-more, .map-more, .map-cell,
.city-option, .pick-item, .tab-item, .seg-item, .chip,
.add-btn, .dash-act-btn, .filter-chip, .order-btn, .intro-btn, .top-btn {
  min-height: var(--xlq-tap);
  display: inline-flex; align-items: center; justify-content: center;
}

.ti, .m-ti { min-height: calc(var(--xlq-tap) + 8px); padding-top: 6px; padding-bottom: 6px; }

/* ========== 首页卡片流（#listContainer）PC 多列 ========== */
@media (min-width: 768px) {
  #listContainer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  #listContainer > .card, #listContainer > .skeleton-card { margin-bottom: 0; }
  #listContainer > .state-box { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  #listContainer { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 3. 骨架屏（加载态） ---------- */
.skeleton { position: relative; overflow: hidden; background: #EEF1F5; border-radius: 8px; }
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: xlqSkeleton 1.2s ease-in-out infinite;
}
@keyframes xlqSkeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-card { background: #fff; border-radius: var(--xlq-radius); padding: 14px; margin-bottom: 12px; }
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w30 { width: 30%; }
.skeleton-line.h88 { height: 88px; }
.skeleton-row { height: 14px; margin-bottom: 10px; }

/* ---------- 4. 状态块（空态 / 失败态 / 重试） ---------- */
.state-box { text-align: center; padding: 40px 20px; color: var(--xlq-text-muted); }
.state-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.state-title { font-size: 14px; color: var(--xlq-text); font-weight: 600; }
.state-desc { font-size: 12px; color: var(--xlq-text-muted); margin-top: 6px; line-height: 1.6; }
.retry-btn {
  margin-top: 16px; padding: 0 24px; min-height: var(--xlq-tap);
  border: 1px solid var(--xlq-brand); color: var(--xlq-brand); background: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.state-box.inline { padding: 20px 12px; }
.state-box.inline .state-icon { font-size: 32px; }

/* ---------- 5. 键盘焦点可见 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [onclick]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--xlq-brand); outline-offset: 2px; border-radius: 6px;
}

/* ---------- 6. PC 端状态块留白 ---------- */
@media (min-width: 1024px) {
  .state-box { padding: 64px 24px; }
}

/* ---------- 7. 高价值反馈动效（视频导演方案，仅 transform/opacity，受减少动效约束） ---------- */
@keyframes xlqPopIn {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: xlqPopIn .35s var(--ease-spring) both; }

@keyframes xlqPulseOnce {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pulse-once { animation: xlqPulseOnce .5s var(--ease-spring) 1 both; }

@keyframes xlqFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.fade-up { animation: xlqFadeUp .3s var(--ease-out) both; }