/* =====================================================
   Tag2QR 小商品城 · 样式表（全局 + 皮肤 + 响应式）
   断点: < 480px (手机) | 480-1024px (平板) | > 1024px (PC)
   ===================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; color: #1f2937; background: #f5f5f7; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-style: normal; }
button { font-family: inherit; }

/* ========= 手机端安全区 ========= */
@supports (padding-top: env(safe-area-inset-top)) {
  .shop-header { padding-top: env(safe-area-inset-top); }
}

/* ========= 皮肤 CSS 变量（product.html 用） ========= */
.skin-fresh   { --bg:#f0fdf4;  --text:#1f2937;  --price:#059669;  --buy:linear-gradient(135deg,#10b981,#34d399);  --accent:#d1fae5;  --cat:#d1fae5;  --cat-text:#065f46; --grad:linear-gradient(135deg,#a8edea,#fed6e3); }
.skin-warm    { --bg:#fff7ed;  --text:#7c2d12;  --price:#c2410c;  --buy:linear-gradient(135deg,#f97316,#fb923c);  --accent:#ffedd5;  --cat:#ffedd5;  --cat-text:#9a3412; --grad:linear-gradient(135deg,#ffecd2,#fcb69f); }
.skin-tech    { --bg:#0f172a;  --text:#e2e8f0;  --price:#60a5fa;  --buy:linear-gradient(135deg,#3b82f6,#8b5cf6);  --accent:#1e293b;  --cat:#1e293b;  --cat-text:#94a3b8; --grad:linear-gradient(135deg,#0f2027,#203a43,#2c5364); }
.skin-retro   { --bg:#fdf8f3;  --text:#78350f;  --price:#a16207;  --buy:linear-gradient(135deg,#a16207,#ca8a04);  --accent:#fef3c7;  --cat:#fef3c7;  --cat-text:#713f12; --grad:linear-gradient(135deg,#d4a574,#8b6f47); }
.skin-minimal { --bg:#fafafa;  --text:#1f2937;  --price:#111827;  --buy:linear-gradient(135deg,#1f2937,#4b5563);  --accent:#f3f4f6;  --cat:#f3f4f6;  --cat-text:#374151; --grad:linear-gradient(135deg,#e0e0e0,#9e9e9e); }

/* =====================================================
   一、商城首页 shop.html
   ===================================================== */

/* ---------- 顶部 ---------- */
.shop-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  color: #fff;
}
.shop-header-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  max-width: 1200px; margin: 0 auto;
}
.shop-logo {
  font-size: 22px; flex-shrink: 0;
}
.shop-search {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 22px; padding: 6px 6px 6px 12px;
  min-width: 0;
}
.search-ico { color: #9ca3af; font-size: 14px; flex-shrink: 0; }
.shop-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: #1f2937; min-width: 0;
}
.shop-search input::placeholder { color: #9ca3af; }
.shop-search button {
  border: none; background: #1f2937; color: #fff;
  padding: 5px 14px; border-radius: 18px; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
.shop-cart-icon {
  position: relative; background: rgba(255,255,255,.2);
  border: none; color: #fff; font-size: 18px; padding: 8px 12px;
  border-radius: 20px; cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.shop-cart-icon:hover { background: rgba(255,255,255,.3); }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: #fff; color: #ff6b6b;
  font-size: 11px; font-weight: 700; line-height: 1;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  transition: transform .2s;
}

/* ---------- 标签横滑 ---------- */
.shop-tags-scroll {
  display: flex; gap: 8px; padding: 10px 12px 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
}
.shop-tags-scroll::-webkit-scrollbar { display: none; }

.tag-opt {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 16px; font-size: 13px;
  background: #f5f5f7; color: #4b5563; cursor: pointer;
  transition: all .15s; white-space: nowrap; border: 1px solid transparent;
}
.tag-opt em { font-size: 11px; opacity: .5; margin-left: 2px; }
.tag-opt:hover { background: #e5e7eb; }
.tag-opt.on {
  background: #ff6b6b; color: #fff; border-color: #ff6b6b;
}
.tag-opt.on em { opacity: .9; color: #fff; }

/* ---------- 分类宫格横滑 ---------- */
.shop-cat-scroll {
  display: flex; gap: 12px; padding: 12px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: #fff;
  border-bottom: 8px solid #f5f5f7;
}
.shop-cat-scroll::-webkit-scrollbar { display: none; }

.cat-item {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 56px; cursor: pointer;
}
.cat-ico {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: transform .2s, background .2s;
}
.cat-item.on .cat-ico {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  transform: scale(1.08);
}
.cat-item.on .cat-name { color: #ff6b6b; font-weight: 600; }
.cat-name {
  font-size: 11px; color: #4b5563; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px;
}

/* ---------- 商品网格 ---------- */
.shop-grid {
  padding: 8px;
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}

.shop-loading, .shop-empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px;
  color: #9ca3af; font-size: 14px; line-height: 1.8;
}

/* ---------- 商品卡片 ---------- */
.pc {
  display: block; background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
}
.pc:active { transform: scale(.98); }

.pc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: #f3f4f6;
  background-size: cover; background-position: center;
}
.pc-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 700; color: #d1d5db;
}
.pc-tags {
  position: absolute; top: 6px; left: 6px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.pc-tag {
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px;
  padding: 2px 6px; border-radius: 8px;
}

.pc-body { padding: 8px 10px 10px; }
.pc-name {
  font-size: 13px; font-weight: 500; color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.35; min-height: 35px;
}
.pc-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
}
.pc-price {
  color: #ef4444; font-size: 12px; font-weight: 500;
}
.pc-price b { font-size: 18px; font-weight: 700; }
.pc-price::before { content: '¥'; font-size: 12px; }

.pc-add {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: linear-gradient(135deg,#ff6b6b,#ff8e53);
  color: #fff; font-size: 18px; font-weight: 300; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,107,107,.4);
  transition: transform .15s;
}
.pc-add:active { transform: scale(.85); }

/* ---------- 购物车抽屉 ---------- */
.cart-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transition: all .25s; z-index: 200;
}
.cart-mask.show { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: #fff; z-index: 201;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.08);
}
.cart-drawer.open { transform: translateX(0); }

.cart-header {
  padding: 16px 18px; border-bottom: 1px solid #f3f4f6;
  display: flex; justify-content: space-between; align-items: center;
}
.cart-header h3 { font-size: 16px; font-weight: 600; }
.cart-close {
  border: none; background: #f3f4f6; color: #6b7280;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 16px; cursor: pointer;
}

.cart-body { flex: 1; overflow-y: auto; padding: 4px 0; }
.cart-empty {
  padding: 80px 20px; text-align: center; color: #9ca3af; font-size: 14px;
}

.cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #f9fafb;
}
.cart-item-img {
  width: 60px; height: 60px; border-radius: 8px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
}
.cart-item-img .no-img { font-size: 24px; font-weight: 700; color: #d1d5db; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 14px; font-weight: 500; color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-item-price { font-size: 15px; color: #ef4444; font-weight: 600; margin-top: 4px; }
.cart-item-qty { display: flex; align-items: center; gap: 6px; }
.cart-item-qty button {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.cart-item-qty button:active { background: #f3f4f6; }
.cart-item-qty span { font-size: 14px; min-width: 24px; text-align: center; }

.cart-footer {
  padding: 14px 18px; border-top: 1px solid #f3f4f6; background: #fff;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.cart-total {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #6b7280; margin-bottom: 10px;
}
.cart-total b { color: #1f2937; font-weight: 600; }
.cart-total .price-big { display: flex; align-items: baseline; gap: 4px; }
.cart-total .price { color: #ef4444; font-size: 20px; font-weight: 700; }

.btn-buy {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  color: #fff; border: none; border-radius: 24px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: opacity .2s;
  box-shadow: 0 4px 12px rgba(255,107,107,.35);
}
/* ---------- 加购飞行动画小球 ---------- */
#flyContainer { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

/* ---------- 扫一扫按钮 ---------- */
.shop-scan-icon {
  background: rgba(255,255,255,.2);
  border: none; color: #fff; font-size: 18px; padding: 8px 10px;
  border-radius: 20px; cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.shop-scan-icon:hover { background: rgba(255,255,255,.3); }

/* ---------- 扫一扫弹窗 ---------- */
/* ========== 扫一扫 ========== */
.scanner-mask {
  position: fixed; inset: 0;
  background: #000;
  display: flex; flex-direction: column;
  z-index: 300;
  opacity: 0; visibility: hidden; transition: all .3s;
}
.scanner-mask.show { opacity: 1; visibility: visible; }

.scanner-wrap {
  flex: 1; display: flex; flex-direction: column; color: #fff;
  min-height: 0;
}
.scanner-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(50px + env(safe-area-inset-top, 0px)) 20px 12px;
  flex-shrink: 0;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
}
.scanner-header h3 { font-size: 17px; font-weight: 600; }
.scanner-close {
  width: 34px; height: 34px; border-radius: 17px;
  border: none; background: rgba(255,255,255,.15); color: #fff;
  font-size: 18px; cursor: pointer;
}

/* ==== 扫码舞台：video + overlay 严格对齐 ==== */
.scanner-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
}

/* #qrReader — 让库自己渲染，我们只保证尺寸 */
#qrReader {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
/* 视频撑满 */
#qrReader video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
/* html5-qrcode 内部的 canvas 隐藏 */
#qrReader canvas { display: none !important; }

/* ==== 隐藏默认 UI（只选库的内部 class） ==== */
#qrReader__dashboard,
#qrReader__header,
#qrReader__file_selection,
#qrReader__loading_message,
#qrReader__message,
#qrReader__no_cameras_found,
#qrReader__video_or_camera_loading {
  display: none !important;
}
/* 库内部的 video 容器，也让它撑满 */
#qrReader #qrReader__video-container,
#qrReader #qrReader__video-container > div {
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
}

/* ==== overlay：严格叠在 video 上 ==== */
.scanner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* 扫描框 */
.scanner-frame {
  width: 60vw; height: 60vw;
  max-width: 300px; max-height: 300px;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
}
.scanner-corner {
  position: absolute; width: 28px; height: 28px;
  border-width: 4px; border-style: solid; border-color: #07c160;
}
.scanner-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.scanner-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
.scanner-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
.scanner-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 10px; }

/* 扫描线 */
.scanner-line {
  position: absolute; left: 8px; right: 8px; top: 8px; height: 3px;
  background: linear-gradient(90deg, transparent, #07c160, transparent);
  box-shadow: 0 0 10px rgba(7,193,96,.6);
  border-radius: 2px;
  animation: scanLine 2.2s ease-in-out infinite;
}
@keyframes scanLine {
  0%, 100% { top: 8px; opacity: .8; }
  50% { top: calc(100% - 8px); opacity: 1; }
}

.scanner-tip {
  position: absolute;
  bottom: calc(25vh - 60px);
  font-size: 13px; color: rgba(255,255,255,.85);
  text-align: center; padding: 0 20px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* 底部按钮 */
.scanner-footer {
  display: flex; justify-content: center; gap: 24px;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
}
.scanner-foot-btn {
  background: rgba(255,255,255,.12);
  border: none; color: #fff; padding: 10px 18px;
  border-radius: 22px; font-size: 13px; cursor: pointer;
  transition: background .2s;
  display: inline-flex; align-items: center; gap: 4px;
}
.scanner-foot-btn:hover { background: rgba(255,255,255,.2); }


/* =====================================================
   二、商品详情页 product.html
   ===================================================== */
.product-detail {
  max-width: 640px; margin: 0 auto; min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #f5f5f7);
  color: var(--text, #1f2937);
  transition: background .3s, color .3s;
}
.product-detail .images {
  width: 100%; height: auto; aspect-ratio: 1;
  background: var(--grad, linear-gradient(135deg,#f3f4f6,#e5e7eb));
  overflow: hidden;
}
.product-detail .images img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .info { padding: 16px 16px 24px; background: var(--bg, #fff); }
.product-detail .price-row { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.product-detail .price { font-size: 32px; font-weight: 700; color: var(--price, #ef4444); }
.product-detail .price::before { content: '¥'; font-size: 16px; font-weight: 500; }
.product-detail .stock { color: var(--text, #6b7280); opacity: .6; font-size: 12px; }

.product-detail .category {
  display: inline-block; background: var(--cat, #f3f4f6);
  color: var(--cat-text, #6b7280);
  padding: 3px 10px; border-radius: 10px; font-size: 12px; margin-right: 6px;
}

.product-detail .title { font-size: 18px; font-weight: 600; line-height: 1.4; }

.product-detail .section-title {
  font-size: 15px; font-weight: 600; margin: 18px 0 8px;
  color: var(--text, #374151);
}
.product-detail .desc { line-height: 1.8; font-size: 15px; opacity: .88; }

/* 标签 */
.product-detail .tags-row { margin-top: 10px; }
.product-detail .tags-row span {
  display: inline-block; padding: 3px 10px; margin: 0 5px 5px 0;
  border-radius: 10px; font-size: 12px;
  background: var(--accent, #f3f4f6); color: var(--cat-text, #6b7280);
}

/* 规格选择（占位） */
.product-detail .spec-row {
  display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap;
}
.product-detail .spec-row span {
  padding: 6px 14px; border-radius: 20px; font-size: 13px;
  border: 1px solid var(--cat, #d1d5db); cursor: pointer;
  background: var(--bg, #fff);
}

/* 底部栏 */
.product-detail .bottom-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px;
  background: var(--bg, #fff);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  display: flex; gap: 10px; align-items: center;
  z-index: 90;
}
.product-detail .btn-cart-go {
  width: 44px; height: 44px; border-radius: 22px;
  border: none; background: var(--accent, #f3f4f6);
  font-size: 18px; cursor: pointer; flex-shrink: 0;
  color: var(--text, #374151);
}
.product-detail .btn-cart-go:active { transform: scale(.92); }

.product-detail .buy-btn,
.product-detail .buy-btn2 {
  flex: 1; border-radius: 22px; padding: 12px 16px; font-size: 15px; font-weight: 600;
  cursor: pointer; border: none; color: #fff;
}
.product-detail .buy-btn {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  box-shadow: 0 4px 12px rgba(255,107,107,.35);
}
.product-detail .buy-btn2 {
  background: var(--buy, linear-gradient(135deg,#1f2937,#4b5563));
}
.product-detail .buy-btn:active,
.product-detail .buy-btn2:active { opacity: .9; transform: scale(.98); }

/* 浮动购物车 */
.product-detail .cart-float {
  position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  width: 50px; height: 50px; border-radius: 25px;
  background: linear-gradient(135deg,#ff6b6b,#ff8e53);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; z-index: 89;
  box-shadow: 0 4px 16px rgba(255,107,107,.4);
}
.product-detail .cart-float span {
  position: absolute; top: -2px; right: -2px;
  background: #fff; color: #ff6b6b; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}


/* =====================================================
   三、管理后台 admin.html（含响应式）
   ===================================================== */
.admin-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.admin-header h1 { font-size: 18px; }
.admin-header .app-url {
  font-size: 12px; background: rgba(255,255,255,.2);
  padding: 4px 10px; border-radius: 14px;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.container { max-width: 1200px; margin: 20px auto; padding: 0 16px; }

/* admin toolbar */
.admin-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 10px;
}
.admin-toolbar h2 { font-size: 18px; font-weight: 600; }
.admin-count-badge { font-size: 13px; color: #9ca3af; font-weight: normal; margin-left: 4px; }
.admin-toolbar-btns { display: flex; gap: 8px; flex-shrink: 0; }

/* admin filter */
.admin-filter {
  background: #fff; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.admin-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-filter-row input {
  flex: 1; min-width: 150px; padding: 8px 12px;
  border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px;
}
.admin-filter-row input:focus { outline: none; border-color: #667eea; }

.admin-tag-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.admin-tag-chips .tag-chip {
  padding: 2px 10px; border-radius: 12px; font-size: 12px; cursor: pointer;
  border: 1px solid #d1d5db; background: #fff; color: #6b7280;
  transition: all .15s;
}
.admin-tag-chips .tag-chip.on { border-color: #667eea; background: #eef2ff; color: #4f46e5; }

/* admin 卡片（默认隐藏，< 1024px 媒体查询中激活） */
.admin-card-list { display: none; }
.admin-card {
  display: flex; gap: 12px; background: #fff; border-radius: 10px; padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.admin-card-img {
  width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
}
.admin-card-ph { font-size: 28px; font-weight: 700; color: #d1d5db; }
.admin-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-card-name {
  font-size: 15px; font-weight: 600; color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-card-cat {
  font-size: 11px; background: #f3f4f6; color: #6b7280;
  padding: 2px 8px; border-radius: 8px;
}
.admin-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-card-tags em {
  font-size: 11px; background: #eff6ff; color: #1d4ed8;
  padding: 1px 8px; border-radius: 8px;
}
.admin-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.admin-card-price { font-size: 18px; font-weight: 700; color: #ef4444; }
.admin-card-stock { font-size: 11px; color: #9ca3af; }
.admin-card-actions { display: flex; gap: 6px; margin-top: 6px; }

.admin-empty {
  text-align: center; padding: 60px 20px; color: #9ca3af;
  background: #fff; border-radius: 10px; font-size: 14px;
}

.btn {
  display: inline-block; padding: 7px 16px; border-radius: 6px;
  border: none; cursor: pointer; font-size: 13px; transition: all .2s;
}
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-outline { background: #fff; border: 1px solid #d1d5db; color: #374151; }
.btn-outline:hover { background: #f9fafb; }
.btn-success { background: #10b981; color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.product-table {
  width: 100%; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.product-table th, .product-table td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.product-table th { background: #f9fafb; font-weight: 600; color: #6b7280; font-size: 12px; }
.product-table tr:last-child td { border-bottom: none; }
.product-table .price { color: #ef4444; font-weight: 600; }
.product-table .skin-badge {
  display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px;
  background: #f3f4f6; color: #6b7280;
}

.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: none; justify-content: center; align-items: center; z-index: 1000;
}
.modal-mask.active { display: flex; }
.modal {
  background: #fff; border-radius: 12px; padding: 22px; width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  max-width: calc(100vw - 32px);
}
.modal h3 { margin-bottom: 14px; font-size: 17px; flex-shrink: 0; }
.modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  min-height: 0; /* 关键：让 flex 子元素能正确收缩并滚动 */
}
.modal .form-group { margin-bottom: 12px; }
.modal label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 5px; }
.modal input, .modal textarea, .modal select {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
.modal textarea { min-height: 70px; resize: vertical; }
.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.qr-modal .qr-box { text-align: center; padding: 10px 0; }
.qr-modal .qr-box img { width: 200px; height: 200px; border-radius: 8px; }
.qr-modal .qr-url { word-break: break-all; font-size: 12px; color: #6b7280; margin-top: 10px; }

.skin-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.skin-opt {
  cursor: pointer; border: 2px solid #e5e7eb; border-radius: 8px; padding: 6px 10px;
  transition: all .15s; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff;
}
.skin-opt:hover { border-color: #9ca3af; }
.skin-opt.active { border-color: #2563eb; background: #eff6ff; }
.skin-opt .dot { width: 24px; height: 24px; border-radius: 6px; }

.import-result { margin-top: 12px; padding: 12px; background: #f9fafb; border-radius: 8px; font-size: 12px; }
.import-result .stats { display: flex; gap: 14px; margin-bottom: 8px; font-weight: 600; }
.import-result .stat-ok { color: #059669; }
.import-result .stat-skip { color: #d97706; }
.import-result .stat-fail { color: #dc2626; }
.import-result ul { max-height: 140px; overflow-y: auto; padding-left: 18px; }
.import-result li { margin: 2px 0; }


/* =====================================================
   四、响应式媒体查询
   ===================================================== */

/* 平板 & 手机 < 1024px：admin 切卡片模式 */
@media (max-width: 1023px) {
  /* admin 表格 → 卡片 */
  .admin-table-desktop { display: none !important; }
  .admin-card-list { display: flex !important; flex-direction: column; gap: 10px; }

  /* admin header 压缩 */
  .admin-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .admin-header h1 { font-size: 15px; }
  .admin-header .app-url {
    flex-basis: 100%; font-size: 11px; max-width: none;
  }

  /* admin toolbar */
  .admin-toolbar { flex-wrap: wrap; }
  .admin-toolbar h2 { font-size: 16px; }

  /* admin 弹窗 → 全屏 */
  .modal-mask { align-items: stretch !important; }
  .modal {
    width: 100%; max-width: none; border-radius: 0;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  .modal > h3 { flex-shrink: 0; margin-bottom: 12px; }
  .modal .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .modal .modal-actions { flex-shrink: 0; padding-top: 10px; border-top: 1px solid #f3f4f6; margin-top: 8px; }

  /* 二维码弹窗 & 导入弹窗 */
  #qrModal .modal-body,
  #importModal .modal-body { padding: 0; }
  #importModal .modal { width: 100%; }
}

/* 平板 480px ~ 1024px */
@media (min-width: 480px) and (max-width: 1023px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
  .shop-cart-icon { font-size: 16px; padding: 6px 10px; }
  .pc-name { font-size: 13px; }
  .pc-price b { font-size: 16px; }
  .product-detail { max-width: 560px; }
  .cat-item { width: 64px; }
  .cat-ico { width: 52px; height: 52px; font-size: 24px; }
}

/* PC > 1024px */
@media (min-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px; padding: 20px;
  }
  .pc-img { aspect-ratio: 1; }
  .pc-name { font-size: 14px; }
  .pc-add { width: 32px; height: 32px; font-size: 20px; }
  .shop-header-inner { padding: 14px 24px; gap: 16px; }
  .shop-logo { font-size: 20px; }
  .shop-search button { font-size: 13px; padding: 6px 18px; }
  .product-detail { max-width: 640px; }
  .admin-header h1 { font-size: 22px; }
}

/* 大屏 PC > 1440px */
@media (min-width: 1440px) {
  .shop-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 手机 < 480px */
@media (max-width: 479px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px; }
  .shop-cart-icon { font-size: 18px; padding: 7px 10px; }
  .pc-img { aspect-ratio: 4/5; }
  .pc-add { width: 28px; height: 28px; font-size: 16px; }
  .shop-header-inner { padding: 8px 10px; gap: 8px; }
  .shop-logo { font-size: 18px; }
  .shop-search input { font-size: 13px; }
  .pc-name { font-size: 12px; min-height: 32px; }
  .pc-price b { font-size: 16px; }

  /* admin 卡片 */
  .admin-card { padding: 10px; gap: 10px; }
  .admin-card-img { width: 70px; height: 70px; }
  .admin-card-name { font-size: 14px; }
  .admin-card-price { font-size: 16px; }
  .admin-card-actions button { padding: 4px 8px; font-size: 11px; }

  .admin-toolbar h2 { font-size: 15px; }
  .btn { padding: 6px 12px; font-size: 12px; }
}

/* 超小手机 < 360px */
@media (max-width: 359px) {
  .shop-search button { padding: 5px 10px; font-size: 11px; }
  .cat-item { width: 50px; }
  .cat-ico { width: 42px; height: 42px; font-size: 18px; }
  .pc-price b { font-size: 15px; }
  .product-detail .price { font-size: 28px; }
  .shop-cart-icon { padding: 7px 9px; font-size: 16px; }

  /* admin */
  .admin-card-img { width: 60px; height: 60px; }
  .admin-card-actions { flex-wrap: wrap; }
}

/* ========== Tab 切换 ========== */
.admin-tabs {
  display: flex; gap: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
}
.admin-tab {
  padding: 12px 20px;
  border: none; background: transparent;
  font-size: 14px; font-weight: 500;
  color: #6b7280; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.admin-tab:hover { color: #374151; }
.admin-tab.active { color: #10b981; border-bottom-color: #10b981; }

/* ========== 货架管理 ========== */
.admin-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.admin-shelf-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  transition: box-shadow .15s;
}
.admin-shelf-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

.admin-shelf-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.admin-shelf-code {
  font-family: 'Courier New', monospace;
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.admin-shelf-count {
  font-size: 11px; color: #6b7280;
  background: #f3f4f6; padding: 3px 10px; border-radius: 10px;
}

.admin-shelf-name { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 3px; }
.admin-shelf-note { font-size: 12px; color: #6b7280; margin-bottom: 12px; }

/* 货架商品预览图（前 4 张） */
.admin-shelf-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.admin-shelf-thumb {
  aspect-ratio: 1;
  border-radius: 6px;
  background: #f3f4f6 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #d1d5db;
}
.admin-shelf-thumb.more {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  font-size: 13px; font-weight: 600; color: #6b7280;
}

/* 货架卡片按钮 */
.admin-shelf-actions {
  display: flex; gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}
.admin-shelf-actions button {
  flex: 1;
  padding: 7px 0;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.admin-shelf-actions button:hover { background: #f9fafb; }
.admin-shelf-actions button.danger { color: #dc2626; }
.admin-shelf-actions button.danger:hover { background: #fef2f2; }

/* 空状态 */
.admin-empty {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
}
.admin-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.admin-empty p { font-size: 14px; }

/* 绑定弹窗的商品 chip */
.zone-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 14px;
  font-size: 12px;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
}
.zone-chip:hover { background: #e5e7eb; }
.zone-chip.active { background: #dcfce7; color: #166534; border-color: #86efac; }
.bind-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  max-width: 100%;
}
.bind-chip.has {
  background: #dcfce7; color: #166534;
  border: 1px solid #86efac;
}
.bind-chip.has:hover { background: #bbf7d0; }
.bind-chip.has .rm { font-weight: 700; }
.bind-chip.not {
  background: #f3f4f6; color: #374151;
  border: 1px solid #e5e7eb;
}
.bind-chip.not:hover { background: #e5e7eb; }
.bind-chip.not .add { color: #10b981; font-weight: 700; }
.bind-chip.disabled { opacity: .5; cursor: not-allowed; text-decoration: line-through; }

/* 移动端 Tab */
@media (max-width: 1023px) {
  .admin-tabs { padding: 0 8px; }
  .admin-tab { padding: 10px 14px; font-size: 13px; }
  .admin-shelf-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .admin-shelf-card { padding: 12px; }
  .admin-shelf-code { font-size: 15px; letter-spacing: 1px; }
  .admin-shelf-name { font-size: 13px; }
}