/* new7 page shared styles */
:root {
  --cream: #FFF8F0;
  --cream-light: #FDF6F0;
  --mint: #A8E6CF;
  --mint-light: #D6F5E9;
  --peach: #FFD3B6;
  --peach-light: #FFE8D6;
  --text-primary: #4A4A4A;
  --text-secondary: #888;
  --shadow: 0 8px 32px rgba(0,0,0,.08);
  --border-radius: 20px;
  --cover-size: 84px;
}

html, body { overflow: auto !important; }

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background: linear-gradient(135deg,var(--cream-light) 0%,var(--mint-light) 100%);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  padding: 20px;
}

.container { max-width: 680px; margin: 0 auto; }

.header { display:flex; align-items:center; margin-bottom:30px; padding-top:20px; }
.header-text h1 { font-size:24px; font-weight:700; margin-bottom:4px; }
.header-text p { font-size:14px; color:var(--text-secondary); }

.back-btn { width:40px; height:40px; border-radius:50%; background: linear-gradient(135deg,var(--mint),var(--peach)); display:flex; align-items:center; justify-content:center; margin-right:12px; box-shadow:0 4px 12px rgba(0,0,0,.1); cursor:pointer; transition: transform .3s, box-shadow .3s; flex-shrink:0; }
.back-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }

.card { background:#fff; border-radius:var(--border-radius); padding:25px; margin-bottom:20px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition: transform .3s ease, box-shadow .3s ease; animation: fadeIn .6s ease-out forwards; }
.card:hover { transform: translateY(-5px); box-shadow: 0 12px 48px rgba(0,0,0,.12); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg,var(--mint),var(--peach)); }
.card-header { display:flex; align-items:center; margin-bottom:15px; }
.card-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:12px; font-size:18px; }
.card-icon.mint { background-color: var(--mint-light); color:#5D9B8C; }
.card-icon.peach { background-color: var(--peach-light); color:#D4957B; }
.card-title { font-size:16px; font-weight:600; }
.card-content { font-size:14px; color:var(--text-secondary); margin-bottom:15px; }

/* Date buttons */
.date-btn { flex:0 0 auto; padding:6px 12px; border:none; border-radius:12px; background: var(--mint); color:#fff; font-size:13px; cursor:pointer; text-decoration:none; }
.date-btn:active { transform: scale(.95); }
.date-btn.active { background: linear-gradient(135deg,#7BC8AF,#FFB990); box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* Stat card & progress */
.stat-card { background:#fff; border-radius:20px; box-shadow:0 8px 32px rgba(0,0,0,.08); padding:20px 24px; margin-bottom:20px; animation: fadeIn .6s ease-out forwards; }
.stat-header { display:flex; justify-content:space-between; align-items:center; }
.stat-title { font-size:16px; font-weight:600; color:#4A4A4A; }
.stat-date { font-size:14px; color:#888; }
.stat-count { margin-top:6px; font-size:14px; color:#888; }
.stat-count span { font-size:24px; font-weight:700; color:#FF8000; }
.stat-progress { margin-top:12px; }
.progress-bar { height:8px; background:#f2f2f2; border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; width:0; background: linear-gradient(90deg,#A8E6CF 0%,#FFD3B6 100%); transition: width .6s ease; }

/* Goods cards */
.goods-card { display:flex; background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.08); margin-bottom:16px; overflow:hidden; transition: transform .3s, box-shadow .3s; animation: fadeIn .6s ease-out forwards; }
.goods-card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0,0,0,.12); }
.cover {
  width: var(--cover-size);
  height: var(--cover-size);
  overflow: hidden;
  margin: 6px 0; /* 图片与卡片上下进一步留白 */
  border-radius: 10px; /* 与商品卡片相同的弧度 */
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.badge { position:absolute; top:6px; left:6px; padding:2px 6px; font-size:10px; border-radius:10px; color:#fff; }
.badge.stockout { background:#888; }
.badge.off { background:#FF3B30; }
.badge.free { background:#34C759; }
.info { flex:1; padding:8px 12px; display:flex; flex-direction:column; justify-content:space-between; }
.name { font-size:14px; font-weight:600; color:#4A4A4A; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.meta { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.price { font-size:14px; font-weight:700; color:#FF8000; }
.price.free { color:#34C759; }
.sales { font-size:12px; color:#888; }

.view-btn { padding:5px 10px; border:none; border-radius:12px; background: linear-gradient(135deg,var(--mint),var(--peach)); color:#fff; font-size:12px; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.1); transition: transform .2s, box-shadow .2s; }
.view-btn:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.15); }

@keyframes fadeIn { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }

/* Footer */
.footer { width:100%; margin-top:0.5rem; margin-bottom:2.5rem; display:block; }
.footer ul { list-style:none; padding:0; margin:0 0 10px; text-align:center; }
.footer ul li { color:#888; font-size:12px; }

/* Empty tip */
.empty-tip {text-align:center;color:#888;padding:30px 15px}

/* Responsive */
@media(max-width: 480px) {
  body { padding: 6px; }
  .container { max-width: 100%; }
  .card { padding: 22px; }
  .cover { width: var(--cover-size); height: var(--cover-size); }
  .name { font-size: 15px; }
  .price { font-size: 15px; }
  .header-text h1 { font-size: 26px; }
}