:root {
	--red: #FF4B4B;
	--red-soft: #FFF1F0;
	--bg: #F6F7FB;
	--text: #1A1A1A;
	--muted: #999;
	--line: #F0F0F0;
	--radius: 12px;
	--header: 52px;
	--tabbar: 56px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body.m-body {
	font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
}
body.m-body-notab { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; font-size: 14px; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.price { color: var(--red); font-weight: 700; }
.origin { margin-left: 6px; color: #C8C8C8; text-decoration: line-through; font-size: 12px; }

.m-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--header);
	padding: 0 12px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.m-back {
	width: 28px; height: 28px; flex: none;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px; line-height: 1; color: #333;
}
body.m-body-notab .m-logo span { display: none; }
.m-logo { display: flex; align-items: center; gap: 6px; flex: none; }
.m-logo img { width: 28px; height: 28px; border-radius: 8px; }
.m-logo span { font-weight: 700; color: var(--red); font-size: 16px; white-space: nowrap; }
.m-search { flex: 1; display: flex; height: 34px; border: 1px solid var(--red); border-radius: 17px; overflow: hidden; }
.m-search input { flex: 1; border: 0; outline: 0; padding: 0 12px; min-width: 0; background: #fff; }
.m-search button { border: 0; background: var(--red); color: #fff; padding: 0 14px; }

.m-page { padding: 12px 12px 8px; }
.m-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 4px 14px rgba(0,0,0,.04);
	margin-bottom: 12px;
}
.m-section { padding: 14px; }
.m-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.m-title { font-size: 17px; font-weight: 700; }
.m-more { color: #B0B0B0; font-size: 12px; }

.m-banner { position: relative; overflow: hidden; border-radius: var(--radius); height: 148px; margin-bottom: 12px; }
.m-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.m-banner img.on { opacity: 1; }
.m-banner .dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.m-banner .dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.m-banner .dots span.on { background: #fff; }

.m-channel { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 6px; }
.m-channel-item { text-align: center; font-size: 12px; color: #555; }
.m-channel-item img { width: 40px; height: 40px; margin: 0 auto 6px; }
.m-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.m-tip { background: #fff; border-radius: var(--radius); padding: 12px; }
.m-tip h3 { margin: 0 0 4px; font-size: 14px; }
.m-tip p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.m-goods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-goods-card { background: #fff; border-radius: 10px; overflow: hidden; }
.m-goods-card .cover { height: 150px; background: #F7F7F7; }
.m-goods-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.m-goods-card .name { padding: 8px 8px 0; font-size: 13px; height: 40px; overflow: hidden; line-height: 1.4; }
.m-goods-card .meta { padding: 6px 8px 10px; font-size: 15px; }
.m-deal { border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.m-deal img { width: 100%; }
.m-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 14px; }
.m-empty a { color: var(--red); }

.m-cate { display: flex; min-height: calc(100vh - var(--header) - var(--tabbar) - 24px); background: #fff; border-radius: var(--radius); overflow: hidden; }
.m-cate-side { width: 88px; background: #F7F8FA; flex: none; }
.m-cate-item { display: block; padding: 14px 8px; text-align: center; font-size: 13px; color: #666; position: relative; }
.m-cate-item.on { background: #fff; color: var(--red); font-weight: 700; }
.m-cate-item.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--red); }
.m-cate-main { flex: 1; min-width: 0; padding: 12px; }
.m-cate-banner { display: flex; align-items: center; justify-content: space-between; background: var(--red-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.m-cate-banner h2 { margin: 0 0 4px; font-size: 15px; }
.m-cate-banner p { margin: 0; font-size: 12px; color: #888; }
.m-cate-banner img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.m-cate-goods { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.m-cate-goods img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.m-cate-goods .info { flex: 1; min-width: 0; }
.m-cate-goods h3 { margin: 0 0 4px; font-size: 14px; }
.m-cate-goods p { margin: 0 0 6px; font-size: 12px; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.add-btn { border: 0; background: var(--red); color: #fff; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; }

.m-detail-cover { margin: -12px -12px 12px; background: #fff; }
.m-detail-cover img { width: 100%; max-height: 360px; object-fit: contain; background: #fff; }
.m-detail-info { padding: 14px; }
.m-detail-price { font-size: 24px; }
.sale-tag { display: inline-block; margin-left: 6px; background: var(--red-soft); color: var(--red); font-size: 11px; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.m-detail-name { margin: 8px 0 6px; font-size: 18px; }
.m-detail-desc { margin: 0; color: #888; font-size: 13px; }
.m-services { display: flex; gap: 10px; margin: 12px 0; font-size: 12px; color: #666; }
.sku-row, .qty-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 13px; }
.sku-label { width: 56px; color: #888; flex: none; }
.sku { display: inline-block; padding: 6px 12px; border: 1px solid #EEE; border-radius: 16px; margin-right: 8px; }
.sku.on { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.stepper { display: inline-flex; align-items: center; border: 1px solid #EEE; border-radius: 16px; overflow: hidden; }
.stepper button { width: 32px; height: 28px; border: 0; background: #fff; }
.stepper span { min-width: 28px; text-align: center; }
.m-buybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
	background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.ghost-btn, .buy-btn, .pay-btn, .auth-btn {
	flex: 1; height: 44px; border: 0; border-radius: 22px; color: #fff; font-size: 15px;
}
.ghost-btn { background: #FFB020; }
.buy-btn, .pay-btn, .auth-btn { background: var(--red); }
.m-spec { padding: 14px; }
.m-spec .row, .spec-row, .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; color: #666; border-bottom: 1px solid var(--line); }
.detail-img { width: 100%; margin-top: 12px; border-radius: 8px; }

.m-cart-item, .order-goods { display: flex; gap: 10px; align-items: center; padding: 12px; }
.m-cart-item img, .order-goods img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.m-cart-item .info, .order-goods .info { flex: 1; min-width: 0; }
.m-cart-item h3, .order-goods h3 { margin: 0 0 4px; font-size: 14px; }
.m-cart-item p, .order-goods p { margin: 0; font-size: 12px; color: #999; }
.cart-del { border: 0; background: transparent; color: var(--red); font-size: 13px; }
.m-cart-bar, .m-paybar {
	position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; padding: 10px 12px; border-radius: 12px; margin-top: 8px;
	box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
body.m-body-notab .m-paybar { bottom: env(safe-area-inset-bottom); position: fixed; left: 12px; right: 12px; }
.m-paybar .pay-btn { flex: none; width: 140px; }

.addr { display: flex; align-items: center; gap: 10px; padding: 14px; }
.addr-icon { width: 28px; height: 28px; flex: none; }
.addr-main { flex: 1; }
.addr-title { font-weight: 700; }
.addr-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.addr-tag { background: var(--red-soft); color: var(--red); font-size: 11px; padding: 1px 6px; border-radius: 8px; }
.pay-item { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-top: 1px solid var(--line); }
.pay-item.on { background: var(--red-soft); }
.pay-left { display: flex; align-items: center; gap: 8px; }
.alipay-icon { width: 20px; height: 20px; }
.radio { width: 16px; height: 16px; border: 1px solid #DDD; border-radius: 50%; }
.pay-item.on .radio { border-color: var(--red); background: radial-gradient(circle, var(--red) 40%, #fff 45%); }
.order-item-hd, .order-item-ft { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 13px; }
.order-status { color: var(--red); }
.ghost-mini, .danger-mini { height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid #E5E5E5; background: #fff; font-size: 12px; }
.danger-mini { color: var(--red); border-color: #FFD0D0; }

.m-user { padding: 18px 14px; display: flex; gap: 12px; align-items: center; }
.m-user img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--red-soft); }
.m-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.m-stat { background: #F8F8F8; border-radius: 10px; padding: 10px; text-align: center; }
.m-stat span { display: block; color: #999; font-size: 11px; margin-bottom: 4px; }
.m-stat strong { font-size: 16px; color: var(--red); }
.m-links a, .m-cell { display: block; padding: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.m-links a::after, .m-cell::after { content: '›'; float: right; color: #CCC; }

.auth-wrap { padding: 8px 0 20px; }
.auth-tabs { display: flex; gap: 18px; margin-bottom: 12px; }
.auth-tabs a { color: #888; font-size: 16px; }
.auth-tabs a.on { color: var(--red); font-weight: 700; }
.auth-form .form-row { margin-bottom: 12px; }
.auth-form label { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }
.auth-form input[type="text"], .auth-form input[type="password"], .auth-form input[type="tel"] {
	width: 100%; height: 42px; border: 1px solid #EEE; border-radius: 10px; padding: 0 12px; outline: 0;
}
.auth-btn { width: 100%; margin-top: 8px; }
.auth-error { color: var(--red); font-size: 13px; min-height: 18px; }
.auth-captcha { display: flex; gap: 8px; }
.auth-captcha input { flex: 1; }
.auth-captcha img { height: 42px; border-radius: 8px; }

.m-page-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.m-page-nav a { flex: none; padding: 6px 12px; background: #fff; border-radius: 14px; font-size: 13px; color: #666; }
.m-page-nav a.on { background: var(--red); color: #fff; }
.m-article { padding: 16px; }
.m-article h1 { margin: 0 0 10px; font-size: 20px; }
.m-article h2 { margin: 20px 0 8px; font-size: 16px; scroll-margin-top: 60px; }
.m-article p, .m-article li { color: #555; line-height: 1.8; font-size: 14px; }
.m-article a { color: var(--red); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.contact-card { background: #F8F8F8; border-radius: 10px; padding: 12px; }
.contact-card strong { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
.contact-card p { margin: 0 0 4px; font-weight: 700; color: #222; font-size: 14px; }
.page-meta { color: #999; font-size: 12px; }
.m-copy { text-align: center; color: #9AA0A8; font-size: 11px; line-height: 1.7; padding: 8px 12px 16px; }
.m-copy a { color: #7A8088; }

.m-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	height: calc(var(--tabbar) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	display: grid; grid-template-columns: repeat(4, 1fr);
	background: #fff; border-top: 1px solid #F0F0F0;
}
.m-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: #888; }
.m-tabbar a.on { color: var(--red); }
.m-ico { width: 22px; height: 22px; margin-bottom: 2px; background: currentColor; }
.m-ico-home { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/></svg>") center / contain no-repeat; }
.m-ico-cate { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/></svg>") center / contain no-repeat; }
.m-ico-cart { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM3 4h2l2.2 11h11.3l1.8-8H7'/></svg>") center / contain no-repeat; }
.m-ico-user { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/></svg>") center / contain no-repeat; }
.m-badge { position: absolute; top: 4px; right: 18px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.m-badge:empty, .cart-badge:empty, .cart-badge.is-zero { display: none; }

@media (min-width: 540px) {
	html { background: #E9EBF0; }
	body.m-body {
		max-width: 430px;
		margin: 0 auto;
		box-shadow: 0 0 28px rgba(0,0,0,.08);
	}
	.m-header, .m-tabbar, .m-buybar {
		max-width: 430px;
		left: 50%;
		right: auto;
		width: 100%;
		transform: translateX(-50%);
	}
	body.m-body-notab .m-paybar {
		max-width: 406px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
}

.toast { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); background: rgba(0,0,0,.72); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; z-index: 99; }
.toast.show { opacity: 1; }

.addr-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; }
.addr-modal.show { display: block; }
.addr-dialog { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; max-height: 86vh; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
.addr-dialog-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.addr-close { border: 0; background: transparent; font-size: 22px; }
.addr-item { padding: 12px 16px; border-top: 1px solid var(--line); }
.addr-item.on { background: var(--red-soft); }
.addr-add-btn, .addr-save-btn { display: block; width: calc(100% - 32px); margin: 12px auto; height: 42px; border: 0; border-radius: 21px; background: var(--red); color: #fff; }
.addr-form { padding: 0 16px 16px; }
.addr-form-row { margin-bottom: 10px; }
.addr-form-row label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
.addr-form-row input, .addr-form-row select { width: 100%; height: 40px; border: 1px solid #EEE; border-radius: 8px; padding: 0 10px; }
.addr-region { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.addr-form-actions { display: flex; gap: 8px; }
.addr-back-btn { flex: 1; height: 42px; border: 1px solid #EEE; background: #fff; border-radius: 21px; }
.addr-save-btn { flex: 2; width: auto; margin: 0; }
.addr-empty { padding: 20px; text-align: center; color: #999; }
.addr-item-actions button { border: 0; background: transparent; color: #888; margin-right: 10px; }
.addr-item-actions .danger { color: var(--red); }