:root {
--primary: #0f766e;
--danger: #dc2626;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-500: #6b7280;
--gray-700: #374151;
--gray-900: #111827;
}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--gray-900);background:#fff}
.wrap{max-width:1600px;margin:0 auto;padding:40px 20px}
.page-title{font-size:24px;font-weight:400;margin:0 0 24px;color:#000}
.content{padding: 40px;background: #fff;}
.meta-bar{display:flex;align-items:center;margin-bottom:20px;gap:8px}
.meta-icon{color:var(--primary);width:20px;height:20px}
.meta-text{font-size:15px;color:var(--gray-700)}

.lists{display:flex;flex-direction:column;gap:32px}

.card{position:relative}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}
.card-title{font-size:16px;font-weight:700}
.card-close{border:0;background:transparent;cursor:pointer;padding:4px;color:var(--gray-900);opacity:0.6;transition:opacity .2s}
.card-close:hover{opacity:1}

.table-box{
border:1px solid var(--gray-200);
border-radius:12px;
overflow-x:auto;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
position:relative;
}

table{width:100%;border-collapse:collapse;min-width:1000px}

th{
background:var(--gray-50);
text-align:left;
padding:16px 20px;
font-size:14px;
font-weight:600;
color:var(--gray-900);
white-space:nowrap;
border-bottom:1px solid var(--gray-200);
}

td{
padding:20px;
vertical-align:middle;
font-size:14px;
color:var(--gray-900);
border-bottom:0;
}

/* First column specific */
td:first-child{min-width:200px}
.product-cell{display:flex;align-items:center;gap:16px}
.product-img{width:48px;height:80px;object-fit:contain;flex-shrink:0}
.product-info{display:flex;flex-direction:column;gap:4px}
.product-cat{font-size:12px;color:var(--gray-500);display:none} /* hide if not needed */
.product-name{font-weight:500;line-height:1.4}

/* Sticky columns */
.sticky-col{
position:sticky;
right:0;
background:#fff;
z-index:10;
box-shadow:-4px 0 12px -4px rgba(0,0,0,0.05);
}
th.sticky-col{background:var(--gray-50)}

.col-qty{right:60px;border-left:1px solid transparent}
.col-op{right:0;width:80px;text-align:center}

/* Quantity Control */
.qty-control{display:flex;align-items:center;gap:8px}
.qty-btn{
width:24px;height:24px;
background:var(--primary);
color:#fff;
border:0;
border-radius:2px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
font-size:16px;
line-height:1;
transition:opacity .2s;
}
.qty-btn:hover{opacity:0.9}
.qty-val{font-weight:600;min-width:20px;text-align:center}

/* Operation */
.del-btn{
border:0;background:transparent;
color:var(--danger);
cursor:pointer;
padding:6px;
display:flex;align-items:center;justify-content:center;
opacity:0.8;transition:opacity .2s;
}
.del-btn:hover{opacity:1}

.empty-state{text-align:center;padding:40px;color:var(--gray-500);background:var(--gray-50);border-radius:8px}

/* Scrollbar */
.table-box::-webkit-scrollbar {height: 8px;}
.table-box::-webkit-scrollbar-track {background: #f1f1f1;}
.table-box::-webkit-scrollbar-thumb {background: #ccc;border-radius: 4px;}
.table-box::-webkit-scrollbar-thumb:hover {background: #999;}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
.wrap { padding: 20px 10px; }
.content { padding: 20px 15px; }

.table-box {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  min-width: 800px; /* 减小移动端的最小宽度，让滑动更自然 */
}

th {
  padding: 12px 10px;
  font-size: 13px;
}

td {
  padding: 12px 10px;
  font-size: 13px;
}

td:first-child { min-width: 150px; }

.product-img { width: 40px; height: 60px; }

/* 移动端下保持操作列可见，但缩小宽度 */
.col-qty { right: 50px; }
.col-op { right: 0; width: 50px; padding: 0; text-align: center; }

.qty-control { gap: 6px; }
.qty-btn { width: 20px; height: 20px; font-size: 14px; }
}