*{margin:0;padding:0;box-sizing:border-box}
:root{--primary-color:#FF8C42;--secondary-color:#4A90D9;--accent-color:#FF4444;--bg-color:#F5F5F5;--text-color:#333;--text-light:#999}
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;color:var(--text-color);line-height:1.6;background:var(--bg-color);padding-bottom:70px}
#app{max-width:750px;margin:0 auto;background:#F5F5F5}
.header{background:linear-gradient(135deg,#FF8C42,#FF6B1A);padding:12px 15px;position:sticky;top:0;z-index:100}
.nav-content{display:flex;justify-content:space-between;align-items:center}
.logo-area{display:flex;align-items:center}
.logo{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:18px}
.app-title{color:white;font-size:18px;font-weight:bold;margin-left:8px}
.customer-service{color:white;font-size:14px;padding:6px 12px;background:rgba(255,255,255,0.2);border-radius:12px;cursor:pointer}
.search-area{padding:10px 15px;background:linear-gradient(135deg,#FF8C42,#FF6B1A)}
.search-box{display:flex;align-items:center;height:36px;background:white;border-radius:18px;padding:0 15px;cursor:pointer}
.search-icon{font-size:14px;margin-right:8px}
.search-placeholder{color:#999;font-size:14px}
.banner{width:100%;height:160px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#FFE4D0,#FFD4B8)}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.category-section{padding:12px 15px}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:white;border-radius:12px;padding:15px}
.category-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:8px 4px}
.category-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:6px}
.category-name{font-size:12px;color:#666;text-align:center;margin-top:4px}
.login-prompt{margin:12px 15px;background:linear-gradient(135deg,#FF8C42,#FF6B1A);border-radius:12px;padding:18px;cursor:pointer}
.login-tip{display:flex;flex-direction:column;align-items:center;color:white}
.tip-title{font-size:16px;font-weight:bold;margin-bottom:4px}
.tip-desc{font-size:12px;opacity:0.9;margin-bottom:10px}
.login-btn{background:white;color:#FF6B1A;padding:8px 24px;border-radius:16px;font-size:13px;font-weight:bold}
.commission-card{margin:12px 15px;background:linear-gradient(135deg,#FF8C42,#FF6B1A);border-radius:12px;padding:15px;color:white}
.commission-bg{display:flex;justify-content:space-between;align-items:center}
.commission-label{font-size:13px;opacity:0.9}
.commission-amount{font-size:26px;font-weight:bold}
.amount-symbol{font-size:16px}
.commission-actions{display:flex;flex-direction:column;gap:6px}
.action-btn{background:rgba(255,255,255,0.3);color:white;border:none;padding:8px 14px;border-radius:8px;font-size:12px;cursor:pointer;text-align:center}
.action-btn.primary{background:white;color:#FF6B1A}
.notice-bar{display:flex;align-items:center;padding:10px 15px;background:white;margin:0 15px;border-radius:8px}
.notice-icon{font-size:16px;margin-right:8px}
.notice-content{flex:1;overflow:hidden}
.notice-text{font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section{padding:15px}
.section-title{font-size:17px;font-weight:bold;color:#333;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.section-title .more{font-size:13px;color:#999}
.goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.goods-card{background:white;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);cursor:pointer}
.goods-image{width:100%;height:120px;background:#FFE4D0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.goods-image img{width:100%;height:100%;object-fit:cover}
.goods-info{padding:10px}
.goods-name{font-size:13px;color:#333;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goods-price-row{display:flex;align-items:center;justify-content:space-between}
.goods-price{color:#FF6B1A;font-size:15px;font-weight:bold}
.goods-price small{font-size:11px}
.commission-tag{background:#FFF0E8;color:#FF6B1A;font-size:10px;padding:2px 6px;border-radius:4px}
.tab-bar{position:fixed;bottom:0;left:0;right:0;width:100%;background:white;display:flex;justify-content:space-around;padding:8px 0;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid #eee;z-index:100;box-sizing:border-box}
@media(min-width:750px){.tab-bar{width:750px;left:50%;transform:translateX(-50%)}}
.tab-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:4px 0}
.tab-icon{font-size:22px}
.tab-text{font-size:11px;color:#999;margin-top:2px}
.tab-item.active .tab-text{color:#FF6B1A}