:root { color-scheme: light; --bg: #f7f6f1; --fg: #0d0f0e; --muted: #67706b; --accent: #0f5c3f; --green: #0f5c3f; --gold: #c9a227;
	--border: #e5e2d6; --radius: 14px; }
body { background: var(--bg); font-size: 16px; }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
.screen { padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.top-title { font-size: 1.35rem; margin: 0; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-size: 1.2rem; cursor: pointer; }
.brandbar { display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.logo { font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--green); }
.logo.lg { font-size: 2.2rem; display: block; }
.gold-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-top: 10px; }
.searchfake { min-height: 50px; text-align: left; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--muted); font: inherit; cursor: pointer; }
.sec { font-size: 1.05rem; margin: 4px 0 10px; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 72px; justify-content: center; border: 1px solid var(--border);
	border-radius: var(--radius); background: #fff; font: inherit; font-size: 0.75rem; cursor: pointer; color: var(--fg); }
.cat span { font-size: 1.4rem; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.hscroll .pcard { flex: 0 0 160px; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pcard { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
	overflow: hidden; font: inherit; color: var(--fg); cursor: pointer; }
.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.thumb-ph { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: linear-gradient(135deg, #e7efe9, #f4ecd2); }
.hero-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.hero-img.thumb-ph { font-size: 4rem; }
.pcard-body { padding: 10px; display: grid; gap: 2px; }
.pcard-title { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price { color: var(--green); font-weight: 800; }
.price.big { font-size: 1.6rem; }
.muted { color: var(--muted); } .small { font-size: 0.8rem; } .block { display: block; } .grow { flex: 1; min-width: 0; text-align: left; }
.center { text-align: center; } .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note { padding: 10px 14px; border-radius: 12px; background: #fbf4dc; border: 1px solid #ecd98f; font-size: 0.9rem; }
.ptitle { margin: 8px 0 4px; font-size: 1.35rem; }
.desc { margin: 0; white-space: pre-wrap; }
.badge.gold { border-color: var(--gold); color: #8a6c0c; background: #fbf4dc; }
.btn { min-height: 48px; justify-content: center; border-radius: 12px; font-weight: 600; }
.btn-primary { background: var(--green); color: #fff; }
.btn-gold { background: var(--gold); color: #111; }
.btn-outline { background: #fff; color: var(--fg); border-color: var(--border); }
.btn-danger { background: #fff; color: #b42318; border-color: #f0c4bf; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; }
.seller-row, .convo, .mine-main { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border);
	border-radius: var(--radius); background: #fff; font: inherit; color: var(--fg); cursor: pointer; }
.mine-main { border: 0; padding: 0; }
.mine { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.mine .row .btn { flex: 1; }
.mini { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; font-size: 1.4rem; }
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: var(--gold); display: flex; align-items: center;
	justify-content: center; font-weight: 800; }
.avatar.lg { width: 76px; height: 76px; font-size: 2rem; }
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.profile-head h2 { margin: 4px 0 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font: inherit; cursor: pointer; color: var(--fg); }
.chip.on { background: #0d0f0e; color: var(--gold); border-color: #0d0f0e; }
.input { font-size: 16px; min-height: 48px; background: #fff; }
.field { margin: 0; } .field > span { font-size: 0.85rem; color: var(--muted); }
.card { background: #fff; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: #eeece3; }
.seg button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; font: inherit; cursor: pointer; color: var(--fg); }
.seg button.on { background: var(--green); color: #fff; font-weight: 600; }
.link { background: none; border: 0; color: var(--green); font: inherit; font-weight: 600; min-height: 44px; cursor: pointer; display: block; }
.auth-head { text-align: center; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: #0d0f0e; color: #fff; border-radius: var(--radius); padding: 14px; display: grid; }
.stat b { font-size: 1.6rem; color: var(--gold); } .stat span { font-size: 0.8rem; opacity: 0.8; }
.upload { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border: 2px dashed var(--gold); border-radius: var(--radius);
	background: #fff; cursor: pointer; overflow: hidden; color: var(--muted); }
.upload img { width: 100%; height: 100%; object-fit: cover; }
.sr { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-product { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: #fbf4dc; font: inherit; cursor: pointer; min-height: 44px; }
.bubbles { display: flex; flex-direction: column; gap: 8px; min-height: 40vh; }
.bubble { max-width: 80%; padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--border); align-self: flex-start; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-end; background: var(--green); color: #fff; border-color: var(--green); border-radius: 16px 16px 4px 16px; }
.btime { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 2px; }
.composer { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 0 max(8px, env(safe-area-inset-bottom)); background: var(--bg); }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; background: #0d0f0e;
	padding: 6px 4px max(8px, env(safe-area-inset-bottom)); z-index: 10; }
.tabbar button { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0;
	background: none; color: #b8bdb9; font: inherit; font-size: 0.72rem; cursor: pointer; }
.tabbar .ti { font-size: 1.3rem; line-height: 1; }
.tabbar button.on { color: var(--gold); font-weight: 600; }