/* ===== 基础样式 & 设计令牌 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* ---- 品牌色 ---- */
  --primary: #0b2545;        /* 主深蓝 */
  --primary-2: #14406f;      /* 深蓝亮阶 */
  --accent: #e23b3b;         /* 强调红（已售标记等） */
  --price: #e8580d;          /* 价格橙 */
  --price-2: #ff8a2b;

  /* ---- 中性色 ---- */
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1b2a3f;
  --text2: #6b7280;
  --text3: #9aa4b2;
  --line: #e6eaf1;
  --line-2: #f1f4f8;

  /* ---- 圆角刻度 ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --radius: 14px;            /* 兼容旧引用 */

  /* ---- 阴影：三层叠加（外发光环 + 柔光 + 主投影） ---- */
  --shadow-sm: 0 0 0 1px rgba(16, 32, 64, .03), 0 1px 3px rgba(16, 32, 64, .05);
  --shadow: 0 0 0 1px rgba(16, 32, 64, .04), 0 2px 6px rgba(16, 32, 64, .05), 0 6px 16px rgba(16, 32, 64, .06);
  --shadow-lg: 0 0 0 1px rgba(16, 32, 64, .05), 0 10px 24px rgba(16, 32, 64, .10);

  /* ---- 间距刻度（8px 基准） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---- 布局 ---- */
  --container: 1180px;       /* 桌面内容最大宽度 */
  --gutter: 16px;            /* 页面左右留白（按断点变化） */
  --tap: 44px;               /* 最小触控高度 */
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 15px; }
.muted { color: var(--text2); }
.hidden { display: none !important; }

/* ===== 通用容器（左右留白按屏幕变大，并适配全面屏安全区） ===== */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
}

/* ===== 空状态 ===== */
.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text2);
}
.empty .big { font-size: 44px; margin-bottom: 12px; }
.empty h3 { color: var(--text); margin-bottom: 6px; font-size: 17px; }

/* ===== 骨架屏 ===== */
.skeleton {
  background: linear-gradient(90deg, #edf0f4 25%, #f7f8fa 50%, #edf0f4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 10px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===== 通用标签 ===== */
.badge {
  display: inline-block; font-size: 12px; line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill); font-weight: 600;
}
.badge-on   { background: #e6f7ee; color: #128a4d; }
.badge-sold { background: #fdeaea; color: var(--accent); }
.badge-off  { background: #eef0f3; color: #8a919c; }

/* ============================================================
   响应式断点（统一口径，home.css / 各页面都按这套走）
   ≤560   小手机     单列、留白 14px
   561–768 手机/小平板 留白 16px
   769–1024 平板      留白 24px
   1025+   桌面      留白 32px，内容居中 1180px
   ============================================================ */
@media (max-width: 560px) {
  :root { --gutter: 14px; --container: 100%; }
}
@media (min-width: 561px) and (max-width: 768px) {
  :root { --gutter: 16px; --container: 100%; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --gutter: 24px; --container: 100%; }
}
@media (min-width: 1025px) {
  :root { --gutter: 32px; }
}