/* ============================================================
   云物小站 · 全站设计系统（深色主题）
   色板 / 间距 / 按钮体系 / 卡片 / 表单 / 标签 / Toast / 信任条 / 页脚
   仅使用系统字体与内联 SVG，无任何外部资源请求。
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 背景层级：页面 → 面板 → 卡片 → 悬浮 */
  --bg: #0a0e16;
  --bg2: #10151f;
  --panel: #131a28;
  --card: #161e30;
  --card-hi: #1b2540;
  --line: #232e46;
  --line-soft: rgba(148, 168, 208, .12);

  /* 文字层级 */
  --txt: #e9eef7;
  --txt-2: #c2cddd;
  --sub: #8b99b2;
  --faint: #64718a;

  /* 品牌色：靛蓝 → 紫罗兰 */
  --brand: #5b7cfa;
  --brand-2: #8a6cff;
  --brand-soft: rgba(91, 124, 250, .14);
  --grad-brand: linear-gradient(135deg, #5b7cfa 0%, #8a6cff 100%);
  --grad-text: linear-gradient(120deg, #9db6ff 0%, #c6aaff 100%);

  /* 语义色 */
  --ok: #3ddc97;
  --ok-soft: rgba(61, 220, 151, .12);
  --warn: #f5b451;
  --warn-soft: rgba(245, 180, 81, .12);
  --err: #ff6b7d;
  --err-soft: rgba(255, 107, 125, .12);

  /* 圆角 / 阴影 / 间距节奏 */
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 9px;
  --sh-1: 0 1px 2px rgba(2, 6, 16, .5), 0 4px 16px rgba(2, 6, 16, .35);
  --sh-2: 0 2px 6px rgba(2, 6, 16, .55), 0 14px 40px rgba(2, 6, 16, .45);
  --ring: 0 0 0 3px rgba(91, 124, 250, .35);

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body {
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(97, 84, 190, .22) 0%, rgba(10, 14, 22, 0) 60%),
    radial-gradient(900px 480px at -10% 8%, rgba(56, 92, 180, .14) 0%, rgba(10, 14, 22, 0) 55%),
    var(--bg);
  color: var(--txt);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
::selection { background: rgba(138, 108, 255, .4) }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm) }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-2); width: 100% }
main, .wrap { flex-shrink: 0 }

/* ---------- 顶栏 ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 14, 22, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: .5px }
.logo .dot {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: var(--grad-brand);
  box-shadow: 0 2px 10px rgba(108, 110, 250, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .95);
}
.logo .dot svg { width: 15px; height: 15px }
.links { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sub) }
.links a:not(.btn) { padding: 7px 12px; border-radius: var(--r-sm); transition: color .15s, background .15s }
.links a:not(.btn):hover { color: var(--txt); background: rgba(255, 255, 255, .05) }
.links a:not(.btn).active { color: var(--txt); background: var(--brand-soft) }
.links .btn { margin-left: 6px }
.links button.btn { margin-left: 6px }

/* ---------- 按钮体系 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; user-select: none; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card); color: var(--txt);
  padding: 10px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; font-family: inherit; line-height: 1.4;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s, filter .15s;
}
.btn:hover { border-color: #35466e; background: var(--card-hi) }
.btn:active { transform: translateY(1px) }
.btn:focus-visible { box-shadow: var(--ring) }
.btn.primary {
  background: var(--grad-brand); border: none; font-weight: 600; color: #fff;
  box-shadow: 0 2px 6px rgba(84, 100, 240, .35), 0 8px 24px rgba(108, 100, 250, .28);
}
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 3px 8px rgba(84, 100, 240, .4), 0 12px 32px rgba(108, 100, 250, .35) }
.btn.primary:active { filter: brightness(.96) }
.btn.ghost { background: transparent; border-color: var(--line) }
.btn.ghost:hover { background: rgba(255, 255, 255, .05) }
.btn.block { width: 100% }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 8px }
.btn.lg { padding: 14px 40px; font-size: 16px; border-radius: var(--r); letter-spacing: 1px }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none }
.btn:disabled:hover { filter: none; background: var(--card) }
.btn.primary:disabled:hover { background: var(--grad-brand) }

/* ---------- 卡片 ---------- */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) , var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--sh-1);
}

/* ---------- 首页 Hero ---------- */
.hero { text-align: center; padding: 52px 0 6px }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #b9c4ff; letter-spacing: 2px;
  border: 1px solid rgba(138, 140, 255, .35); background: rgba(108, 110, 250, .1);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero-badge svg { width: 13px; height: 13px }
.hero h1 {
  font-size: clamp(28px, 4.5vw, 38px); font-weight: 800; letter-spacing: 1px; line-height: 1.3;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--sub); font-size: 15px; margin-top: 12px }

/* ---------- 服务承诺信任条 ---------- */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 30px 0 4px;
}
.trust-item {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(22, 30, 48, .6); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 13px 10px; font-size: 13.5px; color: var(--txt-2);
}
.trust-item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--brand) }
.trust-item b { font-weight: 600; color: var(--txt) }

/* ---------- 商品网格 / 商品卡 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; margin-top: 28px }
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex; flex-direction: column; box-shadow: var(--sh-1);
}
.pcard:hover { transform: translateY(-4px); border-color: rgba(91, 124, 250, .55); box-shadow: var(--sh-2) }
.pcard .cover {
  height: 158px; position: relative;
  background: linear-gradient(135deg, #222d52 0%, #182038 60%, #141b2e 100%);
  display: flex; align-items: center; justify-content: center; color: #5f6f95;
}
.pcard .cover::after { /* 封面底部渐隐，压住图片与卡体的接缝 */
  content: ""; position: absolute; inset: auto 0 0 0; height: 42px;
  background: linear-gradient(180deg, transparent, rgba(10, 14, 22, .35));
}
.pcard .cover svg { width: 46px; height: 46px; opacity: .85 }
.pcard .cover img { width: 100%; height: 100%; object-fit: cover }
.pcard .body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px }
.pcard .name { font-weight: 650; font-size: 16px; letter-spacing: .2px }
.pcard .sum { color: var(--sub); font-size: 13px; flex: 1; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.pcard .chips { display: flex; gap: 6px; margin-top: 2px }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  padding-top: 12px; border-top: 1px dashed var(--line) }
.pcard .foot .btn.sm { border-color: transparent; background: var(--brand-soft); color: #b9c6ff }
.pcard:hover .foot .btn.sm { background: var(--grad-brand); color: #fff }
.price { color: var(--brand-2); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums }
.price small { font-size: 12px; font-weight: 600; margin-right: 1px }
.free { color: var(--ok) }

/* 小徽章（自动发货等） */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: #9fb4e8; background: rgba(91, 124, 250, .1);
  border: 1px solid rgba(91, 124, 250, .25); border-radius: 999px; padding: 2px 9px;
}
.chip svg { width: 11px; height: 11px }
.chip.ok { color: #7fe0b4; background: var(--ok-soft); border-color: rgba(61, 220, 151, .3) }

/* ---------- 表单 ---------- */
.field { margin-bottom: 18px }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--sub); margin-bottom: 7px; letter-spacing: .3px }
.input, select, textarea {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--txt);
  padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--faint) }
.input:hover, select:hover, textarea:hover { border-color: #35466e }
.input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); background: #0d1322; box-shadow: var(--ring);
}
.input:disabled { opacity: .6; cursor: not-allowed }
textarea { resize: vertical; min-height: 80px }
.hint { font-size: 12.5px; color: var(--sub); margin-top: 7px; display: flex; align-items: flex-start; gap: 5px }
.hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--faint) }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }

/* ---------- 认证页（登录/注册/重置） ---------- */
.auth { max-width: 420px; margin: 56px auto 72px; padding: 0 16px; width: 100% }
.auth-mark { display: flex; justify-content: center; margin-bottom: 18px }
.auth-mark .dot { width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad-brand); box-shadow: 0 6px 22px rgba(108, 100, 250, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .95) }
.auth-mark .dot svg { width: 24px; height: 24px }
.auth h1 { font-size: 24px; text-align: center; margin-bottom: 6px; letter-spacing: .5px }
.auth .sub { color: var(--sub); font-size: 14px; margin-bottom: 26px; text-align: center }
.auth .card { padding: 30px 28px; box-shadow: var(--sh-2) }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--sub) }
.auth-foot a { color: var(--brand); font-weight: 500 }
.auth-foot a:hover { text-decoration: underline }
.sec-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 18px; font-size: 12px; color: var(--faint);
}
.sec-note svg { width: 13px; height: 13px; color: var(--ok) }

/* ---------- 状态标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.tag.p0 { color: var(--warn); border-color: rgba(245, 180, 81, .4); background: var(--warn-soft) }
.tag.p1 { color: var(--ok); border-color: rgba(61, 220, 151, .4); background: var(--ok-soft) }
.tag.p2 { color: var(--sub); border-color: var(--line); background: var(--bg2) }

/* ---------- SKU / 支付方式选择 ---------- */
.skus { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px }
.sku {
  border: 1px solid var(--line); background: var(--bg2); border-radius: var(--r);
  padding: 10px 18px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  min-width: 96px; text-align: center; user-select: none;
}
.sku:hover { border-color: #3d55a8 }
.sku:focus-visible { box-shadow: var(--ring) }
.sku.sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset }
.sku .n { font-size: 14px; font-weight: 500 }
.sku .p { font-size: 13px; color: var(--brand-2); font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums }
/* 卡池规格库存标识 */
.sku .st { font-size: 11.5px; font-weight: 500; color: #b98a2e; margin-left: 4px }
.sku .st.out { color: #d4576b }
.sku.out { opacity: .45; cursor: not-allowed; pointer-events: none; text-decoration: line-through }
/* 支付方式选项：微信 / 支付宝 小圆点标识 */
.sku.pay-opt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-align: left }
.pay-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0 }
.pay-dot.wx { background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, .6) }
.pay-dot.ali { background: #4f9cf9; box-shadow: 0 0 8px rgba(79, 156, 249, .6) }

/* ---------- 订单表 ---------- */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; margin-top: 22px }
.otable { width: 100%; border-collapse: collapse }
.otable th, .otable td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle }
.otable th { color: var(--sub); font-weight: 500; font-size: 12.5px; letter-spacing: .5px;
  background: rgba(13, 19, 34, .6); text-transform: uppercase }
.otable tbody tr:last-child td { border-bottom: none }
.otable tbody tr { transition: background .12s }
.otable tbody tr:hover td { background: rgba(120, 150, 255, .04) }
.otable .price { font-size: 15px }
.otable td:last-child { text-align: right }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translate(-50%, -12px); z-index: 100;
  display: flex; align-items: center; gap: 9px; max-width: min(88vw, 420px);
  background: linear-gradient(180deg, #1d2740, #17203a);
  border: 1px solid var(--line); padding: 12px 20px 12px 15px; border-radius: var(--r);
  box-shadow: var(--sh-2); opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; font-size: 14px; color: var(--txt);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) }
.toast::before { /* 状态图标：纯 CSS 圆点 */
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); box-shadow: 0 0 10px rgba(91, 124, 250, .8);
}
.toast.ok { border-color: rgba(61, 220, 151, .45) }
.toast.ok::before { background: var(--ok); box-shadow: 0 0 10px rgba(61, 220, 151, .8) }
.toast.err { border-color: rgba(255, 107, 125, .45) }
.toast.err::before { background: var(--err); box-shadow: 0 0 10px rgba(255, 107, 125, .8) }

/* ---------- 交付内容框 ---------- */
.delivery {
  background: #0c1220; border: 1px dashed rgba(91, 124, 250, .55); border-radius: var(--r);
  padding: 18px; margin-top: 12px; white-space: pre-wrap; word-break: break-all;
  font-size: 14px; line-height: 1.7; font-family: ui-monospace, "Cascadia Mono", Consolas, "Microsoft YaHei", monospace;
  color: #cfe0ff; position: relative;
}
.delivery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px }
.delivery-head .t { font-size: 13px; color: var(--sub); display: flex; align-items: center; gap: 6px }
.delivery-head .t svg { width: 15px; height: 15px; color: var(--ok) }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid rgba(91, 124, 250, .5); background: rgba(91, 124, 250, .1); color: #cfe0ff;
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit;
  transition: .18s; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn:hover { background: rgba(91, 124, 250, .22); border-color: var(--brand); }
.copy-btn.done { background: rgba(61, 220, 151, .14); border-color: rgba(61, 220, 151, .55); color: #b9f3d9; }

/* ---------- 通用排版 ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; flex-wrap: wrap }
.page-head h2 { font-size: 21px; letter-spacing: .3px }
.page-head .sub { color: var(--sub); font-size: 13px; margin-top: 3px }
.muted { color: var(--sub); font-size: 13px }
.mt { margin-top: 16px }
.mt2 { margin-top: 28px }
.divider { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0 }

/* 信息行（订单详情键值对） */
.info-list { display: flex; flex-direction: column; gap: 9px }
.info-list .i { display: flex; justify-content: space-between; gap: 16px; font-size: 14px }
.info-list .i .k { color: var(--sub) }
.info-list .i .v { color: var(--txt-2); text-align: right; word-break: break-all }

/* ---------- 商品详情 ---------- */
.detail-hero { display: flex; gap: 32px; margin-top: 30px; flex-wrap: wrap }
.detail-hero .left { width: 340px; max-width: 100% }
.detail-hero .right { flex: 1; min-width: 300px }
.crumb { font-size: 13px; color: var(--faint); margin-bottom: 14px }
.crumb a { color: var(--sub) }
.crumb a:hover { color: var(--txt) }
.detail-cover {
  height: 250px; border-radius: var(--r-lg); overflow: hidden; position: relative;
  background: linear-gradient(135deg, #222d52 0%, #182038 60%, #141b2e 100%);
  display: flex; align-items: center; justify-content: center; color: #5f6f95;
  border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.detail-cover svg { width: 74px; height: 74px; opacity: .85 }
.detail-cover img { width: 100%; height: 100%; object-fit: cover }
.d-title { font-size: 27px; font-weight: 750; letter-spacing: .3px; line-height: 1.35 }
.d-sum { margin-top: 8px; font-size: 14px }
.d-deliver {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--ok-soft); border: 1px solid rgba(61, 220, 151, .35); color: #86e6bd;
  font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
}
.d-deliver svg { width: 15px; height: 15px }
.d-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px;
  padding-top: 16px; border-top: 1px dashed var(--line) }
.d-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub) }
.d-trust svg { width: 14px; height: 14px; color: var(--brand) }
.detail-desc { color: #c3ccd8; line-height: 1.85; white-space: pre-wrap; margin-top: 14px; font-size: 14.5px }
.card b.sec-title { font-size: 15.5px; letter-spacing: .3px }

/* ---------- 空态 ---------- */
/* ---------- 目录导航条 ---------- */
.catnav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; align-items: center }
.catbtn { cursor: pointer; font-family: inherit; font-size: 13.5px; color: var(--sub);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 18px;
  transition: all .15s; }
.catbtn:hover { color: var(--txt); border-color: #3a4d78 }
.catbtn.sel { color: #fff; background: var(--grad-brand); border-color: transparent; font-weight: 600 }

/* ---------- 商品列表（一行一个，淘宝式） ---------- */
.plist { display: flex; flex-direction: column; gap: 14px; margin-top: 22px }
.prow { display: flex; gap: 18px; align-items: center; min-height: 122px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 20px; box-shadow: var(--sh-1);
  transition: transform .18s, border-color .18s, box-shadow .18s; }
.prow:hover { transform: translateY(-2px); border-color: rgba(91, 124, 250, .55); box-shadow: var(--sh-2) }
.prow .cover { width: 176px; height: 118px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(135deg, #222d52 0%, #182038 60%, #141b2e 100%);
  display: flex; align-items: center; justify-content: center; color: #5f6f95; }
.prow .cover svg { width: 40px; height: 40px; opacity: .85 }
.prow .cover img { width: 100%; height: 100%; object-fit: cover }
.prow .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px }
.prow .name { font-weight: 650; font-size: 17px; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.prow .tagline { display: flex; gap: 6px; flex-wrap: wrap }
.prow .sum { color: var(--sub); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.prow .chips { display: flex; gap: 6px; margin-top: 2px }
.prow .side { width: 148px; flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between; gap: 8px }
.prow .side .btn.sm { border-color: transparent; background: var(--brand-soft); color: #b9c6ff }
.prow:hover .side .btn.sm { background: var(--grad-brand); color: #fff }
.vip-txt { color: #ffc078; font-weight: 650; font-size: 13.5px }

/* ---------- 标签贴纸（4 色轮换） ---------- */
.tag-st { display: inline-flex; align-items: center; font-size: 11px; line-height: 1.5;
  padding: 2px 9px; border-radius: 6px; font-weight: 500; }
.tag-st.t0 { background: rgba(255, 177, 61, .12); color: #ffc078; border: 1px solid rgba(255, 177, 61, .3) }
.tag-st.t1 { background: rgba(61, 220, 151, .1); color: #7fe0b4; border: 1px solid rgba(61, 220, 151, .28) }
.tag-st.t2 { background: rgba(91, 124, 250, .12); color: #a9baff; border: 1px solid rgba(91, 124, 250, .3) }
.tag-st.t3 { background: rgba(240, 127, 181, .1); color: #f0a6cd; border: 1px solid rgba(240, 127, 181, .28) }

/* 会员专属徽章 / chip */
.vip-st { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 193, 94, .2), rgba(255, 140, 60, .16));
  color: #ffd28a; border: 1px solid rgba(255, 193, 94, .45); font-weight: 600; }
.chip.vip { color: #ffd28a; background: rgba(255, 193, 94, .1); border-color: rgba(255, 193, 94, .35) }

/* ---------- 会员内容页 ---------- */
.member-box { margin-top: 10px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 16px 18px; font-size: 13.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; color: var(--txt) }
.member-lock { margin-top: 10px; border: 1px dashed rgba(255, 193, 94, .45); border-radius: var(--r-lg);
  background: rgba(255, 193, 94, .05); padding: 22px 24px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px }
.member-lock .ml-t { color: #ffd28a; font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 7px }
.member-lock .ml-t svg { width: 16px; height: 16px }
.member-lock .ml-d { color: var(--sub); font-size: 13px; line-height: 1.6 }

.empty { text-align: center; color: var(--sub); padding: 64px 0; font-size: 14px }
.empty a { color: var(--brand); font-weight: 500 }
.empty a:hover { text-decoration: underline }

/* ---------- 页脚 ---------- */
.footer {
  margin-top: auto; border-top: 1px solid var(--line-soft);
  background: rgba(10, 14, 22, .6); padding: 40px 0 26px;
}
.footer .wrap { display: block }
.foot-top { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between }
.foot-brand { max-width: 300px }
.foot-brand .logo { font-size: 16px }
.foot-brand p { color: var(--faint); font-size: 12.5px; margin-top: 10px; line-height: 1.7 }
.foot-col h4 { font-size: 13px; color: var(--txt-2); font-weight: 600; margin-bottom: 12px; letter-spacing: .5px }
.foot-col a { display: block; color: var(--sub); font-size: 13px; padding: 3px 0 }
.foot-col a:hover { color: var(--txt) }
.foot-rules { max-width: 360px }
.foot-rules p { color: var(--faint); font-size: 12.5px; line-height: 1.8 }
.foot-rules p b { color: var(--sub); font-weight: 600 }
.foot-bottom {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  color: var(--faint); font-size: 12px;
}
.foot-bottom .ssl { display: inline-flex; align-items: center; gap: 5px }
.foot-bottom .ssl svg { width: 12px; height: 12px; color: var(--ok) }

/* ---------- 移动端适配 ---------- */
@media (max-width: 640px) {
  body { font-size: 14.5px }
  .nav .wrap { height: 58px }
  .nav .links { gap: 2px }
  .links > a { padding: 6px 8px; font-size: 13px }
  .hero { padding-top: 36px }
  .trust { grid-template-columns: 1fr 1fr; gap: 8px }
  .trust-item { padding: 10px 8px; font-size: 12.5px; justify-content: flex-start }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px }
  .prow { flex-direction: column; gap: 12px }
  .prow .cover { width: 100%; height: 150px }
  .prow .side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between }
  .pcard .cover { height: 110px }
  .pcard .body { padding: 12px }
  .pcard .name { font-size: 14.5px }
  .pcard .sum { font-size: 12px }
  .price { font-size: 16px }
  .detail-hero { gap: 20px; margin-top: 20px }
  .detail-hero .left { width: 100% }
  .detail-cover { height: 200px }
  .d-title { font-size: 22px }
  .auth { margin-top: 36px }
  .btn.lg { width: 100% }
  .foot-top { gap: 24px }

  /* 订单表 → 卡片式堆叠，保证小屏可读 */
  .table-wrap { background: transparent; border: none; box-shadow: none; overflow: visible; margin-top: 16px }
  .otable thead { display: none }
  .otable, .otable tbody, .otable tr, .otable td { display: block; width: 100% }
  .otable tr {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); padding: 14px 16px; margin-bottom: 14px;
  }
  .otable td { border: none; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right }
  .otable td::before { content: attr(data-label); color: var(--sub); font-size: 12.5px; flex-shrink: 0 }
  .otable td:last-child { text-align: right; padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--line) }
}