* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:#f5f5f5; color:#333; }
a { color:#e74c3c; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
.btn { display:inline-block; padding:8px 20px; border:none; border-radius:4px; cursor:pointer; font-size:14px; background:#ddd; color:#333; text-decoration:none; }
.btn:hover { opacity:0.85; text-decoration:none; }
.btn-primary { background:#e74c3c; color:#fff; }
.btn-success { background:#27ae60; color:#fff; }
.btn-danger { background:#c0392b; color:#fff; }
.btn-block { display:block; width:100%; text-align:center; }
.btn-sm { padding:4px 12px; font-size:12px; }
.error { color:#c0392b; margin:10px 0; padding:8px; background:#fde; border-radius:4px; }
.success { color:#27ae60; margin:10px 0; padding:8px; background:#d4edda; border-radius:4px; }
.empty { text-align:center; padding:40px; color:#999; }
.price { color:#e74c3c; font-weight:bold; font-size:18px; }

/* Header */
.header { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:12px 0; position:sticky; top:0; z-index:100; }
.header .container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:20px; color:#e74c3c; }
.logo a { color:#e74c3c; }
.nav a { margin-left:15px; font-size:14px; }

/* Notice */
.notice-bar { background:#fff8e1; padding:8px 0; overflow:hidden; }
.notice-bar .container { display:flex; align-items:center; }
.notice-icon { margin-right:10px; }
.notice-scroll { overflow:hidden; white-space:nowrap; }
.notice-item { margin-right:40px; font-size:14px; color:#666; }

/* Banner */
.banner-wrap { position:relative; max-width:1200px; margin:15px auto; overflow:hidden; border-radius:8px; }
.banner-slider { position:relative; height:350px; }
.banner-slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.5s; }
.banner-slide.active { opacity:1; }
.banner-slide img { width:100%; height:100%; object-fit:cover; }
.banner-dots { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; }
.dot.active { background:#fff; }

/* Categories */
.categories { display:flex; flex-wrap:wrap; gap:10px; padding:20px 0; }
.cat-item { padding:6px 16px; background:#fff; border-radius:20px; font-size:14px; color:#666; border:1px solid #eee; }
.cat-item.active, .cat-item:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; text-decoration:none; }

/* Product Grid */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; padding-bottom:30px; }
.product-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:transform 0.2s; }
.product-card:hover { transform:translateY(-3px); }
.product-card img { width:100%; height:200px; object-fit:cover; }
.product-card a { color:#333; text-decoration:none; }
.product-info { padding:12px; }
.product-info h3 { font-size:14px; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Product Detail */
.product-detail { display:flex; gap:30px; padding:30px 0; background:#fff; border-radius:8px; padding:30px; margin:20px 0; }
.product-image { flex:0 0 400px; }
.product-image img { width:100%; border-radius:8px; }
.product-meta { flex:1; }
.product-meta h2 { margin-bottom:15px; }
.product-meta .stock { color:#999; margin:10px 0; }
.product-desc { margin:15px 0; color:#666; line-height:1.8; }
.product-actions { margin-top:20px; display:flex; align-items:center; gap:15px; }
.product-actions input { width:60px; padding:6px; text-align:center; border:1px solid #ddd; border-radius:4px; }

/* Cart */
.cart-table { width:100%; background:#fff; border-radius:8px; border-collapse:collapse; margin:15px 0; }
.cart-table th, .cart-table td { padding:12px; text-align:center; border-bottom:1px solid #f0f0f0; }
.cart-table th { background:#fafafa; }
.cart-product { display:flex; align-items:center; gap:10px; text-align:left; }
.cart-product img { width:60px; height:60px; object-fit:cover; border-radius:4px; }
.qty-control { display:flex; align-items:center; justify-content:center; gap:5px; }
.qty-control button { width:28px; height:28px; border:1px solid #ddd; background:#fff; cursor:pointer; border-radius:4px; }
.qty-input { width:50px; text-align:center; border:1px solid #ddd; border-radius:4px; padding:4px; }
.cart-footer { display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:15px 0; }
.cart-total { font-size:18px; }
.cart-total span { color:#e74c3c; font-weight:bold; }

/* Orders */
.order-card { background:#fff; border-radius:8px; margin:15px 0; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.order-header { display:flex; justify-content:space-between; padding:12px 15px; background:#fafafa; font-size:13px; color:#999; }
.order-status { color:#e74c3c; font-weight:bold; }
.order-items { padding:10px 15px; }
.order-item-row { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; }
.order-footer { display:flex; justify-content:flex-end; align-items:center; gap:15px; padding:12px 15px; border-top:1px solid #f0f0f0; font-size:14px; }

/* Pay */
.pay-page { max-width:600px; margin:30px auto; background:#fff; padding:30px; border-radius:8px; }
.pay-info { margin:20px 0; padding:15px; background:#fafafa; border-radius:4px; }
.pay-methods { margin-top:20px; }
.pay-method { margin:20px 0; padding:20px; border:1px solid #eee; border-radius:8px; }
.pay-method h3 { margin-bottom:15px; }
.pay-method label { margin-right:15px; }
.qrcode-list { display:flex; gap:20px; margin:15px 0; }
.qrcode-item { text-align:center; }
.qrcode-item img { max-width:200px; border:1px solid #eee; border-radius:4px; }
.proof-form { margin-top:15px; }

/* Auth */
.auth-page { display:flex; justify-content:center; align-items:center; min-height:100vh; background:#f5f5f5; }
.auth-box { background:#fff; padding:40px; border-radius:8px; width:400px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.auth-box h2 { text-align:center; margin-bottom:25px; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; font-size:14px; color:#666; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:4px; font-size:14px; }
.form-group textarea { resize:vertical; min-height:80px; }
.auth-link { text-align:center; margin-top:15px; font-size:14px; }

/* Footer */
.footer { background:#333; color:#999; text-align:center; padding:20px 0; margin-top:30px; font-size:13px; }
.footer p { margin:3px 0; }

/* Responsive */
@media (max-width:768px) {
  .product-detail { flex-direction:column; }
  .product-image { flex:none; }
  .product-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .banner-slider { height:200px; }
  .cart-product img { width:40px; height:40px; }
}