/* styles_commerce.css — Mall, products, orders, seller center, checkout */

/* V58 mall + mine 微信风格统一 */
#mallView,
#profileView,
#buyerOrdersManagePage,
#sellerCenterPage,
#sellerPaymentPage,
#sellerOrdersPage,
#sellerProductsPage,
#productDetailPage,
#orderDetailPage,
#broadcastManagePage,
#broadcastEditorPage,
#chatOrderDetailPage,
#broadcastDetailPage,
#productEditorPage,
#myProductsPage,
#settingsPage,
#groupManagePage,
#publishProductPage,
#myQrCodePage,
#profileDetailPage {
  background: var(--color-bg-secondary) !important;
}

#mallView .toolbar,
#profileView .toolbar,
#myProductsPage .toolbar,
#publishProductPage .toolbar,
#settingsPage .toolbar,
#groupManagePage .toolbar {
  background: var(--color-bg-secondary) !important;
  padding: 10px 12px;
}

#mallView #mallSearchInput {
  background: #fff;
  border: 1px solid #e8e8e8;
}

/* Mall location bar */
.mall-location-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
}
.mall-location-icon{ font-size: var(--font-body); flex-shrink:0; }
.mall-location-text{
  flex:1;
  font-size: var(--font-caption);
  color:#333;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mall-location-refresh{
  border:none;
  background:none;
  color:var(--brand);
  font-size: var(--font-xl);
  cursor:pointer;
  padding:0 4px;
  line-height:1;
}
.mall-location-refresh:active{ opacity:.6; }

/* Mall tabs */
.mall-tabs{
  display:flex;
  gap:0;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  padding:0 12px;
}
.mall-tab{
  flex:1;
  border:none;
  background:none;
  padding:10px 0;
  font-size: var(--font-body-sm);
  color:#666;
  cursor:pointer;
  position:relative;
  transition:color .2s;
}
.mall-tab.active{
  color:var(--brand);
  font-weight:600;
}
.mall-tab.active::after{
  content:'';
  position:absolute;
  bottom:0;
  left:25%;
  width:50%;
  height:2px;
  background:var(--brand);
  border-radius:1px;
}

/* Mall product card enhancements */
.product-desc{
  font-size: var(--font-micro);
  color:#8e8e93;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
}
.product-location{
  font-size: var(--font-mini);
  color:#bbb;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.product-location::before{
  content:'📍';
  margin-right:2px;
}

#mallList {
  background: var(--color-bg-secondary) !important;
  padding: 6px 8px 20px !important;
}

.mall-grid {
  gap: 10px;
  padding: 4px;
}

.product-card {
  border-radius: var(--radius-md);
  box-shadow: none;
  border: 1px solid #ececec;
}

.product-card img {
  height: 146px;
}

.product-title {
  font-weight: 500;
}

#profileView .chat-item,
#settingsPage .chat-item,
#groupManagePage .chat-item,
#myProductsPage .chat-item,
#sellerCenterPage .seller-center-card {
  border-bottom: 0.5px solid #ececec;
}

#myProfileCard {
  margin: 10px 10px 0;
  border-radius: var(--radius-card);
  border-bottom: none !important;
  background: #fff;
}

#profileView > .chat-item,
#profileView > button.chat-item,
#settingsPage > button.chat-item {
  margin: 0 10px;
  width: calc(100% - 20px);
  background: #fff;
}

#profileView > button.chat-item:last-child,
#settingsPage > button.chat-item:last-child {
  margin-bottom: 10px;
}

#sellerCenterPage .seller-center-hero,
#buyerOrdersManagePage .order-flow-head,
#sellerOrdersPage .order-flow-head,
#orderDetailPage .order-flow-head,
#broadcastManagePage .order-flow-head,
#broadcastEditorPage .order-flow-head,
#sellerPaymentPage .order-flow-head {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 12px;
  margin-bottom: 10px;
}

.order-flow-page {
  background: var(--color-bg-secondary);
  padding: 10px;
}

.order-cart-item,
.profile-order-card,
.broadcast-editor-card,
.order-flow-footer,
.order-detail-full,
.checkout-seller-info,
.checkout-remark-section,
.seller-center-card {
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid #ececec;
}

.order-flow-head strong,
.seller-center-hero strong {
  font-weight: 600;
  font-size: 18px;
}

.order-flow-head span,
.seller-center-hero span,
.profile-order-sub {
  color: #8c8c8c;
}

.profile-order-status {
  background: rgba(7, 193, 96, 0.12);
  color: var(--brand);
}

.profile-order-status.done {
  background: rgba(7, 193, 96, 0.18);
  color: var(--brand);
}

#saveSellerPaymentBtn,
#createBroadcastBtn,
#orderDetailCompleteBtn {
  background: var(--brand);
}



/* V59 wechat style refinement: hierarchy, spacing, and interaction */

#mallView,
#profileView,
.order-flow-page,
#settingsPage,
#groupManagePage,
#publishProductPage,
#myProductsPage {
  background: var(--color-bg-secondary) !important;
}

#mallView .toolbar,
#profileView .toolbar,
.seller-center-hero {
  border: 1px solid var(--color-border);
}

#profileView > button.chat-item,
#profileView > .chat-item,
#settingsPage > button.chat-item {
  min-height: 54px;
  padding-top: 14px;
  padding-bottom: 14px;
}

#profileView > button.chat-item span:last-child,
#settingsPage > button.chat-item span:last-child {
  color: #b4b4b4 !important;
}

.seller-center-grid {
  gap: 10px;
}

.seller-center-card,
.profile-order-card,
.broadcast-editor-card {
  background: var(--surface);
  border-color: var(--color-border);
}

.seller-center-card:active,
.profile-order-actions .secondary-btn:active,
.profile-order-actions .primary-btn:active {
  opacity: 0.82;
}

.order-flow-head strong,
.seller-center-hero strong,
.profile-order-title {
  color: var(--color-dark);
  letter-spacing: 0;
}

.order-flow-head span,
.seller-center-hero span,
.profile-order-sub,
.seller-center-card span {
  color: var(--text-muted);
}

#mallView #publishProductEntryBtn,
#saveSellerPaymentBtn,
#createBroadcastBtn,
#orderDetailCompleteBtn,
#productDetailAddCartBtn,
.profile-order-actions .primary-btn,
.order-flow-footer .primary-btn {
  background: var(--brand);
}

#mallView #publishProductEntryBtn:active,
#saveSellerPaymentBtn:active,
#createBroadcastBtn:active,
#orderDetailCompleteBtn:active,
#productDetailAddCartBtn:active,
.profile-order-actions .primary-btn:active,
.order-flow-footer .primary-btn:active {
  filter: brightness(0.94);
}

.home-tabbar {
  background: #f7f7f7;
  border-top-color: #d7d7d9;
}

.tab-item {
  font-size: 10px;
}

.tab-item.active {
  color: var(--brand);
}

/* V56 profile commerce flow */
.profile-store-section{
  margin:10px 12px 124px;
  background:#fff;
  border:1px solid #ebedf0;
  border-radius: var(--radius-xl);
  overflow:hidden;
  /* Prevent the store card from being flex-shrunk inside .chat-list-view
     (display:flex; flex-direction:column). overflow:hidden above makes its
     flex min-height default to 0, so without flex-shrink:0 it would compete
     with .profile-hero for vertical space and cause content clipping. */
  flex-shrink:0;
}
.store-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  margin-bottom:0;
  border-bottom:1px solid #f2f2f6;
  background:#fff;
}
.store-toolbar-title{
  font-size: var(--font-xl);
  line-height:1.3;
  font-weight:700;
  color:var(--color-dark);
}
.store-toolbar-link{
  display:block;
  width:100%;
  padding:12px 16px;
  border:0;
  border-top:1px solid #f2f2f6;
  background:#fff;
  color:var(--brand);
  font-size: var(--font-body-sm);
  font-weight:600;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.store-toolbar-link.hidden{ display:none; }
/* Split view: left category sidebar + right product panel (food-delivery style) */
.profile-store-split-view{
  display:flex;
  height:60vh;
  min-height:360px;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.profile-store-split-view.hidden{ display:none; }
.profile-store-cat-sidebar{
  width:88px;
  flex-shrink:0;
  overflow-y:auto;
  background:#f5f5f5;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.profile-store-cat-sidebar::-webkit-scrollbar{ display:none; }
.profile-store-cat-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 6px;
  font-size:var(--font-caption);
  color:#666;
  text-align:center;
  cursor:pointer;
  position:relative;
  word-break:break-all;
  line-height:1.3;
  border:none;
  background:transparent;
  width:100%;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.profile-store-cat-item.active{
  background:#fff;
  color:var(--brand);
  font-weight:700;
}
.profile-store-cat-item.active::before{
  content:'';
  position:absolute;
  left:0;
  top:20%;
  height:60%;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--brand);
}
.profile-store-right-panel{
  flex:1;
  overflow-y:auto;
  padding:0 8px 8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.profile-store-right-panel::-webkit-scrollbar{ display:none; }
.profile-store-group-header{
  position:sticky;
  top:0;
  background:#fff;
  padding:10px 4px 6px;
  font-size:var(--font-body-sm);
  font-weight:700;
  color:var(--color-dark);
  z-index:1;
}
.profile-store-list{
  display:flex;
  flex-direction:column;
}
#profileStoreListNocat.profile-store-list{
  padding:4px 0;
}
.profile-store-item{
  display:grid;
  grid-template-columns:96px 1fr auto;
  gap:12px;
  padding:12px 16px;
  background:#fff;
  border-radius:0;
  border:0;
  border-bottom:1px solid #f2f2f6;
  cursor:pointer;
}
#profileStoreListNocat.profile-store-list > .profile-store-item:last-child{
  border-bottom:0;
}
.profile-store-right-panel .profile-store-item{
  grid-template-columns:72px 1fr auto;
  gap:8px;
  padding:8px;
  border:none;
  border-bottom:1px solid #f2f2f6;
  border-radius:0;
}
.profile-store-item img,
.profile-store-item .profile-store-img{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius: var(--radius-lg);
  background:var(--color-gray-light);
}
.profile-store-right-panel .profile-store-item img,
.profile-store-right-panel .profile-store-item .profile-store-img{
  width:72px;
  height:72px;
}
.profile-store-img-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
  color:#9aa0a6;
  background:linear-gradient(135deg,#f5f7fa,#e4e7ec);
  user-select:none;
}
.profile-store-right-panel .profile-store-img-placeholder{
  font-size:20px;
}
.profile-store-info{
  min-width:0;
}
.profile-store-title{
  font-size: var(--font-body);
  line-height:1.35;
  font-weight:700;
  color:var(--color-dark);
}
.profile-store-desc{
  margin-top:4px;
  font-size: var(--font-micro);
  line-height:1.45;
  color:var(--color-gray);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.profile-store-price{
  margin-top:8px;
  font-size: var(--font-lg);
  line-height:1.2;
  font-weight:700;
  color:#ff3b30;
}
.profile-store-side{
  display:flex;
  align-items:flex-end;
}
.profile-store-side button{
  white-space:nowrap;
}
.profile-qty-stepper{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--color-gray-light);
  border-radius: var(--radius-full);
  padding:4px;
}
.qty-btn{
  border:0;
  width:28px;
  height:28px;
  border-radius: var(--radius-full);
  font-size: var(--font-xl);
  line-height:1;
  background:var(--color-border);
  color:var(--color-dark);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .12s,transform .12s;
}
.qty-btn:active:not(:disabled){
  transform:scale(.9);
}
.qty-btn.primary{
  background:var(--brand);
  color:#fff;
}
.qty-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.qty-num{
  min-width:18px;
  text-align:center;
  font-size: var(--font-body-sm);
  font-weight:700;
  color:var(--color-dark);
}
.profile-cart-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(10px + env(safe-area-inset-bottom));
  width:min(390px, calc(100vw - 24px));
  margin:0;
  padding:10px 12px;
  border-radius: var(--radius-xl);
  background:rgba(23,28,36,.96);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 10px 24px rgba(15,23,42,.28);
  z-index:35;
}
.profile-cart-bar .primary-btn{
  min-height:40px;
  border-radius: var(--radius-full);
  background:linear-gradient(135deg,#ff9f1a,#ff7a00);
  padding:0 20px;
  font-weight:700;
  font-size: var(--font-body-sm);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s;
}
.profile-cart-bar .primary-btn:active{
  transform:scale(.95);
}
.profile-cart-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.order-flow-page{
  background:#f5f6f8;
  padding:14px;
}
.order-flow-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:14px;
  padding:6px 2px;
}
.order-flow-head strong{
  font-size: var(--font-title-primary);
  line-height:1.25;
  font-weight:600;
}
.order-flow-head span{
  font-size: var(--font-micro);
  color:#8a9199;
}
.order-cart-list,.profile-orders-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.order-cart-item,.profile-order-card{
  background:#fff;
  border-radius: var(--radius-xl);
  padding:14px 16px;
  border:1px solid #ebedf0;
  contain:content;
  width:100%;
  text-align:left;
  cursor:pointer;
  transition:transform .12s,background .12s;
}
.profile-order-card:active{
  transform:scale(.985);
  background:#fafbfc;
}
.order-cart-title,.profile-order-title{
  font-size: var(--font-lg);
  line-height:1.35;
  font-weight:700;
  color:var(--color-dark);
}
.order-cart-sub,.profile-order-sub{
  margin-top:4px;
  font-size: var(--font-micro);
  line-height:1.45;
  color:var(--color-gray);
}
.order-cart-line{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.order-price-input{
  width:92px;
  min-height:36px;
  border-radius: var(--radius-md);
  border:1px solid #d1d5db;
  padding:0 10px;
  font-size: var(--font-body-sm);
}
/* Checkout page seller info */
.checkout-seller-info{
  background:#fff;
  border-radius: var(--radius-xl);
  padding:14px 16px;
  margin-bottom:12px;
  font-size: var(--font-lg);
  font-weight:700;
  color:var(--color-dark);
  border:1px solid #ebedf0;
  display:flex;
  align-items:center;
  gap:12px;
}
.checkout-seller-avatar{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.checkout-seller-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
.checkout-seller-name{
  font-size: var(--font-body);
  font-weight:700;
  color:var(--color-dark);
}
/* Checkout item layout */
.checkout-item{ padding:14px 16px; }
.checkout-item-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
}
.checkout-item-img{
  width:60px;
  height:60px;
  border-radius: var(--radius-md);
  object-fit:cover;
  flex-shrink:0;
  background:var(--color-gray-light);
}
.checkout-item-info{
  flex:1;
  min-width:0;
}
.checkout-item-info .order-cart-title{
  font-size: var(--font-body-sm);
  font-weight:600;
  color:var(--color-dark);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.checkout-item-info .order-cart-sub{
  margin-top:2px;
  font-size: var(--font-micro);
  color:#8a9199;
}
.checkout-item-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #f5f5f5;
}
.checkout-price-wrap{
  display:flex;
  align-items:center;
}
.checkout-price{
  font-size: var(--font-body-sm);
  font-weight:700;
  color:#ff3b30;
}
.checkout-price-editable{
  cursor:pointer;
  border-bottom:1px dashed #ff3b30;
  padding-bottom:1px;
}
.checkout-price-edit-btn{
  margin-left:6px;
  padding:4px 10px;
  font-size: var(--font-micro);
  border:1px solid #ffcdd2;
  color:#ff3b30;
  background:#fff;
  border-radius: var(--radius-full);
  cursor:pointer;
  white-space:nowrap;
  font-weight:500;
  transition:background .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.checkout-price-edit-btn:active{ background:#fff5f5; transform:scale(.95); }
/* Quantity stepper */
.checkout-qty-wrap{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.checkout-qty-btn{
  width:32px;
  height:32px;
  border:none;
  background:#f9fafb;
  font-size: var(--font-body);
  line-height:1;
  cursor:pointer;
  color:var(--color-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .12s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.checkout-qty-btn:active{ background:#e5e7eb; }
.checkout-qty-val{
  width:36px;
  text-align:center;
  font-size: var(--font-body-sm);
  font-weight:600;
  color:var(--color-dark);
  border-left:1px solid var(--color-border);
  border-right:1px solid var(--color-border);
  line-height:32px;
}
.checkout-remove-btn{
  border:none;
  background:none;
  color:#c0c4cc;
  font-size: var(--font-caption);
  cursor:pointer;
  padding:6px 10px;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.checkout-remove-btn:active{ color:#ef4444; }
/* Remark section */
.checkout-remark-section{
  margin-top:12px;
  background:#fff;
  border-radius: var(--radius-xl);
  padding:14px 16px;
  border:1px solid #ebedf0;
}
.checkout-remark-label{
  display:block;
  font-size: var(--font-body-sm);
  font-weight:600;
  color:var(--color-dark);
  margin-bottom:8px;
}
.checkout-remark-input{
  width:100%;
  border:1px solid #ebedf0;
  border-radius: var(--radius-md);
  padding:10px 12px;
  font-size: var(--font-body-sm);
  resize:vertical;
  font-family:inherit;
  color:var(--color-dark);
  box-sizing:border-box;
  background:#fafbfc;
  transition:border-color .2s;
}
.checkout-remark-input:focus{
  outline:none;
  border-color:var(--brand);
  background:#fff;
}
.order-flow-footer{
  position:sticky;
  bottom:0;
  z-index:10;
  margin-top:auto;
  background:#fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding:14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -2px 10px rgba(15,23,42,.08);
}
.order-total-line{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-bottom:12px;
  font-size: var(--font-body-sm);
  color:var(--color-gray);
}
.order-flow-footer strong{
  font-size: var(--font-title-primary);
  font-weight:700;
  color:#ff3b30;
}
.order-flow-footer .primary-btn{
  width:100%;
  min-height:44px;
  font-size: var(--font-body);
  font-weight:600;
  border-radius: var(--radius-card);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.order-flow-footer .primary-btn:active{
  transform:scale(.98);
}
.trade-picker-card{
  max-height:70vh;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.trade-picker-list{
  max-height:50vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.order-total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  font-size: var(--font-lg);
}
.profile-action-sheet{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,0.45);
  animation:fadeIn .2s ease;
}
.profile-action-sheet.hidden{
  display:none !important;
}
.profile-action-sheet-card{
  width:100%;
  max-width:480px;
  background:#fff;
  border-radius: var(--radius-xl) 16px 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,0.12);
  animation:slideUp .25s ease;
  max-height:80vh;
  overflow-y:auto;
  contain:layout style paint;
}
@keyframes slideUp{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.product-spec-card{
  padding:16px;
}
.product-spec-top{
  display:flex;
  gap:12px;
}
.product-spec-image{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius: var(--radius-lg);
  background:var(--color-gray-light);
}
.product-spec-meta{
  flex:1;
  min-width:0;
}
.product-spec-desc{
  margin-top:6px;
  font-size: var(--font-micro);
  color:var(--color-gray);
  line-height:1.45;
}
.product-spec-price{
  margin-top:10px;
  color:#ef4444;
  font-size: var(--font-2xl);
  font-weight:800;
}
.product-spec-options{
  margin-top:16px;
}
.product-spec-label{
  font-size: var(--font-caption);
  font-weight:700;
  color:#374151;
  margin-bottom:8px;
}
.spec-options-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.spec-option-chip{
  border:1px solid #d1d5db;
  background:#fff;
  border-radius: var(--radius-full);
  padding:8px 12px;
  font-size: var(--font-caption);
}
.spec-option-chip.active{
  border-color:#2563eb;
  color:#2563eb;
  background:#eff6ff;
}
.product-spec-qty-row{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.product-spec-actions{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.profile-order-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.profile-order-status{
  display:inline-flex;
  margin-top:8px;
  border-radius: var(--radius-full);
  padding:4px 8px;
  font-size: var(--font-micro);
  font-weight:700;
  background:#eff6ff;
  color:#2563eb;
}
.profile-order-status.done{
  background:#ecfdf5;
  color:#059669;
}


/* V57 seller center and order pages */
.seller-center-hero{
  background:#fff;
  border-radius: var(--radius-pill);
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
  margin-bottom:12px;
}
.seller-center-hero strong{
  display:block;
  font-size: var(--font-3xl);
  line-height:1.25;
}
.seller-center-hero span{
  display:block;
  margin-top:4px;
  font-size: var(--font-micro);
  color:var(--color-gray);
}
.seller-center-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.seller-center-card{
  text-align:left;
  border:0;
  background:#fff;
  border-radius: var(--radius-xl);
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.seller-center-card strong{
  display:block;
  font-size: var(--font-body);
  line-height:1.35;
  color:var(--color-dark);
}
.seller-center-card span{
  display:block;
  margin-top:6px;
  font-size: var(--font-micro);
  line-height:1.45;
  color:var(--color-gray);
}
/* ===== Product Detail Page (pd-*) ===== */
.pd-page{
  background:#f5f5f5 !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
}
.pd-image-wrap{
  width:100%;
  background:#e8e8e8;
  flex-shrink:0;
}
.pd-hero-image{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:#e8e8e8;
}
.pd-info-card{
  background:#fff;
  padding:16px;
  margin:0;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.pd-price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.pd-price{
  color:#e4393c;
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.5px;
}
.pd-stock-tag{
  font-size: var(--font-micro);
  color:#999;
  background:#f5f5f5;
  padding:2px 8px;
  border-radius: var(--radius-xs);
}
.pd-title{
  display:block;
  margin-top:10px;
  font-size: var(--font-title-primary);
  line-height:1.4;
  font-weight:700;
  color:#222;
}
.pd-desc{
  margin-top:8px;
  font-size: var(--font-caption);
  line-height:1.6;
  color:#666;
}
.pd-specs{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pd-bottom-bar{
  position:sticky;
  bottom:0;
  display:flex;
  gap:0;
  background:#fff;
  border-top:1px solid #eee;
  padding:8px 12px;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  flex-shrink:0;
  z-index:1;
}
.pd-bottom-bar.hidden{
  position:static;
  pointer-events:none;
}
.pd-btn-chat,.pd-btn-cart,.pd-btn-buy,.pd-btn-seller{
  flex:1;
  height:44px;
  border:none;
  font-size: var(--font-lg);
  font-weight:600;
  cursor:pointer;
}
.pd-btn-chat{
  background:var(--brand);
  color:#fff;
  border-radius:22px 0 0 22px;
  flex:0.6;
}
.pd-btn-cart{
  background:#ffa000;
  color:#fff;
  border-radius:0;
}
.pd-btn-buy{
  background:#e4393c;
  color:#fff;
  border-radius:0 22px 22px 0;
}
.pd-btn-seller{
  background:#fff;
  color:#333;
  border:1px solid #ddd;
  border-radius:22px;
  margin-left:8px;
  flex:0.6;
}
.pd-btn-chat:active,.pd-btn-cart:active,.pd-btn-buy:active,.pd-btn-seller:active{ opacity:.8; }
.pd-btn-cart:disabled,.pd-btn-buy:disabled{ opacity:.45; cursor:not-allowed; }

.pd-seller-actions{
  display:flex;
  gap:8px;
  padding:12px 16px;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  background:#f7f7f7;
  border-radius: var(--radius-md);
  margin:0 16px 8px;
  flex-shrink:0;
  position:relative;
  z-index:3;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.pd-seller-actions .sp-action-btn{
  flex:1;
  min-height:40px;
  touch-action:manipulation;
}

/* ===== Picker Pages (picker-*) ===== */
.picker-page{
  background:#f5f5f5 !important;
  padding:0 !important;
}
.picker-header{
  padding:16px 16px 8px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.picker-header strong{
  font-size: var(--font-xl);
  color:#222;
}
.picker-hint{
  font-size: var(--font-micro);
  color:#999;
}
.picker-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:8px 12px 20px;
}
.picker-product-card{
  background:#fff;
  border-radius: var(--radius-card);
  overflow:hidden;
  border:none;
  cursor:pointer;
  text-align:left;
  padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:transform .12s;
}
.picker-product-card:active{ transform:scale(.97); }
.picker-product-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:#f0f0f0;
}
.picker-product-info{
  padding:8px 10px 10px;
}
.picker-product-name{
  font-size: var(--font-caption);
  font-weight:600;
  color:#333;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.picker-product-price{
  margin-top:6px;
  font-size: var(--font-lg);
  font-weight:700;
  color:#e4393c;
}
.picker-tab-bar{
  display:flex;
  padding:0 16px;
  gap:0;
  border-bottom:1px solid #e8e8e8;
  background:#fff;
}
.picker-tab{
  flex:1;
  padding:12px 0;
  font-size: var(--font-body-sm);
  font-weight:600;
  color:#999;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:color .15s, border-color .15s;
}
.picker-tab.active{
  color:var(--brand);
  border-bottom-color:var(--brand);
}
.picker-order-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
}
.picker-order-card{
  background:#fff;
  border-radius: var(--radius-card);
  padding:14px;
  border:none;
  cursor:pointer;
  text-align:left;
  width:100%;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:transform .12s;
}
.picker-order-card:active{ transform:scale(.985); }
.picker-order-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.picker-order-id{
  font-size: var(--font-caption);
  color:#999;
}
.picker-order-role{
  font-size: var(--font-mini);
  padding:2px 8px;
  border-radius: var(--radius-xs);
  font-weight:600;
}
.picker-order-role.buyer{
  background:#fff7ed;
  color:#ea580c;
}
.picker-order-role.seller{
  background:#eff6ff;
  color:#2563eb;
}
.picker-order-items{
  margin-top:8px;
  font-size: var(--font-caption);
  color:#333;
  line-height:1.5;
}
.picker-order-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}
.picker-order-total{
  font-size: var(--font-body);
  font-weight:700;
  color:#e4393c;
}
.picker-order-status{
  font-size: var(--font-micro);
  padding:3px 8px;
  border-radius: var(--radius-xs);
  font-weight:600;
  background:#f0fdf4;
  color:#16a34a;
}

.broadcast-editor-card{
  background:#fff;
  border-radius: var(--radius-pill);
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.order-detail-actions{
  position:sticky;
  bottom:0;
  z-index:10;
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background:#fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:0 -2px 10px rgba(15,23,42,.08);
}
.order-detail-actions > button{
  flex:1; min-width:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
#orderDetailChatBtn.od-chat-solo{
  flex:none;
  width:auto;
  min-width:120px;
  padding:0 24px;
}
.order-detail-actions > button:active{
  transform:scale(.97);
}
.order-detail-full{
  background:#fff;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border:1px solid #ebedf0;
}
.od-section{
  padding:16px;
  border-bottom:1px solid #f5f5f5;
}
.od-section:last-child{ border-bottom:none; }
.od-section-title{
  font-weight:700; font-size: var(--font-lg); margin-bottom:10px; color:var(--color-dark);
}
.od-row{
  display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size: var(--font-body-sm);
}
.od-label{ color:#8a9199; font-size: var(--font-caption); }
.od-value{ color:var(--color-dark); font-weight:500; }
.od-link{ color:var(--brand) !important; }
.od-clickable{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.od-clickable:active{ opacity:.7; }
.od-status-done{ color:var(--brand); font-weight:600; }
.od-status-active{ color:#ff9500; font-weight:600; }
.od-item-row{
  display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f5f5f5;
}
.od-item-row:last-child{ border-bottom:none; }
.od-item-img{
  width:56px; height:56px; border-radius: var(--radius-md); object-fit:cover; flex-shrink:0; background:var(--color-gray-light);
}
.od-item-info{ flex:1; min-width:0; }
.od-item-name{
  font-size: var(--font-body-sm); font-weight:600; color:var(--color-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.od-item-spec{ font-size: var(--font-micro); color:#8a9199; margin-top:3px; }
.od-item-price{ font-size: var(--font-body-sm); font-weight:700; color:#ff3b30; white-space:nowrap; }
.od-total{ font-size: var(--font-title-primary); font-weight:700; color:#ff3b30; }
.od-total-section{ background:#fafbfc; border-radius:0 0 var(--radius-xl) var(--radius-xl); }
.broadcast-manage-actions{
  margin-bottom:12px;
}
.broadcast-editor-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.broadcast-editor-card textarea{
  min-height:120px;
  padding:12px;
}


/* V58 grouped seller cart */
.cart-hub-card{
  background:#fff;
  border-radius: var(--radius-xl);
  padding:14px 16px;
  border:1px solid #ebedf0;
  cursor:pointer;
  transition:background .15s,transform .12s;
}
.cart-hub-card:active{
  background:#f8fafc;
  transform:scale(.985);
}
.cart-hub-title{
  font-size: var(--font-body-sm);
  line-height:1.35;
  font-weight:700;
  color:var(--color-dark);
}
.cart-hub-sub{
  margin-top:4px;
  font-size: var(--font-micro);
  line-height:1.45;
  color:var(--color-gray);
}
.cart-hub-line{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cart-hub-line .primary-btn{
  min-height:36px;
  padding:0 20px;
  font-size: var(--font-caption);
  border-radius: var(--radius-full);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cart-hub-line .primary-btn:active{
  transform:scale(.95);
}
.me-action-btn{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:0;
  border-bottom:1px solid #eceef2;
  background:#fff;
  text-align:left;
  font-size: var(--font-body);
  line-height:1.35;
  color:var(--color-dark);
}


/* V60 admin backend */
.admin-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}
.admin-stat-card{
  background:#fff;
  border-radius: var(--radius-xl);
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.admin-stat-label{
  font-size: var(--font-micro);
  line-height:1.4;
  color:var(--color-gray);
}
.admin-stat-value{
  margin-top:6px;
  font-size: var(--font-4xl);
  line-height:1.1;
  font-weight:800;
  color:var(--color-dark);
}
.admin-list-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.admin-tag{
  display:inline-flex;
  padding:4px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-micro);
  font-weight:700;
  background:#eff6ff;
  color:#2563eb;
}
.admin-tag.warn{
  background:#fff7ed;
  color:#ea580c;
}


/* V61 mall/mine unified polish */
#mallView .toolbar,
#profileView .toolbar,
#settingsPage .toolbar,
#groupManagePage .toolbar,
#publishProductPage .toolbar {
  background: var(--color-bg-secondary) !important;
}

#profileView > .chat-item,
#profileView > button.chat-item,
#settingsPage > button.chat-item {
  border-left: 1px solid #ebedf0;
  border-right: 1px solid #ebedf0;
}

#settingsPage > button.chat-item:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#settingsPage > button.chat-item:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.order-flow-head,
.seller-center-hero,
.broadcast-editor-card,
.seller-center-card {
  box-shadow: none !important;
  border: 1px solid #ebedf0 !important;
}

.primary-btn {
  background: var(--brand);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s, opacity .15s;
}
.primary-btn:active:not(:disabled) {
  transform: scale(.97);
}
.primary-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.secondary-btn,
.order-detail-actions .secondary-btn,
.profile-order-actions .secondary-btn {
  border-color: #dfe3e8 !important;
  color: #57606a !important;
  background: #fff !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.secondary-btn:active,
.order-detail-actions .secondary-btn:active,
.profile-order-actions .secondary-btn:active {
  background: #f4f5f7 !important;
  transform: scale(.97);
}

.order-flow-head strong,
.seller-center-hero strong {
  font-size: 17px !important;
  font-weight: 600 !important;
}

.order-flow-head span,
.seller-center-hero span,
.profile-order-sub,
.seller-center-card span {
  color: #8a9199 !important;
}


/* Search pages – toolbar pinned at top */
#msgSearchPage,
#mallSearchPage {
  background: #f2f2f6;
}
#msgSearchPage .toolbar,
#mallSearchPage .toolbar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* V62 consistency fixes for mall/mine secondary pages */
#mallView,
#profileView,
.order-flow-page {
  -webkit-overflow-scrolling: touch;
}

#mallList,
#buyerOrdersManageList,
#sellerOrdersList,
#sellerProductsList,
#broadcastDraftList {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ---- Preset Chips (category/spec selector) ---- */
.preset-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.preset-header .publish-field-label{margin-bottom:0;}
.preset-manage-link{background:none;border:none;color:var(--brand);font-size: var(--font-caption);cursor:pointer;padding:0;}
.preset-chips-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;min-height:28px;}
.preset-chip{height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--color-border);background:#fff;color:#333;font-size: var(--font-caption);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
.preset-chip.selected{background:var(--brand);color:#fff;border-color:var(--brand);}
.preset-chip:active{opacity:.7;}

/* ---- Preset Management Panel ---- */
.preset-manage-panel{position:fixed;inset:0;z-index:100001;display:flex;align-items:flex-end;justify-content:center;}
.preset-manage-panel.hidden{display:none;}
.preset-manage-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.preset-manage-sheet{position:relative;width:100%;max-width:500px;max-height:70vh;background:#fff;border-radius: var(--radius-lg) 14px 0 0;display:flex;flex-direction:column;animation:sheetUp .25s ease;}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.preset-manage-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:0.5px solid var(--color-border);font-size: var(--font-body);font-weight:600;}
.preset-manage-close{background:none;border:none;font-size: var(--font-3xl);color:#999;cursor:pointer;padding:0 4px;}
.preset-manage-list{flex:1;overflow-y:auto;padding:8px 0;}
.preset-manage-item{display:flex;align-items:center;padding:10px 16px;gap:10px;background:#fff;transition:box-shadow .15s, background .15s;}
.preset-drag-handle{
  cursor:grab;
  color:#c0c4cc;
  font-size: var(--font-xl);
  line-height:1;
  padding:4px 2px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  flex-shrink:0;
}
.preset-drag-handle:active{cursor:grabbing;color:#999;}
.preset-manage-item.preset-drag-placeholder{
  opacity:.3;
  background:#f5f7fa;
}
.preset-drag-ghost{
  position:absolute!important;
  left:0;
  z-index:10;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  border-radius: var(--radius-base);
  pointer-events:none;
  opacity:.92;
}
.preset-manage-item-text{flex:1;font-size: var(--font-body-sm);color:#333;}
.preset-manage-item-edit,.preset-manage-item-del{background:none;border:none;font-size: var(--font-caption);cursor:pointer;padding:2px 6px;}
.preset-manage-item-edit{color:var(--brand);}
.preset-manage-item-del{color:#e74c3c;}
.preset-manage-add-row{display:flex;gap:8px;padding:12px 16px;border-top:0.5px solid var(--color-border);padding-bottom:calc(12px + env(safe-area-inset-bottom));}
.preset-manage-input{flex:1;height:36px;border:1px solid var(--color-border);border-radius: var(--radius-base);padding:0 10px;font-size: var(--font-body-sm);outline:none;}
.preset-manage-input:focus{border-color:var(--brand);}
.preset-manage-add-btn{height:36px;padding:0 16px;border:none;border-radius: var(--radius-base);background:var(--brand);color:#fff;font-size: var(--font-body-sm);font-weight:500;cursor:pointer;}
.preset-manage-add-btn:active{opacity:.8;}

.seller-center-card strong,
.profile-order-title {
  line-height: 1.35;
}

.seller-center-card span,
.profile-order-sub,
.order-flow-head span {
  line-height: 1.5;
}

.order-detail-actions .primary-btn,
.order-detail-actions .secondary-btn,
.profile-order-actions .primary-btn,
.profile-order-actions .secondary-btn {
  min-height: 42px;
  border-radius: var(--radius-md);
  font-size: var(--font-body-sm);
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s, background .15s;
}

.order-detail-actions,
.profile-order-actions {
  gap: 10px;
}

#myProfileCard,
#profileView > button.chat-item,
#settingsPage > button.chat-item,
.seller-center-card,
.profile-order-card,
.seller-center-hero,
.broadcast-editor-card {
  transition: background-color .15s ease, opacity .15s ease;
}

#profileView > button.chat-item:active,
#settingsPage > button.chat-item:active,
.seller-center-card:active {
  background: #f7f8fa !important;
}


/* V64: only fix "我" page list insets (do not re-center whole page shell) */
#profileView {
  padding: 10px 0 14px;
}

#profileView > .chat-item,
#profileView > button.chat-item {
  margin: 0;
  width: 100%;
  border-radius: 0;
  border-left: none !important;
  border-right: none !important;
}

#myProfileCard {
  margin: 0 0 8px;
}

#profileView > button.chat-item {
  margin-bottom: 1px;
}



/* ── Seller products toolbar ── */
.seller-products-toolbar{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
.sp-publish-btn{
  width:100%;
  height:44px;
  border:none;
  border-radius: var(--radius-card);
  background:var(--brand);
  color:#fff;
  font-size: var(--font-lg);
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}
.sp-publish-btn:active{opacity:.8;}
.sp-publish-fixed-wrap{
  position:sticky;
  bottom:0;
  padding:12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid var(--color-border);
  z-index:10;
  margin-top:auto;
  flex-shrink:0;
}
#sellerProductsList{
  padding-bottom:12px;
}
.sp-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.sp-tab{
  height:38px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:#fff;
  color:var(--color-gray);
  font-size: var(--font-body-sm);
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.sp-tab.active{
  border-color:var(--brand);
  color:var(--brand);
  background:#ecfdf5;
  font-weight:600;
}
.sp-filter-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.sp-search-wrap{
  position:relative;
  flex:1;
  min-width:120px;
}
.sp-search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size: var(--font-caption);
  pointer-events:none;
}
.sp-search-input{
  width:100%;
  height:40px;
  border:none;
  border-radius: var(--radius-card);
  background:#fff;
  padding:0 12px 0 34px;
  font-size: var(--font-body-sm);
  color:#1f2937;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  outline:none;
  box-sizing:border-box;
  transition:box-shadow .2s;
}
.sp-search-input:focus{box-shadow:0 0 0 2px rgba(7,193,96,.25);}
.sp-search-input::placeholder{color:#b0b7c3;}
.sp-sort-select{
  width:100%;
  height:40px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-card);
  background:#fff;
  padding:0 12px;
  font-size: var(--font-body-sm);
  color:#374151;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

/* ── Seller product cards ── */
.sp-card{
  background:#fff;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;
  transition:transform .12s;
  contain:content;
}
.sp-card:active{transform:scale(.985);}
.sp-card-img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  background:var(--color-gray-light);
}
.sp-card-body{
  padding:12px;
}
.sp-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.sp-card-title{
  font-size: var(--font-lg);
  font-weight:700;
  color:var(--color-dark);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.sp-card-desc{
  font-size: var(--font-micro);
  color:#9ca3af;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:8px;
}
.sp-card-meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}
.sp-card-price{
  font-size: var(--font-title-primary);
  font-weight:800;
  color:var(--color-dark);
}
.sp-card-stock{
  font-size: var(--font-micro);
  color:var(--color-gray);
}
.sp-card-stock.low{
  color:#ef4444;
  font-weight:600;
}
.sp-card-actions{
  display:flex;
  gap:8px;
  border-top:1px solid var(--color-gray-light);
  padding-top:10px;
}
.sp-action-btn{
  flex:1;
  height:32px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-base);
  background:#fff;
  color:#374151;
  font-size: var(--font-micro);
  font-weight:500;
  cursor:pointer;
  transition:background .15s;
}
.sp-action-btn:active{background:#f9fafb;}
.sp-action-btn.accent{
  border-color:var(--brand);
  color:var(--brand);
  background:#ecfdf5;
}
.sp-action-btn.danger{
  border-color:#fecaca;
  color:#ef4444;
  background:#fef2f2;
}


/* V66 publish page (takeout-like structure) */
.publish-product-page{
  background:#f5f5f5 !important;
  padding:0 0 20px;
}
.publish-form-card{
  background:#fff;
  border-radius:0;
  border:none;
  border-bottom:8px solid #f5f5f5;
  padding:16px;
  margin-bottom:0;
}
.publish-form-card:last-of-type{ border-bottom:none; }
.publish-field-label{
  display:block;
  font-size: var(--font-body-sm);
  font-weight:600;
  color:#222;
  margin:12px 0 8px;
}
.publish-field-label:first-child{ margin-top:0; }
.publish-field-input{
  width:100%;
  border:none;
  border-bottom:1px solid #f0f0f0;
  border-radius:0;
  padding:10px 0;
  font-size: var(--font-lg);
  line-height:1.5;
  background:transparent;
  outline:none;
  color:#333;
}
.publish-field-input::placeholder{ color:#ccc; }
.publish-field-input:focus{
  border-color:#ff5722;
  box-shadow:none;
}
.publish-price-wrap{
  display:flex; align-items:center; gap:2px;
}
.publish-price-prefix{
  font-size: var(--font-2xl); font-weight:700; color:#ff5722; flex-shrink:0;
}
.publish-price-input{
  font-size: var(--font-4xl); font-weight:700; color:#ff5722;
}
.publish-price-input::placeholder{ color:#ffccbc; font-weight:400; }
.tag-input-wrap{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:none; border-bottom:1px solid #f0f0f0; border-radius:0; padding:8px 0;
  background:transparent; min-height:42px; cursor:text;
}
.tag-input-wrap:focus-within{
  border-color:#ff5722; box-shadow:none;
}
.tag-item{
  display:inline-flex; align-items:center; gap:4px;
  background:#fff5f0; color:#ff5722; border:1px solid #ffccbc; border-radius: var(--radius-xl);
  padding:5px 10px; font-size: var(--font-caption); line-height:1.3;
  white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis;
}
.tag-item-remove{
  border:none; background:none; color:#ff8a65; font-size: var(--font-lg); line-height:1;
  padding:0 0 0 2px; cursor:pointer; flex-shrink:0;
}
.tag-item-remove:hover{ color:#d32f2f; }
.tag-text-input{
  flex:1; min-width:80px; border:none; outline:none; background:transparent;
  font-size: var(--font-body-sm); padding:2px 0; line-height:1.4; color:#333;
}
.tag-text-input::placeholder{ color:#ccc; }
.publish-grid-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.publish-image-preview{
  width:100px;
  height:100px;
  border-radius: var(--radius-base);
  border:1px dashed #ddd;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#bbb;
  font-size:32px;
  overflow:hidden;
  cursor:pointer;
}
.publish-submit-wrap{
  padding:16px;
  position:sticky;
  bottom:0;
  background:#fff;
  border-top:1px solid #f0f0f0;
}
.publish-submit-btn{
  width:100%;
  background:#ff5722 !important;
  border-radius:24px !important;
  font-size: var(--font-title-primary);
  font-weight:600;
  height:48px;
}


/* ── Order toolbar: search + filter toggle ── */
.order-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.order-toolbar .order-search-wrap{
  flex:1;
  position:relative;
}
.order-toolbar .order-search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size: var(--font-caption);
  pointer-events:none;
}
.order-search-input{
  width:100%;
  height:40px;
  border:1px solid #ebedf0;
  border-radius: var(--radius-card);
  background:#fff;
  padding:0 12px 0 34px;
  font-size: var(--font-body-sm);
  color:#1f2937;
  outline:none;
  transition:border-color .2s;
  box-sizing:border-box;
}
.order-search-input:focus{
  border-color:var(--brand);
}
.order-search-input::placeholder{
  color:#b0b7c3;
}
.order-filter-toggle{
  flex-shrink:0;
  height:40px;
  padding:0 16px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-card);
  background:#fff;
  color:var(--color-gray);
  font-size: var(--font-caption);
  font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .12s;
  position:relative;
  z-index:2;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.order-filter-toggle:active{
  transform:scale(.95);
}
.order-filter-toggle.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

/* ── Collapsible filter drawer ── */
.order-filter-drawer{
  display:none;
  background:#fff;
  border-radius: var(--radius-lg);
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.order-filter-drawer.open{
  display:block;
}
.order-filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.order-filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.order-filter-field span{
  font-size: var(--font-micro);
  color:#8b93a1;
  font-weight:500;
}
.order-filter-field .ui-input{
  border-radius: var(--radius-md);
  min-height:36px;
  font-size: var(--font-caption);
}
.order-filter-presets{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.order-filter-chip{
  border:1px solid var(--color-border);
  border-radius: var(--radius-full);
  background:#f9fafb;
  color:#4b5563;
  font-size: var(--font-micro);
  padding:7px 16px;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.order-filter-chip:active{
  transform:scale(.93);
}
.order-filter-chip.active{
  border-color:var(--brand);
  background:rgba(7,193,96,.12);
  color:#067647;
  font-weight:500;
}
.order-filter-clear-chip{
  margin-left:auto;
  color:#ef4444;
  border-color:#fecaca;
  background:#fef2f2;
}
.order-filter-clear-chip:active{
  background:#fde8e8;
}
@media (max-width:420px){
  .order-filter-grid{grid-template-columns:1fr;}
}

/* ── Order date picker trigger button ── */
.order-date-btn{
  width:100%;
  min-height:36px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:#f9fafb;
  color:#1f2937;
  font-size: var(--font-caption);
  text-align:left;
  padding:0 10px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.order-date-btn:active{
  background:#eef0f3;
}
.order-date-btn.placeholder{
  color:#b0b7c3;
}

/* ── WeChat-style Date Picker ── */
.date-picker-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transition:opacity .25s;
}
.date-picker-overlay.hidden{
  display:none;
}
.date-picker-sheet{
  width:100%;
  max-width:500px;
  background:#fff;
  border-radius: var(--radius-xl) 16px 0 0;
  position:relative;
  overflow:hidden;
  animation:dpSlideUp .25s ease;
}
@keyframes dpSlideUp{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}
.date-picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #f0f0f0;
}
.date-picker-cancel,
.date-picker-confirm{
  border:none;
  background:none;
  font-size: var(--font-lg);
  cursor:pointer;
  padding:4px 8px;
}
.date-picker-cancel{color:#999;}
.date-picker-confirm{color:var(--brand);font-weight:600;}
.date-picker-title{
  font-size: var(--font-lg);
  font-weight:600;
  color:#333;
}

/* Columns container */
.date-picker-columns{
  display:flex;
  height:220px;
  position:relative;
  z-index:2;
}
.date-picker-col{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  position:relative;
}
.date-picker-col::-webkit-scrollbar{display:none;}
.date-picker-col .dp-item{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--font-body);
  color:#999;
  scroll-snap-align:center;
  transition:color .15s, font-weight .15s;
  user-select:none;
  -webkit-user-select:none;
}
.date-picker-col .dp-item.selected{
  color:#1a1a1a;
  font-weight:600;
}

/* Selection indicator line */
.date-picker-indicator{
  position:absolute;
  left:16px;
  right:16px;
  top:calc(50% + 26px);
  height:44px;
  transform:translateY(-50%);
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  pointer-events:none;
  z-index:1;
}

/* Gradient masks for fade effect */
.date-picker-mask-top,
.date-picker-mask-bottom{
  position:absolute;
  left:0;right:0;
  height:88px;
  pointer-events:none;
  z-index:3;
}
.date-picker-mask-top{
  top:48px;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,0));
}
.date-picker-mask-bottom{
  bottom:0;
  background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0));
}

/* ── Redesigned order cards ── */
.order-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.order-card-id{
  font-size: var(--font-caption);
  font-weight:600;
  color:#374151;
  font-family:monospace;
}
.order-card-status{
  font-size: var(--font-mini);
  font-weight:600;
  padding:3px 10px;
  border-radius: var(--radius-full);
  line-height:1.4;
  white-space:nowrap;
}
.order-card-status.s-pending{
  background:#fff7ed;
  color:#c2410c;
  border:1px solid #fed7aa;
}
.order-card-status.s-active{
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
}
.order-card-status.s-done{
  background:#ecfdf5;
  color:#059669;
  border:1px solid #a7f3d0;
}
.order-card-body{
  margin-bottom:10px;
}
.order-card-items{
  font-size: var(--font-caption);
  color:var(--color-gray);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.order-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.order-card-price{
  font-size: var(--font-body-sm);
  font-weight:700;
  color:#ff3b30;
}
.order-card-time{
  font-size: var(--font-mini);
  color:#9ca3af;
}
.order-card-actions{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--color-gray-light);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.order-card-actions .primary-btn,
.order-card-actions .secondary-btn{
  min-height:34px;
  padding:0 16px;
  font-size: var(--font-caption);
  border-radius: var(--radius-base);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.order-card-actions .primary-btn:active,
.order-card-actions .secondary-btn:active{
  transform:scale(.96);
}
.order-card-del-btn{
  border:1px solid #fecaca;
  background:#fff;
  color:#ef4444;
  font-size: var(--font-micro);
  font-weight:600;
  padding:6px 14px;
  border-radius: var(--radius-base);
  cursor:pointer;
  transition:background .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.order-card-del-btn:active{
  background:#fef2f2;
  transform:scale(.95);
}

/* ── Order empty state ── */
.order-empty-state{
  text-align:center;
  padding:56px 16px;
  color:#b0b7c3;
  font-size: var(--font-body-sm);
}
.order-empty-icon{
  font-size:40px;
  margin-bottom:12px;
  opacity:.5;
}


/* V67 seller center + publish visual polish */
#sellerCenterPage{
  background: #f5f6f8;
}
#sellerCenterPage .seller-center-hero{
  border:1px solid #ebedf0 !important;
  background:#fff;
  border-radius: var(--radius-xl);
  padding:16px;
}
#sellerCenterPage .seller-center-grid{
  gap:10px;
}
#sellerCenterPage .seller-center-card{
  text-align:left;
  border:1px solid #ebedf0 !important;
  border-radius: var(--radius-xl);
  padding:16px;
  background:#fff;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.seller-center-icon{
  width:36px;
  height:36px;
  border-radius: var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f7ff;
  font-size: var(--font-xl);
  margin-bottom:8px;
}

.publish-page-hero{ display:none; }