/* =============================================================
   小鳥优选 · 数字平台 UI  v4
   风格：参考创客云商（红色 + 品牌紫 + 浅灰白底）
   主红 #fc0324  品牌紫 #7c3aed→#a855f7  深紫 #4c1d95
   底色：#f5f5f5（页） / #fff（卡）
   字体：系统无衬线
   ============================================================= */
:root {
  /* 主色 - 红 */
  --primary: #fc0324;
  --primary-deep: #d9001f;
  --primary-soft: rgba(252,3,36,.08);
  --primary-grad: linear-gradient(90deg,#fc0324,#ff3a56);
  --primary-grad-v: linear-gradient(135deg,#fc0324,#ff5a3a);

  /* 品牌紫（吸顶/价格条/标签） */
  --brand-purple: #7c3aed;
  --brand-purple-2: #a855f7;
  --brand-purple-grad: linear-gradient(90deg,#7c3aed,#a855f7);
  --purple-deep: #4c1d95;
  --purple-grad: linear-gradient(90deg,#4c1d95,#7c3aed);

  /* 强调（兼容旧：原金色 accent 改红） */
  --accent: #fc0324;
  --accent-deep: #d9001f;
  --accent-soft: rgba(252,3,36,.08);
  --gold: #ff8c00;
  --pink: #f63a66;

  /* 兼容旧变量名（部分页面用 --night/--primary-tint） */
  --night: #4c1d95;
  --night-deep: #2e1065;
  --primary-tint: #a855f7;

  /* 中性 */
  --surface: #f5f5f5;
  --surface-variant: #fafafa;
  --surface-card: #ffffff;
  --outline: #f0f0f0;
  --outline-strong: #e5e5e5;
  --ink: #292929;
  --ink-soft: #333;
  --ink-muted: #999;
  --white: #fff;
  --error: #fc0324;
  --success: #00b578;

  /* 字体 - 系统无衬线 */
  --font-display: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;

  /* 圆角 */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* 阴影 - 更轻 */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 2px 10px rgba(0,0,0,.06);
  --shadow-lift: 0 6px 20px rgba(0,0,0,.10);

  /* 动效 */
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --ease-standard: cubic-bezier(.2,0,0,1);
  --d-fast: 160ms; --d-mid: 240ms;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; transition: opacity var(--d-fast) var(--ease-standard); }
a:active { opacity:.7; }
img { max-width:100%; display:block; }

.serif, .page-title { font-family: var(--font-display); letter-spacing: 0; }

/* =============================================================
   顶部品牌区（紫渐变）—— 替代原 .dao-hero
   ============================================================= */
.dao-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--brand-purple-grad);
  padding: 16px 16px 18px;
}
.dao-hero::before {
  content:""; position:absolute; right:-40px; top:-50px; width:200px; height:200px;
  border-radius:50%; background:rgba(255,255,255,.10); pointer-events:none;
}
.dao-hero::after {
  content:""; position:absolute; left:-50px; bottom:-60px; width:180px; height:180px;
  border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none;
}
.dao-hero .hero-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0; }
.dao-hero .hero-sub { font-size: 12px; color: rgba(255,255,255,.78); margin-top: 4px; letter-spacing: 0; }
.dao-hero .taiji-mark {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:#fff; color:var(--brand-purple); font-weight:700; font-size:18px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.dao-hero .taiji-mark img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dao-hero .hero-row { display:flex; align-items:center; gap:10px; }

/* =============================================================
   按钮
   ============================================================= */
.btn { display:block; width:100%; height:46px; line-height:44px; text-align:center;
  background: var(--primary-grad); color: #fff; border: none; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(252,3,36,.25);
  transition: transform var(--d-fast) var(--ease-spring), box-shadow var(--d-fast), filter var(--d-fast); }
.btn:active { transform: scale(.97); filter: brightness(.95); }
.btn.gray { background: #c0c0c0; color: #fff; box-shadow: none; }
.btn.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); box-shadow: none; }
.btn.ghost:active { background: var(--primary-soft); }

/* =============================================================
   输入
   ============================================================= */
input,textarea,select { width:100%; border: 1px solid var(--outline); border-radius: var(--r-md);
  padding: 11px 14px; font-size: 14px; outline: none; background: var(--white); font-family: var(--font-body);
  transition: border-color var(--d-fast), box-shadow var(--d-fast); }
input:focus,textarea:focus,select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
input::placeholder,textarea::placeholder { color: #bbb; }

/* =============================================================
   布局工具
   ============================================================= */
.row { display:flex; align-items:center; }
.space { justify-content:space-between; }
.mt10 { margin-top:10px; } .mt20 { margin-top:20px; }
.grow { flex:1; }
.text-red { color: var(--primary); }
.text-gray { color: var(--ink-muted); }
.text-small { font-size:13px; }

/* =============================================================
   表单
   ============================================================= */
.form-item { margin:0 16px; padding:12px 0; border-bottom:1px solid var(--outline); }
.form-item label { display:block; font-size:13px; color: var(--ink-muted); margin-bottom:7px; font-weight:500; }

/* =============================================================
   卡片 - 白底圆角无装饰
   ============================================================= */
.card {
  background: var(--surface-card); border: none; border-radius: var(--r-md);
  padding: 16px; margin: 12px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--d-mid) var(--ease-standard), transform var(--d-mid) var(--ease-standard);
}
.card:active { transform: scale(.995); }
.card::before { content: none; }
.empty { text-align:center; color: var(--ink-muted); padding: 44px 0; font-size: 14px; }
.empty::before {
  content:""; display:block; width:80px; height:80px; margin:0 auto 14px;
  border: 1.5px solid #e0e0e0; border-radius: 50%;
  background: radial-gradient(circle, #fafafa 60%, transparent 61%);
}

/* =============================================================
   徽章
   ============================================================= */
.badge { display:inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: #fff; }
.badge-gold { background: var(--gold); }
.badge-blue { background: var(--brand-purple); }
.badge-green { background: var(--success); }
.badge-purple { background: #6A5A8A; }
.badge-silver { background: #8E9BA7; }
.badge-gray { background: #aaa; }

/* =============================================================
   底部导航 - 白底选中红
   ============================================================= */
.arc-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--outline);
  display:flex; align-items: stretch; justify-content: space-around;
  height: 56px; padding: 0 6px calc(env(safe-area-inset-bottom));
  box-shadow: 0 -1px 6px rgba(0,0,0,.04);
}
.arc-nav::before { display: none; }
.arc-nav .an { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color: var(--ink-muted); text-align:center; padding-top:5px; }
.arc-nav .an-ico { width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:inherit; }
.arc-nav .an-ico svg { width:24px; height:24px; display:block; }
.arc-nav .an-ico img { width:24px; height:24px; box-shadow: none; }
.arc-nav .an-txt { font-size: 10.5px; letter-spacing: 0; margin-top: 2px; }
.arc-nav .an:active .an-ico { transform: scale(.92); }
.arc-nav .an.on { color: var(--primary); }
.arc-nav .an.on .an-ico svg { stroke-width: 2.1; }
.arc-nav .an.on .an-ico img { box-shadow: none; filter: none; }
.arc-nav .an.on .an-txt { font-weight: 600; }
.nav-spacer { height: 72px; }

/* =============================================================
   订单状态切换
   ============================================================= */
.order-tabs { display:flex; width:100%; background: #fff; border-bottom: 1px solid var(--outline); padding: 0; }
.order-tabs .ot { flex:1; text-align:center; padding: 14px 0; font-size: 15px; color: var(--ink-muted);
  border-bottom: 2.5px solid transparent; transition: color var(--d-fast), background var(--d-fast); }
.order-tabs .ot.on { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); background: var(--primary-soft); }

/* =============================================================
   商品网格
   ============================================================= */
.product-grid { display:flex; flex-wrap:wrap; padding: 0 6px; }
.product-grid .p { width: 48%; margin: 1%; background: var(--surface-card); border: none; border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--d-mid) var(--ease-standard), box-shadow var(--d-mid);
  background-image: none; }
.product-grid .p::before { content: none; }
.product-grid .p:active { transform: scale(.98); }
.product-grid .p img { width: 100%; height: 150px; object-fit: cover; }
.product-grid .p .nm { padding: 8px 10px 2px; font-size: 13px; height: 40px; overflow: hidden; color: var(--ink); line-height: 1.45; }
.product-grid .p .pr { padding: 0 10px 10px; color: var(--primary); font-weight: 700; font-size: 16px; }
.qtybox { display:inline-flex; align-items:center; gap: 8px; }
.qtybox .cnt { min-width: 26px; text-align: center; font-weight: 600; }
.qtybox .ql { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-variant); display:flex; align-items:center; justify-content:center; font-weight: 700; }
.qtybox .ql:active { background: var(--primary-soft); }

/* =============================================================
   首页轮播
   ============================================================= */
.carousel { width: 95%; margin: 10px auto; border-radius: var(--r-md); overflow: hidden; position: relative; background: var(--surface-variant); box-shadow: none; }
.carousel .swiper-container { width: 100%; }
.carousel .track { display:flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track .swiper-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; }
.carousel .swiper-slide img { width: 100%; height: 200px; object-fit: cover; display: block; }
.carousel .dots { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; z-index: 5; }
.carousel .dots i { display:inline-block; width: 6px; height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.6); margin: 0 3px; transition: all var(--d-fast); }
.carousel .dots i.on { background: #fff; opacity: 1; width: 16px; }

/* =============================================================
   公告 - 浅红底
   ============================================================= */
.notice-bar { width: 95%; margin: 8px auto; background: #fff5f6; border: 1px solid #fce0e3; border-left: 3px solid var(--primary);
  border-radius: var(--r-md); display: flex; align-items: center; padding: 10px 12px; overflow: hidden;
  background-image: none; box-shadow: none; }
.notice-bar .n-ico { margin-right: 8px; flex-shrink: 0; display: flex; align-items: center; }
.notice-bar .n-ico img { width: 20px; height: 20px; display: block; }
.notice-bar .n-box { flex: 1; overflow: hidden; height: 22px; line-height: 22px; }
.notice-bar .n-box span, .notice-bar .n-box a { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.notice-bar .n-more { color: var(--primary); font-size: 12px; flex-shrink: 0; margin-left: 8px; }

/* =============================================================
   首页/商城类型导航
   ============================================================= */
.home-nav { width: 95%; margin: 12px auto; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: transparent; gap: 4px; }
.home-nav::-webkit-scrollbar { display: none; }
.home-nav .nv { flex: 0 0 25%; width: 25%; text-align: center; padding: 8px 0; cursor: pointer; }
.home-nav .nv img { width: 48px; height: 48px; margin: 0 auto; display: block; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--d-fast) var(--ease-spring); }
.home-nav .nv:active img { transform: scale(.92); }
.home-nav .nv span { display: block; font-size: 12px; color: var(--ink); margin-top: 6px; white-space: nowrap; font-weight: 500; }
.home-nav .cat-ico { display:flex; align-items:center; justify-content:center; width:48px; height:48px; line-height:1; margin:0 auto;
  background: var(--primary-grad); color: #fff; border: none;
  border-radius: 50%; font-size: 19px; font-weight: 700; box-shadow: 0 2px 8px rgba(252,3,36,.25); }
/* 多色循环，参照参考站圆形分类图标 */
.home-nav .nv:nth-child(5n+1) .cat-ico { background: linear-gradient(135deg,#fc0324,#ff5a3a); box-shadow:0 2px 8px rgba(252,3,36,.25); }
.home-nav .nv:nth-child(5n+2) .cat-ico { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow:0 2px 8px rgba(124,58,237,.25); }
.home-nav .nv:nth-child(5n+3) .cat-ico { background: linear-gradient(135deg,#ff8c00,#ffb340); box-shadow:0 2px 8px rgba(255,140,0,.25); }
.home-nav .nv:nth-child(5n+4) .cat-ico { background: linear-gradient(135deg,#0ea5e9,#38bdf8); box-shadow:0 2px 8px rgba(14,165,233,.25); }
.home-nav .nv:nth-child(5n+5) .cat-ico { background: linear-gradient(135deg,#00b578,#34d399); box-shadow:0 2px 8px rgba(0,181,120,.25); }
.home-nav .cat-img { display: block; width: 48px; height: 48px; margin: 0 auto; object-fit: cover;
  border-radius: 50%; border: 1px solid var(--outline); background: #fff; box-shadow: var(--shadow-sm); }
.home-nav .nv.on .cat-ico { background: var(--primary); color: #fff; }
.home-nav .nv.on span { color: var(--primary); font-weight: 600; }

/* =============================================================
   首页广告条
   ============================================================= */
.h-ad { width: 95%; margin: 12px auto; display: block; border-radius: var(--r-md); overflow: hidden; border: none; box-shadow: var(--shadow-sm); }
.h-ad img { width: 100%; max-height: 110px; object-fit: cover; }

/* =============================================================
   图片流
   ============================================================= */
.feed-grid { display: flex; gap: 10px; padding: 0 14px; box-sizing: border-box; }
.feed-grid .feed-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.feed-grid .f { background: var(--surface-card); border: 1px solid var(--outline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--d-mid), box-shadow var(--d-mid); }
.feed-grid .f:active { transform: scale(.99); }
.feed-grid .f img { width: 100%; height: auto; display: block; }
.feed-grid .f .f-t { padding: 10px 10px 2px; font-size: 15px; font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.feed-grid .f .f-s { padding: 0 10px 10px; font-size: 12px; color: var(--ink-muted); }
.feed-head { width: 95%; margin: 16px auto 6px; display: flex; justify-content: space-between; align-items: center; }
.feed-head .t { font-size: 17px; font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.feed-head .t::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--primary); margin-right: 6px; vertical-align: -2px; border-radius: 2px; }
.feed-head a { color: var(--primary); font-size: 12px; }