/* ==========================================================================
   鞋纺通三期 · 共享设计系统
   ========================================================================== */

:root {
  /* 主题色 */
  --primary: #1B5BFF;
  --primary-light: #E8F0FF;
  --primary-dark: #1648CC;
  --primary-gradient: linear-gradient(135deg, #1B5BFF 0%, #4F8AFF 100%);
  --primary-gradient-soft: linear-gradient(135deg, #E8F0FF 0%, #F0F7FF 100%);

  /* 功能色 */
  --orange: #FF7A45;
  --orange-light: #FFEDD5;
  --green: #22C55E;
  --green-light: #DCFCE7;
  --red: #F5365C;
  --red-light: #FEE2E2;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --yellow: #FCD34D;
  --yellow-light: #FEF3C7;
  --cyan: #0EA5E9;
  --cyan-light: #E0F2FE;

  /* 中性色 */
  --bg: #F4F6FB;
  --bg-2: #FAFBFC;
  --card: #FFFFFF;
  --text: #1A1F2E;
  --text-2: #374151;
  --text-sub: #6B7280;
  --text-light: #9CA3AF;
  --border: #EAECF2;
  --border-light: #F0F2F5;

  /* 字号 */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 32px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 14px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(20, 30, 80, .04);
  --shadow: 0 2px 8px rgba(20, 30, 80, .06);
  --shadow-md: 0 4px 14px rgba(20, 30, 80, .08);
  --shadow-lg: 0 10px 30px rgba(20, 30, 80, .12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   全局重置
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; outline: none; border: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* 移动端点击响应优化（1012-8） */
a, button, [role="button"], input, textarea, select, .chip, .xft-pick, .xft-switch, .xft-opt, .xft-share-item, .rec-tab, .b-nav li {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
input, textarea, select { user-select: auto; }
a:active, button:active, [role="button"]:active, .chip:active, .xft-pick:active, .xft-opt:active, .xft-share-item:active, .rec-tab:active {
  opacity: .85;
  transform: scale(0.985);
  transition: transform .08s, opacity .08s;
}

/* ==========================================================================
   按钮
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--red); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-link { background: transparent; color: var(--primary); padding: 4px 8px; }
.btn-link:hover { background: var(--primary-light); }
.btn-sm { padding: 4px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 12px 24px; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* ==========================================================================
   标签 / 徽章
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
}
.tag-primary { background: var(--primary-light); color: var(--primary); }
.tag-orange { background: var(--orange-light); color: var(--orange); }
.tag-green { background: var(--green-light); color: var(--green); }
.tag-red { background: var(--red-light); color: var(--red); }
.tag-purple { background: var(--purple-light); color: var(--purple); }
.tag-yellow { background: var(--yellow-light); color: #B45309; }
.tag-cyan { background: var(--cyan-light); color: var(--cyan); }
.tag-gray { background: var(--bg-2); color: var(--text-sub); }
.tag-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 2px;
}

/* ==========================================================================
   卡片
   ========================================================================== */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   表单
   ========================================================================== */
.form-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  color: var(--text);
  background: #fff;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--primary); }
.form-input::placeholder { color: var(--text-light); }

.form-row { margin-bottom: var(--sp-3); }
.form-row label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-sub);
  margin-bottom: 6px;
}

/* ==========================================================================
   头像
   ========================================================================== */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-xs); }

/* ==========================================================================
   表格
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  background: var(--bg-2);
  text-align: left;
  padding: 12px;
  color: var(--text-sub);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
.table tr:hover td { background: var(--bg-2); }
.table .num { text-align: right; }

/* ==========================================================================
   实用工具
   ========================================================================== */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.text-primary { color: var(--primary); }
.text-orange { color: var(--orange); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-sub { color: var(--text-sub); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-bold { font-weight: 600; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   滚动条
   ========================================================================== */
.scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-area::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* 皮革材质实拍图占位(C 端批量替换) */
.xft-photo{width:100%;height:100%;object-fit:cover;display:block;}