/* 全局样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f6fa; color: #2c3e50; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 导航 */
.header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
.header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.logo { font-size: 24px; font-weight: bold; color: #3498db; }
.nav { display: flex; gap: 30px; }
.nav a { color: #555; font-weight: 500; transition: color 0.3s; font-size: 14px; }
.nav a:hover, .nav a.active { color: #3498db; }

/* 内容 */
.main-content { min-height: calc(100vh - 200px); padding: 40px 0; }
.hero { text-align: center; padding: 60px 0; }
.hero h2 { font-size: 36px; margin-bottom: 10px; color: #2c3e50; }
.hero p { font-size: 18px; color: #7f8c8d; }
.products h3 { font-size: 24px; margin-bottom: 30px; color: #2c3e50; }

/* 商品网格 */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 25px; }
.product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.product-image { width: 100%; height: 200px; overflow: hidden; background: #f8f9fa; display: flex; align-items: center; justify-content: center; }
.product-image img { width: 100%; height: 100%; object-fit: cover; max-width: 100%; }
.product-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #bdc3c7; font-size: 14px; }
.product-info { padding: 20px; }
.product-info h4 { font-size: 16px; margin-bottom: 8px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-info .price { font-size: 20px; font-weight: bold; color: #e74c3c; }
.no-products { text-align: center; padding: 60px; color: #7f8c8d; grid-column: 1 / -1; }

/* 商品详情 */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.product-image-section { position: relative; }
.product-image-placeholder.large { width: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; color: #bdc3c7; font-size: 18px; }
.product-info-section h1.product-title { font-size: 32px; margin-bottom: 20px; }
.product-price-section { margin: 20px 0; }
.product-price { font-size: 36px; font-weight: bold; color: #e74c3c; }
.product-description { margin: 30px 0; padding: 20px; background: #f8f9fa; border-radius: 8px; }
.product-description h3 { margin-bottom: 10px; color: #2c3e50; }
.product-description p { color: #555; line-height: 1.8; }
.paypal-section { margin-top: 20px; }

/* 表单 */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #3498db; }
.form-group textarea { min-height: 200px; resize: vertical; }

/* 按钮 */
.btn { display: inline-block; padding: 10px 25px; background: #3498db; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.3s; }
.btn:hover { background: #2980b9; }
.btn-sm { padding: 6px 15px; font-size: 12px; }
.btn-success { background: #27ae60; }
.btn-success:hover { background: #229954; }
.btn-danger { background: #e74c3c; }
.btn-danger:hover { background: #c0392b; }
.btn-warning { background: #f39c12; }
.btn-warning:hover { background: #e67e22; }

/* 提示框 */
.alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }

/* 后台样式 */
.admin-header { background: #2c3e50; color: #fff; padding: 15px 0; }
.admin-header .container { display: flex; justify-content: space-between; align-items: center; }
.admin-header h1 { font-size: 20px; }
.admin-nav { display: flex; gap: 25px; }
.admin-nav a { color: #bdc3c7; font-size: 14px; transition: color 0.3s; }
.admin-nav a:hover, .admin-nav a.active { color: #fff; }

/* 后台表格 */
.table { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ecf0f1; }

/* 状态徽章 */
.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-badge.status-1, .status-badge.status-completed { background: #d4edda; color: #155724; }
.status-badge.status-0, .status-badge.status-cancelled { background: #f8d7da; color: #721c24; }
.status-badge.status-pending { background: #fff3cd; color: #856404; }
.status-badge.status-processing { background: #cce5ff; color: #004085; }
.status-badge.status-shipped { background: #d1ecf1; color: #0c5460; }

/* 页脚 */
.footer { background: #2c3e50; color: #bdc3c7; text-align: center; padding: 30px 0; margin-top: 60px; }
.footer p { font-size: 14px; }

/* 搜索表单 */
.search-form { display: flex; gap: 10px; }
.search-form input { flex: 1; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.search-form .btn { padding: 12px 30px; }

/* 开关 */
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; transition: 0.3s; border-radius: 26px; }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; }
input:checked + .toggle-slider { background: #27ae60; }
input:checked + .toggle-slider:before { transform: translateX(24px); }

/* 首页横幅 */
.hero-banner { width: 100%; max-height: 400px; overflow: hidden; margin-bottom: 40px; border-radius: 12px; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; max-height: 400px; }
.hero-banner-placeholder { width: 100%; min-height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 40px 20px; text-align: center; }
.hero-banner-placeholder h2 { font-size: 36px; }
        .hero-banner-placeholder p { margin-top: 10px; font-size: 16px; opacity: 0.9; }

/* 响应式 */
@media (max-width: 768px) {
    .header .container { flex-direction: column; gap: 10px; }
    .nav { gap: 15px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
    .hero h2 { font-size: 24px; }
    .hero p { font-size: 14px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
    .product-image { height: 140px; }
    .product-info { padding: 10px; }
    .product-info h4 { font-size: 13px; }
    .product-info .price { font-size: 15px; }
    .product-detail { grid-template-columns: 1fr; }
    .product-image-placeholder.large { min-height: 250px; }
    .product-info-section h1.product-title { font-size: 22px; }
    .product-price { font-size: 26px; }
    .form-group textarea { min-height: 150px; }
    .admin-header .container { flex-direction: column; gap: 10px; }
    .admin-nav { flex-wrap: wrap; justify-content: center; gap: 10px; }
    th, td { padding: 8px 10px; font-size: 13px; }
    .hero-banner { max-height: 200px; }
    .hero-banner-placeholder { min-height: 120px; padding: 25px 15px; }
    .hero-banner-placeholder h2 { font-size: 22px; }
    .hero-banner-placeholder p { font-size: 13px; }
}
@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-image { height: 110px; }
    .product-info h4 { font-size: 12px; }
    .product-info .price { font-size: 14px; }
    .nav { gap: 8px; }
    .nav a { font-size: 12px; }
}