* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:#f5f5f5; color:#333; max-width:100%; margin:0 auto; min-height:100vh; position:relative; overflow-x:hidden; }

@media (min-width: 768px) {
  body { max-width: 960px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .article-card { margin-bottom: 0; }
  .detail-images { height: 400px; }
  .detail-images img { object-fit: contain; background: #000; }
}

@media (max-width: 767px) {
  body { max-width: 500px; }
}
.header { background:#07c160; color:#fff; padding:12px 16px; text-align:center; font-size:18px; font-weight:bold; position:sticky; top:0; z-index:100; }
.tab-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:500px; background:#fff; display:flex; border-top:1px solid #eee; z-index:100; padding-bottom:env(safe-area-inset-bottom); }
.tab-item { flex:1; text-align:center; padding:8px 0; color:#999; font-size:12px; }
.tab-item.active { color:#07c160; }
.tab-icon { font-size:22px; display:block; margin-bottom:2px; }
.page { display:none; padding-bottom:60px; padding-top:44px; }
.page.active { display:block; }

/* 首页 */
.mode-switch { display:flex; background:#fff; padding:0 16px 12px; }
.mode-item { flex:1; text-align:center; padding:10px 0; font-size:15px; color:#999; border-bottom:3px solid transparent; }
.mode-item.active { color:#07c160; border-bottom-color:#07c160; font-weight:600; }
.cat-bar { display:flex; overflow-x:auto; white-space:nowrap; padding:8px 16px; background:#fff; border-bottom:1px solid #eee; gap:8px; }
.cat-item { padding:6px 16px; border-radius:16px; font-size:13px; color:#666; background:#f0f0f0; flex-shrink:0; }
.cat-item.active { color:#fff; background:#07c160; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px; }
.product-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.05); }
.product-img { width:100%; height:160px; object-fit:cover; background:#eee; }
.product-info { padding:10px 12px; }
.product-title { font-size:14px; color:#333; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-price { font-size:16px; font-weight:bold; color:#333; }
.product-price::after { content:'米粒'; font-size:11px; font-weight:normal; color:#999; margin-left:3px; }

.article-list { padding:10px 16px; }
.article-card { background:#fff; border-radius:10px; padding:16px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.article-cat { display:inline-block; font-size:11px; color:#07c160; background:#e8f8e8; padding:3px 10px; border-radius:4px; margin-bottom:8px; }
.article-title { font-size:16px; font-weight:600; color:#333; margin-bottom:6px; }
.article-preview { font-size:13px; color:#999; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:8px; }
.article-meta { font-size:11px; color:#ccc; }

/* 发布选择 */
.choice-page { padding:20px; }
.choice-card { background:#fff; border-radius:12px; padding:20px 16px; margin-bottom:14px; display:flex; align-items:center; box-shadow:0 1px 8px rgba(0,0,0,0.04); }
.choice-icon { font-size:40px; margin-right:16px; }
.choice-label { font-size:17px; font-weight:600; color:#333; }
.choice-desc { font-size:13px; color:#999; margin-top:4px; }

/* 表单 */
.form-section { background:#fff; border-radius:10px; padding:16px; margin:10px; }
.form-label { font-size:14px; font-weight:600; color:#333; margin-bottom:10px; }
.form-input { width:100%; border:none; border-bottom:1px solid #eee; padding:10px 0; font-size:15px; outline:none; }
.form-textarea { width:100%; border:none; border-bottom:1px solid #eee; padding:10px 0; font-size:15px; min-height:120px; outline:none; resize:none; }
.img-grid { display:flex; flex-wrap:wrap; gap:8px; }
.img-item { width:80px; height:80px; border-radius:6px; object-fit:cover; position:relative; }
.img-add { width:80px; height:80px; border:2px dashed #ddd; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:30px; color:#ccc; }
.img-del { position:absolute; top:-6px; right:-6px; width:20px; height:20px; background:#f44; color:#fff; border-radius:50%; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
select { width:100%; padding:10px 0; border:none; border-bottom:1px solid #eee; font-size:15px; outline:none; background:#fff; }
.btn-submit { display:block; width:calc(100% - 20px); margin:16px auto; background:#07c160; color:#fff; border:none; border-radius:24px; padding:14px; font-size:17px; cursor:pointer; }

/* 详情 */
.detail-images { width:100%; height:300px; background:#eee; }
.detail-images img { width:100%; height:100%; object-fit:cover; }
.detail-info { background:#fff; padding:16px; margin-bottom:8px; }
.detail-price { font-size:28px; font-weight:bold; color:#333; margin-bottom:8px; }
.detail-title { font-size:18px; font-weight:600; color:#333; margin-bottom:8px; }
.detail-meta { font-size:13px; color:#999; margin-bottom:12px; }
.detail-seller { display:flex; align-items:center; padding:16px; background:#fff; margin-bottom:8px; }
.seller-avatar { width:40px; height:40px; border-radius:50%; margin-right:12px; background:#eee; }
.seller-name { font-size:15px; color:#333; }
.seller-label { font-size:12px; color:#999; }
.detail-desc { background:#fff; padding:16px; margin-bottom:80px; }
.detail-bar { position:fixed; bottom:60px; left:50%; transform:translateX(-50%); width:100%; max-width:500px; background:#fff; display:flex; padding:10px 16px; border-top:1px solid #eee; z-index:50; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
.btn-contact { flex:1; background:#07c160; color:#fff; border:none; border-radius:20px; padding:12px; font-size:16px; cursor:pointer; margin-left:10px; }

/* 文章详情 */
.article-page { background:#fff; min-height:calc(100vh - 104px); }
.article-header { padding:20px 16px; border-bottom:1px solid #f0f0f0; }
.article-cat-tag { display:inline-block; font-size:12px; color:#fff; background:#07c160; padding:4px 14px; border-radius:4px; margin-bottom:12px; }
.article-h1 { font-size:24px; font-weight:700; color:#333; line-height:1.4; margin-bottom:12px; }
.article-time { font-size:13px; color:#999; }
.article-body { padding:20px 16px; font-size:16px; color:#333; line-height:1.9; white-space:pre-wrap; }

/* 我的 */
.user-card { background:#fff; padding:24px 16px; text-align:center; }
.avatar-large { width:64px; height:64px; border-radius:50%; margin:0 auto 8px; background:#eee; }
.user-name { font-size:18px; font-weight:600; color:#333; }
.stats { display:flex; background:#fff; margin-bottom:8px; }
.stat { flex:1; text-align:center; padding:16px 0; }
.stat-num { font-size:22px; font-weight:700; color:#333; display:block; }
.stat-label { font-size:12px; color:#999; }
.my-tabs { display:flex; background:#fff; margin-bottom:8px; }
.my-tab { flex:1; text-align:center; padding:14px 0; font-size:14px; color:#666; border-bottom:3px solid transparent; }
.my-tab.active { color:#07c160; border-bottom-color:#07c160; }
.my-item { background:#fff; padding:12px 16px; display:flex; align-items:center; margin-bottom:2px; }
.my-item-img { width:60px; height:60px; border-radius:6px; margin-right:12px; object-fit:cover; }
.my-item-info { flex:1; }
.my-item-title { font-size:14px; color:#333; }
.my-item-status { font-size:12px; margin-top:4px; }
.status-active{color:#07c160}.status-sold{color:#999}.status-removed{color:#f44}
.my-item-del { color:#f44; padding:8px 12px; font-size:13px; cursor:pointer; }

.section-label { font-size:13px; color:#999; padding:10px 16px 4px; }
.my-article-item { background:#fff; padding:12px 16px; display:flex; align-items:center; margin-bottom:2px; }
.my-article-cat { font-size:11px; color:#07c160; background:#e8f8e8; padding:3px 8px; border-radius:3px; margin-right:10px; flex-shrink:0; }
.my-article-title { flex:1; font-size:14px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.empty-tip { text-align:center; padding:60px 0; color:#999; font-size:14px; }
.empty-icon { font-size:50px; display:block; margin-bottom:12px; }

/* 弹窗 */
.modal-mask { position:fixed; top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;display:flex;align-items:flex-end; }
.modal-box { background:#fff;width:100%;max-width:500px;margin:0 auto;border-radius:16px 16px 0 0;padding:20px; }
.modal-title { font-size:18px;font-weight:600;text-align:center;margin-bottom:16px; }
.modal-row { padding:14px 0;border-bottom:1px solid #f0f0f0;font-size:15px; }
.modal-close { display:block;width:100%;margin-top:16px;padding:14px;text-align:center;background:#f5f5f5;border:none;border-radius:20px;font-size:15px;color:#666;cursor:pointer; }

/* 狐狸 */
.float-fox { position:fixed;font-size:60px;z-index:999;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.15));cursor:grab;user-select:none;transition:opacity 0.1s; }
.float-fox:active { cursor:grabbing; }
.fox-bubble { position:fixed;z-index:1000;background:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,0.1);font-size:14px;color:#333;white-space:nowrap; }
.fox-bubble::after { content:'';position:absolute;bottom:-8px;left:24px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff; }
.fox-bubble.below::after { top:-8px;bottom:auto;border-top:none;border-bottom:10px solid #fff; }

/* 隐私 */
.privacy-bar { background:#fffbe6; padding:10px 16px; font-size:13px; color:#997a00; display:flex; align-items:center; justify-content:space-between; }
.privacy-bar a { color:#07c160; }
.privacy-btn { background:#07c160; color:#fff; border:none; padding:6px 16px; border-radius:4px; font-size:12px; cursor:pointer; }