:root{
  --main:#6a5cff;          /* 主色：清新紫 */
  --main2:#2f8bff;         /* 辅色：天空蓝 */
  --hot:#ff5252;           /* 强调：价格红 */
  --bg:#f5f6fa;            /* 页面背景（浅灰） */
  --bg2:#ffffff;           /* 卡片背景（白） */
  --bg3:#f2f3f9;           /* 输入框背景 */
  --line:#eceef5;          /* 分割线 */
  --txt:#26283a;           /* 主文字 */
  --sub:#979bb3;           /* 次要文字 */
  --gold:#ffb03a;          /* 星级金 */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);
  max-width:640px;margin:0 auto;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ============ 顶栏 ============ */
.header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(135deg,var(--main),var(--main2));
  color:#fff;
  position:sticky;top:0;z-index:10;
  box-shadow:0 2px 12px rgba(106,92,255,.25);
}
.header img{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.5);background:#fff}
.header .shop{flex:1;min-width:0}
.header .shop b{font-size:16px;color:#fff}
.header .shop span{display:block;font-size:11px;color:rgba(255,255,255,.75);margin-top:1px}
.header .rate{font-size:12px;color:#fff;opacity:.9}
.header a{font-size:13px;color:#fff}

/* ============ 公告条 ============ */
.notice{
  margin:12px 16px 0;padding:10px 14px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--main);
  border-radius:10px;
  font-size:12px;color:#6b7089;
  box-shadow:0 1px 4px rgba(38,40,58,.04);
}

/* ============ 分类标签 ============ */
.tabs{display:flex;gap:8px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  padding:7px 16px;border-radius:20px;
  background:#fff;border:1px solid var(--line);
  font-size:13px;color:var(--sub);white-space:nowrap;transition:.2s;
}
.tabs a.on{
  background:linear-gradient(135deg,var(--main),var(--main2));
  border-color:transparent;color:#fff;font-weight:bold;
  box-shadow:0 3px 12px rgba(106,92,255,.3);
}

/* ============ 商品卡片（双列） ============ */
.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px 80px}
.card{
  background:var(--bg2);border:none;
  border-radius:14px;overflow:hidden;position:relative;
  box-shadow:0 2px 10px rgba(38,40,58,.06);
  transition:transform .15s, box-shadow .15s;
}
.card:active{transform:scale(.97)}
.card .pic{position:relative;height:140px;background:var(--bg3);overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card .tag{
  position:absolute;left:0;top:0;
  background:linear-gradient(135deg,var(--hot),#ff7a45);
  color:#fff;font-size:10px;padding:3px 10px;border-radius:0 0 10px 0;
}
.card .info{padding:10px 12px 12px}
.card .name{font-size:13px;line-height:1.45;height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--txt)}
.card .price{margin-top:8px;font-size:17px;color:var(--hot);font-weight:bold;font-family:"DIN Alternate",sans-serif}
.card .price small{font-size:11px;color:var(--sub);font-weight:normal;margin-left:6px;text-decoration:line-through}
.card .sale{font-size:11px;color:var(--sub);margin-top:4px}

/* ============ 详情页 ============ */
.detail-pic{height:280px;background:var(--bg3);overflow:hidden}
.detail-pic img{width:100%;height:100%;object-fit:cover}
.d-title{padding:16px 16px 6px;font-size:17px;font-weight:bold;line-height:1.5;color:var(--txt)}
.d-price{padding:0 16px;font-size:24px;color:var(--hot);font-weight:bold}
.d-price small{font-size:12px;color:var(--sub);text-decoration:line-through;margin-left:8px}
.d-meta{padding:6px 16px 14px;font-size:12px;color:var(--sub)}
.share-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--main);
  border:1px solid rgba(106,92,255,.4);border-radius:16px;
  padding:4px 12px;background:rgba(106,92,255,.06);
}
.d-xq{
  background:var(--bg2);
  margin:12px 16px;border-radius:14px;
  padding:16px;font-size:14px;line-height:1.9;color:#4a4e68;
  box-shadow:0 2px 10px rgba(38,40,58,.06);
}
.d-xq b{color:var(--txt)}
.sec-title{padding:16px 16px 8px;font-size:15px;font-weight:bold;color:var(--txt)}
.eval{padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line);font-size:13px;color:#4a4e68}
.eval:last-child{border-bottom:none;border-radius:0 0 14px 14px}
.eval .who{color:var(--sub);font-size:11px;margin-bottom:5px}
.eval .stars{color:var(--gold)}

/* ============ 数量选择 ============ */
.num-row{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg2);margin:0 16px;border-radius:12px;box-shadow:0 2px 10px rgba(38,40,58,.06)}
.num-row input{width:64px;height:36px;text-align:center;border:1px solid var(--line);border-radius:8px;font-size:15px;background:var(--bg3);color:var(--txt)}
.num-row button{width:36px;height:36px;border:1px solid var(--line);background:var(--bg3);border-radius:8px;font-size:16px;color:var(--txt);cursor:pointer}
.num-row button:active{background:var(--line)}

/* ============ 表单 ============ */
.field{padding:9px 16px;background:var(--bg2);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.field label{width:84px;font-size:14px;color:var(--sub);flex-shrink:0}
.field input,.field select{
  flex:1;height:38px;border:none;outline:none;font-size:14px;
  background:transparent;color:var(--txt);
}
.field input::placeholder{color:#b6bacd}
.field select option{background:var(--bg2)}
input,textarea,select{font-family:inherit}
textarea{background:var(--bg3);color:var(--txt);border:1px solid var(--line)!important;border-radius:10px}

/* ============ 主按钮 ============ */
.btn-main{
  display:block;margin:20px 16px;padding:14px;
  border:none;border-radius:14px;
  background:linear-gradient(135deg,var(--main),var(--main2));
  color:#fff;font-size:16px;font-weight:bold;
  text-align:center;cursor:pointer;width:calc(100% - 32px);
  box-shadow:0 4px 16px rgba(106,92,255,.35);
}
.btn-main:active{transform:scale(.98)}

/* ============ 列表行 ============ */
.list-row{display:flex;background:var(--bg2);box-shadow:0 2px 10px rgba(38,40,58,.06);margin:10px 16px;border-radius:14px;padding:14px;gap:10px}
.status{font-size:11px;padding:3px 9px;border-radius:6px;background:rgba(106,92,255,.1);color:var(--main)}

/* ============ 面板 ============ */
.pane{background:var(--bg2);box-shadow:0 2px 10px rgba(38,40,58,.06);margin:12px 16px;border-radius:14px;padding:16px;font-size:14px;line-height:1.8;color:#4a4e68}
.pane b{color:var(--txt)}

/* ============ 提示条 ============ */
.msg{margin:14px 16px;padding:11px 14px;border-radius:10px;font-size:13px}
.msg.ok{background:#eef9ff;color:#2f8bff;border:1px solid #c9e6ff}
.msg.err{background:#fff1f1;color:var(--hot);border:1px solid #ffd4d4}

/* ============ 底部导航 ============ */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:640px;height:56px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex;z-index:20;
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:#b6bacd}
.tabbar a svg{display:block}
.tabbar a span{line-height:1}
.tabbar a.on{color:var(--main)}
body.pad{padding-bottom:70px}

/* ============ 后台专用微调 ============ */
.imgbtn{height:34px;padding:0 16px;border:none;border-radius:17px;background:linear-gradient(135deg,var(--main),var(--main2));color:#fff;font-size:13px;font-weight:bold;cursor:pointer}
code{color:var(--main)}

/* ============ 详情页正文里的网址（自动可点击） ============ */
.d-xq .xq-link{color:var(--main2);text-decoration:underline;word-break:break-all}

/* ============ 相关链接（详情页底部可点击跳转） ============ */
.link-list{margin:0 16px;background:var(--bg2);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(38,40,58,.06)}
.link-item{
  display:block;position:relative;
  padding:14px 16px;border-bottom:1px solid var(--line);
  transition:background .15s;cursor:pointer;
}
.link-item{display:flex;align-items:center;gap:12px}
.link-item:last-child{border-bottom:none}
.link-item:active{background:var(--bg3)}
.link-icon{
  width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(106,92,255,.08);border:1px solid rgba(106,92,255,.2);
  border-radius:10px;font-size:15px;
}
.link-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.link-body b{font-size:14px;color:var(--txt);font-weight:600}
.link-body em{font-size:11px;color:var(--sub);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-arrow{font-size:20px;color:var(--main);flex-shrink:0;line-height:1}

/* ============ 商品详情宣传图 ============ */
.detail-imgs{margin:0 16px}
.detail-img{
  margin-bottom:10px;border-radius:14px;overflow:hidden;
  background:var(--bg3);box-shadow:0 2px 10px rgba(38,40,58,.06);
  display:flex;align-items:center;justify-content:center;
}
.detail-img img{width:100%;display:block;cursor:zoom-in}

/* ============ 规格选择（拼多多式） ============ */
.spec-panel{
  margin:14px 16px;background:#fff;border-radius:14px;
  box-shadow:0 2px 10px rgba(38,40,58,.06);
  overflow:hidden;
}
.spec-head{
  padding:13px 16px 10px;font-size:15px;font-weight:bold;color:var(--txt);
  border-bottom:1px solid var(--line);
}
.spec-list{display:flex;flex-direction:column;padding:6px 10px 10px}
.spec-item{
  display:flex;align-items:center;gap:10px;
  margin-top:6px;padding:12px 14px;
  background:var(--bg3);border:1.5px solid transparent;
  border-radius:10px;transition:.15s;
}
.spec-item:active{transform:scale(.99)}
.spec-item.on{
  background:linear-gradient(135deg,#fff4f4,#fff9f0);
  border-color:var(--hot);
  box-shadow:0 2px 8px rgba(255,82,82,.12);
}
.spec-item.on::before{content:"🔥";font-size:14px;margin-right:-4px}
.spec-item .spec-name{flex:1;font-size:14px;color:var(--txt);line-height:1.5}
.spec-item.on .spec-name{color:var(--hot);font-weight:600}
.spec-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.spec-price{font-size:15px;color:var(--hot);font-weight:bold;font-family:"DIN Alternate",sans-serif}
.spec-item:not(.on) .spec-price{color:var(--sub);font-weight:600}
.spec-item.soldout{opacity:.45}
.spec-item.soldout .spec-name{text-decoration:line-through}
.spec-sold{font-size:11px;color:var(--sub);background:#e8ebf3;padding:2px 8px;border-radius:8px}

/* 合计条 */
.total-bar{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin:16px 16px -6px;font-size:14px;color:var(--sub);
}
.total-bar b{font-size:22px;color:var(--hot);font-family:"DIN Alternate",sans-serif}

/* 卡片上的「多规格」角标 */
.card .spec-tag{
  position:absolute;right:8px;top:8px;
  background:rgba(255,255,255,.92);color:var(--main);
  font-size:10px;padding:2px 7px;border-radius:8px;font-weight:bold;
  box-shadow:0 1px 4px rgba(38,40,58,.12);
}

/* ============ 二级分类行 ============ */
.subtabs{padding-top:6px;padding-bottom:2px}
.subtabs a{font-size:12px;padding:5px 13px;background:#fff;border-color:var(--line);color:var(--sub)}
.subtabs a.on{background:linear-gradient(135deg,var(--main),var(--main2));color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(106,92,255,.3)}

/* ============ 图片放大查看器 ============ */
#imgviewer{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(20,22,35,.9);
  align-items:center;justify-content:center;
}
#imgviewer img{max-width:94%;max-height:90%;border-radius:8px}