/* ============================================================
   康喜乐商城 · 统一设计系统 v1
   ------------------------------------------------------------
   目标：统一字号/间距/圆角/阴影/组件结构，消除"按顺序堆积"感
   原则：一个尺度体系、一套层级、一种呼吸感
   ============================================================ */

/* ============ 1. 尺度体系（8pt 栅格）============ */
:root{
  /* 间距：全部用 4 的倍数 */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* 圆角：只有 4 档 */
  --r-sm:8px;    /* 小元素：标签、输入框 */
  --r-md:14px;   /* 中元素：卡片内块 */
  --r-lg:20px;   /* 大元素：卡片 */
  --r-xl:28px;   /* 特大：首屏卡、弹层 */
  --r-full:999px;/* 胶囊 */

  /* 字号：6 档，明确层级 */
  --t-xs:11px;   /* 辅助说明 */
  --t-sm:12.5px; /* 正文小 */
  --t-md:14px;   /* 正文 */
  --t-lg:16px;   /* 小标题 */
  --t-xl:20px;   /* 区块标题 */
  --t-2xl:26px;  /* 页面标题 */
  --t-3xl:34px;  /* 数字重点 */

  /* 字重：3 档 */
  --w-n:400; --w-m:600; --w-b:800;

  /* 行高 */
  --lh-t:1.25; --lh-n:1.65; --lh-r:1.85;

  /* 颜色层级 */
  --c-ink:#15191f;      /* 主文字 */
  --c-ink2:#5a6270;     /* 次文字 */
  --c-ink3:#9aa3b0;     /* 辅助文字 */
  --c-line:#e9ecf1;     /* 分割线 */
  --c-bg:#f6f7f9;       /* 页面底 */
  --c-card:#ffffff;     /* 卡片底 */
  --c-surface:#f1f3f7;  /* 浅块底 */
  --c-brand:#a91f2e;
  --c-brand-soft:#f9ecee;

  /* 阴影：3 档，越高级越淡越散 */
  --sh-1:0 1px 2px rgba(21,25,31,.04);
  --sh-2:0 2px 6px rgba(21,25,31,.05), 0 8px 20px -6px rgba(21,25,31,.06);
  --sh-3:0 4px 12px rgba(21,25,31,.06), 0 20px 44px -16px rgba(21,25,31,.14);
}

/* ============ 2. 页面容器（统一左右留白）============ */
.ds-page{max-width:760px;margin:0 auto;padding:0 var(--s-4)}
@media(min-width:821px){ .ds-page{max-width:880px} }

/* ============ 3. 页面头部（所有页面统一）============ */
.ds-head{
  padding:var(--s-6) var(--s-4) var(--s-4);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
}
.ds-head-main{min-width:0;flex:1}
.ds-eyebrow{
  font-size:var(--t-xs);font-weight:var(--w-m);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-ink3);margin-bottom:var(--s-2);
}
.ds-title{
  font-size:var(--t-2xl);font-weight:var(--w-b);line-height:var(--lh-t);
  letter-spacing:-.02em;color:var(--c-ink);
}
.ds-sub{
  font-size:var(--t-sm);color:var(--c-ink3);margin-top:var(--s-2);
  line-height:var(--lh-r);max-width:52ch;
}
.ds-head-action{flex:0 0 auto}

/* 返回链接样式 */
.ds-back{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-size:var(--t-sm);color:var(--c-ink2);margin-bottom:var(--s-3);
  transition:color .18s;
}
.ds-back:hover{color:var(--c-brand)}

/* ============ 4. 区块标题（统一）============ */
.ds-sec{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-3);margin-bottom:var(--s-3);padding:0 var(--s-4)}
.ds-sec-t{font-size:var(--t-lg);font-weight:var(--w-b);letter-spacing:-.01em;color:var(--c-ink)}
.ds-sec-a{font-size:var(--t-sm);color:var(--c-ink3)}

/* ============ 5. 卡片（3 种规格）============ */
.ds-card{
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.ds-card-pad{padding:var(--s-5)}
.ds-card + .ds-card{margin-top:var(--s-3)}

/* 列表卡（无边框，靠分隔线）*/
.ds-list{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.ds-row{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--c-line-2, #f2f4f7)}
.ds-row:last-child{border-bottom:0}

/* ============ 6. 数据块（统一数字排版）============ */
.ds-stats{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){ .ds-stats{grid-template-columns:repeat(4,1fr)} }
.ds-stat{
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:var(--s-4) var(--s-4) var(--s-3);
}
.ds-stat-k{font-size:var(--t-xs);color:var(--c-ink3);letter-spacing:.04em}
.ds-stat-v{
  font-size:var(--t-xl);font-weight:var(--w-b);color:var(--c-ink);
  margin-top:var(--s-1);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ds-stat-d{font-size:var(--t-xs);color:var(--c-ink3);margin-top:2px}

/* ============ 7. 按钮（统一）============ */
.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:11px var(--s-5);border-radius:var(--r-md);
  font-size:var(--t-md);font-weight:var(--w-m);letter-spacing:.01em;
  background:var(--c-brand);color:#fff;border:0;cursor:pointer;
  transition:background .18s, box-shadow .18s, transform .12s;
  box-shadow:0 1px 2px rgba(169,31,46,.16);
}
.ds-btn:hover{background:#8f1a27;box-shadow:0 4px 14px -2px rgba(169,31,46,.28)}
.ds-btn:active{transform:translateY(1px)}
.ds-btn--ghost{background:var(--c-surface);color:var(--c-ink2);box-shadow:none}
.ds-btn--ghost:hover{background:#e8ebf1}
.ds-btn--line{background:#fff;border:1px solid var(--c-line);color:var(--c-ink2);box-shadow:none}
.ds-btn--line:hover{border-color:#d6dae2;background:#fafbfc}
.ds-btn--block{display:flex;width:100%}
.ds-btn--sm{padding:7px 14px;font-size:var(--t-sm);border-radius:var(--r-sm)}

/* ============ 8. 空状态（统一）============ */
.ds-empty{
  text-align:center;padding:var(--s-12) var(--s-6);
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
}
.ds-empty-ic{
  width:56px;height:56px;margin:0 auto var(--s-4);border-radius:50%;
  background:var(--c-surface);display:grid;place-items:center;color:var(--c-ink3);
}
.ds-empty-t{font-size:var(--t-md);font-weight:var(--w-m);color:var(--c-ink2)}
.ds-empty-d{font-size:var(--t-sm);color:var(--c-ink3);margin-top:var(--s-2);line-height:var(--lh-r)}

/* ============ 9. 标签 / 徽章（统一）============ */
.ds-tag{
  display:inline-flex;align-items:center;gap:var(--s-1);
  padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--t-xs);font-weight:var(--w-m);letter-spacing:.02em;
  background:var(--c-surface);color:var(--c-ink2);
}
.ds-tag--brand{background:var(--c-brand-soft);color:var(--c-brand)}
.ds-tag--green{background:#ebf5f0;color:#1d7a4d}
.ds-tag--gold{background:#faf5e9;color:#96702a}
.ds-tag--blue{background:#eef3fa;color:#33578f}

/* ============ 10. 页脚留白（统一）============ */
.ds-bottom-space{height:var(--s-12)}

/* ============ 11. 响应式收敛 ============ */
@media(max-width:420px){
  :root{ --t-2xl:22px; --t-3xl:28px; }
  .ds-head{padding:var(--s-5) var(--s-4) var(--s-3)}
  .ds-card-pad{padding:var(--s-4)}
  .ds-row{padding:var(--s-3) var(--s-4)}
}