/* mobile-specific rules */
@media (max-width:480px){
	body{ font-size:14px }
	.me-topbar{ height:110px }
	.me-card{ margin: -50px 12px 12px; padding:14px }
	.me-avatar{ width:64px; height:64px }
	.me-stats{ gap:6px }
	.shortcut-box{ margin:12px }
	.shortcut{ width:56px; height:56px }
	.menu-list{ margin:12px }
	.menu-item{ padding:14px }
	.bottom-nav{ height:76px }
	.bottom-nav .nav-inner{ width:100%; padding:0 10px; box-sizing:border-box }
	.bottom-nav .nav-item{ font-size:11px }
}
/* ensure main content not hidden behind nav */
.bottom-space{ height:96px }

/* design-specific tweaks for 我的 page */
	.me-topbar{ position:relative; display:flex; align-items:flex-end; justify-content:center; padding-bottom:22px; background:linear-gradient(180deg, rgba(253,175,77,0.85) 0%, rgba(253,175,77,0.6) 60%), url('../images/44d0b3d2f78c2416dc620de817574031.jpg') center/cover no-repeat; }
.me-top-deco{ display:none }
.me-title{ margin:20px 0 0 0; padding-bottom:10px; font-size:22px; color:#2b2b2b; font-weight:700 }
.me-top-dot{ position:absolute; right:14px; top:18px; background:transparent; border:0; font-size:18px; color:#2b2b2b }
.me-card{ border-radius:14px; margin: -9px 14px 16px; padding:18px; box-shadow:0 18px 40px rgba(0,0,0,0.06); background:rgba(255,255,255,0.55); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); border:1px solid rgba(255,255,255,0.45); background-clip:padding-box; overflow:visible }
.me-username{ color:#F7B0A8; font-weight:700; font-size:20px }
.me-desc{ color:#c9c9c9; font-size:14px }
.me-stats{ display:flex; justify-content:space-between; margin-top:18px; padding:6px 8px }
.stat .num{ color:#F6AFA6; font-size:28px; font-weight:700 }
.stat .stat-label{ font-size:14px; color:#666; margin-top:8px }

/* avatar ring */
.me-avatar{ position:relative; z-index:20 }
.avatar-ring{ width:64px; height:64px; border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; box-shadow:none; padding:0; border:0; position:relative; z-index:60 }
.avatar-ring img{ width:64px; height:64px; border-radius:50%; object-fit:cover; display:block }

.shortcut-box{ display:flex; justify-content:space-around; align-items:center; margin:14px }
.shortcut{ background:transparent; border:0; display:flex; flex-direction:column; align-items:center; gap:6px; width:72px }
.shortcut-icon{ width:64px; height:64px; border-radius:50%; background:#FBF3D4; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.04); border:6px solid rgba(247,236,206,0.9) }
.shortcut-icon .icon{ font-size:22px; color:#f6b6aa; opacity:0.95 }
.shortcut-label{ font-size:13px; color:#444; margin-top:6px }

.menu-list{ border-radius:14px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,0.06); background:#fff; margin:12px 14px }
.menu-item{ display:flex; justify-content:space-between; align-items:center; background:transparent; border:0; width:100%; text-align:left; padding:20px 22px; font-size:18px; color:#444 }
.menu-item .chev{ color:#d1d1d1; font-size:20px }
.menu-item:active{ background:#faf8f6 }

.bottom-nav{ position:fixed; left:0; right:0; bottom:0; background:transparent; padding-bottom:env(safe-area-inset-bottom); }
.bottom-nav .nav-inner{ background:transparent }
.bottom-nav .nav-item .paw{ font-size:30px }

/* bottom nav background bar and paw spacing */
.bottom-nav{ display:flex; align-items:center; justify-content:center }
.bottom-nav .nav-inner{ width:100%; max-width:480px; display:flex; justify-content:space-around; padding:8px 18px; background:transparent }
.bottom-nav .nav-item{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#6b5446 }
.bottom-nav .nav-item div{ font-size:12px }
.bottom-nav .nav-item .paw{ font-size:34px }
.bottom-nav .nav-item{ padding-top:6px }

/* variables for "我的" tab icon tuning */
:root{
	--me-tab-icon-size: 36px; /* 可在 28px–36px 之间调整，默认设为 36px */
	--me-tab-icon-shadow: 0 0 0 rgba(0,0,0,0); /* 取消阴影（透明） */
}

/* use custom image for "我的" tab icon with shadow */
.bottom-nav .nav-item[data-tab="me"] .paw{
	font-size:0 !important; /* hide emoji */
	width:45px; height:45px; display:block; position:relative;
}
	.bottom-nav .nav-item[data-tab="me"] .paw::before{
	content:""; display:block; width:100%; height:100%;
	background:url('../images/04e6da96756249c51b7400438a8c4c43.png') center/contain no-repeat;
	filter: drop-shadow(var(--me-tab-icon-shadow, 0 3px 8px rgba(0,0,0,0.28)));
}

/* use custom image for "首页" tab icon at 45px */
.bottom-nav .nav-item[data-tab="home"] .paw{
	font-size:0 !important; /* hide emoji */
	width:50px; height:50px; display:block; position:relative;
}
	.bottom-nav .nav-item[data-tab="home"] .paw::before{
	content:""; display:block; width:100%; height:100%;
	background:url('../images/436d994b77ef6865db36e5188b44902d.png') center/contain no-repeat;
}

/* use custom image for "发现" tab icon at 45px */
.bottom-nav .nav-item[data-tab="discover"] .paw{
	font-size:0 !important; /* hide emoji */
	width:45px; height:45px; display:block; position:relative;
}
	.bottom-nav .nav-item[data-tab="discover"] .paw::before{
	content:""; display:block; width:100%; height:100%;
	background:url('../images/b020cc2e86bfe22bbb9f663b1de40c45.png') center/contain no-repeat;
}

/* use custom image for "服务"(docs) tab icon at 45px */
.bottom-nav .nav-item[data-tab="docs"] .paw{
	font-size:0 !important; /* hide emoji */
	width:45px; height:45px; display:block; position:relative;
}
	.bottom-nav .nav-item[data-tab="docs"] .paw::before{
	content:""; display:block; width:100%; height:100%;
	background:url('../images/_20251023152509_64_8.png') center/contain no-repeat;
}

/* use custom image for "购物" (shop) tab icon at 50px */
.bottom-nav .nav-item[data-tab="shop"] .paw{
	font-size:0 !important; /* hide emoji */
	width:50px; height:50px; display:block; position:relative;
}
	.bottom-nav .nav-item[data-tab="shop"] .paw::before{
	content:""; display:block; width:100%; height:100%;
	background:url('../images/436d994b77ef6865db36e5188b44902d.png') center/contain no-repeat;
	}

/* SPA injection transitions */
#spaRoot{ position:fixed; inset:0; top:56px; bottom:72px; left:0; right:0; pointer-events:none }
.spa-panel{ width:100%; height:100%; background:transparent; pointer-events:auto; display:flex; flex-direction:column; animation:spa-in .28s ease both }
@keyframes spa-in{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }
.spa-panel.slide-out{ animation:spa-out .22s ease both }
@keyframes spa-out{ from{ transform:none; opacity:1 } to{ transform:translateY(12px); opacity:0 } }
*{box-sizing:border-box}html,body,#app{height:100%}body{font-family:Helvetica,Arial,\5b8b\4f53,\5fae\8f6f\96c5\9ed1;margin:0;background:#fff;color:#222}
.app{max-width:420px;margin:0 auto;background:#fff;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:56px;background:linear-gradient(180deg, rgba(253,175,77,0.85) 0%, rgba(253,175,77,0.6) 60%), url('../images/44d0b3d2f78c2416dc620de817574031.jpg') center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.topbar .logo{font-family:Pacifico,serif;font-weight:700}
.topbar .icons{display:flex;gap:8px;align-items:center}
.icon{background:transparent;border:0;padding:8px;border-radius:8px;color:#fff;font-size:18px}
.icon.cart-btn{position:relative}
.icon .badge{position:absolute;top:4px;right:4px}
.icon:active{transform:scale(.96)}
.hero img{width:100%;display:block}

/* Carousel styles for index hero */
.carousel{position:relative;overflow:hidden;border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.carousel-track{display:flex;transition:transform .4s ease;will-change:transform}
.carousel-slide{min-width:100%;flex:0 0 100%;height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-control{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.35);color:#fff;border:0;width:34px;height:34px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;z-index:40}
.carousel-control.prev{left:10px}
.carousel-control.next{right:10px}
.carousel-indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:8px;z-index:45}
.carousel-indicators .indicator{width:8px;height:8px;border-radius:8px;border:0;background:rgba(255,255,255,0.6)}
.carousel-indicators .indicator.active{background:#fdaf4d}

/* touch support: make hit area bigger on mobile */
.carousel-control{padding:6px}

.pressed{transform:scale(.97)!important;opacity:.95}
.search-area{padding:12px 18px}
.search{background:#fff;border-radius:28px;padding:10px 14px;display:flex;align-items:center;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.search input{flex:1;border:0;outline:none;padding:6px 8px;font-size:16px;color:#666}
.search button{background:transparent;border:0;font-size:20px}
.categories{display:flex;flex-wrap:wrap;gap:18px;padding:12px 18px;justify-content:flex-start}
.category{width:72px;text-align:center}
.cat-circle{width:72px;height:72px;border-radius:36px;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 4px 12px rgba(0,0,0,0.25)}
.cat-circle{transition:transform .18s,box-shadow .18s}
.category:active .cat-circle,.category:focus-within .cat-circle{transform:translateY(4px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.cat-label{margin-top:8px;color:#3b3b3b;font-size:14px}
.section-title{color:#333;margin:14px 18px 6px;font-size:14px}
.products{display:flex;gap:12px;padding:0 18px 120px;overflow:auto}
.card{background:#fff;border-radius:12px;padding:10px;width:46%;box-shadow:0 8px 20px rgba(0,0,0,0.06);} 
.card img{width:100%;border-radius:8px}
.card .title{margin:6px 0 4px;font-weight:700;font-size:13px}
.card .price{color:#666;font-size:13px}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:rgba(255,255,255,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:16px;padding:8px 14px;display:flex;gap:18px;box-shadow:0 12px 30px rgba(0,0,0,0.12);width:calc(100% - 36px);max-width:420px}
.nav-item{background:transparent;border:0;padding:8px 6px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#777;flex:1}
.paw{font-size:20px;line-height:1}
.nav-item.active{color:#fdaf4d}
.nav-item:active{transform:scale(.96)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#fff;border-radius:12px;padding:12px;max-width:420px;width:100%;position:relative}
.modal-content img{width:100%;border-radius:8px}
.modal-content .close{position:absolute;right:8px;top:8px;background:transparent;border:0;font-size:18px}
.modal-actions{display:flex;gap:8px;margin-top:12px}
.modal-actions .primary{background:#fdaf4d;color:#fff;border-radius:8px;padding:10px 12px;border:0}
/* small utilities for the 我的 page */
.me-topbar h1{ font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif }
.me-action-btn{ cursor:pointer }
@media (max-width:420px){.app{padding-bottom:24px}}

/* 更换头像按钮样式：定位在卡片右上角，白色 pill，阴影 */
.me-card{ position:relative }
.me-action-btn{ position:absolute; right:14px; top:26px; background:#fff; border-radius:20px; padding:8px 12px; box-shadow:0 8px 18px rgba(0,0,0,0.06); border:0; font-size:14px; color:#333 }
.me-action-btn:active{ transform:translateY(1px); box-shadow:0 6px 14px rgba(0,0,0,0.05) }

/* 卡片微动画 */
.card{transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.08)}

/* 图片懒加载占位 */
.card img{background:linear-gradient(90deg,#f0f0f0,#fafafa);display:block}
.lazy-img{opacity:0;transition:opacity .4s ease-in}
.lazy-img.loaded{opacity:1}

/* 购物车抽屉 */
.cart-drawer{position:fixed;right:0;top:0;height:100vh;width:340px;background:#fff;box-shadow:-20px 0 40px rgba(0,0,0,0.08);transform:translateX(110%);transition:transform .36s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;z-index:120}
.cart-drawer[aria-hidden="false"]{transform:translateX(0)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #f0f0f0}
.cart-body{flex:1;padding:12px 18px;overflow:auto}
.cart-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed #f2f2f2}
.cart-item img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.cart-item .meta{flex:1}
.cart-item .meta .title{font-size:14px;margin-bottom:6px}
.cart-item .controls{display:flex;align-items:center;gap:6px}
.cart-footer{padding:12px 18px;border-top:1px solid #f0f0f0}
.cart-actions{display:flex;gap:8px;justify-content:flex-end}
.badge{background:#fdaf4d;color:#fff;border-radius:999px;padding:2px 6px;margin-left:6px;font-size:12px}

/* app-frame: simulate phone viewport in desktop */
.app-frame{width:393px;max-width:100%;height:852px;margin:28px auto;background:#FBF3D4 url('../images/3f0782b6fc1b6a6efb95244b2a6a3f27.jpg') center/cover no-repeat;border-radius:14px;box-shadow:0 22px 64px rgba(0,0,0,0.14);overflow:hidden;position:relative;display:flex;flex-direction:column}
.app-frame .bottom-nav{position:absolute;left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;border-radius:16px;background:rgba(255,255,255,0.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 20px;z-index:80;box-shadow:0 -8px 24px rgba(0,0,0,0.08);}
.app-frame .nav-inner{display:flex;justify-content:space-around}
.app-frame main, .app-frame .menu-list, .app-frame .me-card{background:transparent}

/* fixed header and footer within the simulated device; main becomes the scrolling content */
.app-frame .topbar{position:relative;z-index:70;flex:0 0 56px}
.app-frame main{flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:88px}

/* ensure content doesn't get hidden behind the bottom nav when using absolute bottom bar */
.app-frame .bottom-space{height:96px}

/* hide scrollbars but keep scrolling usable */
.app-frame main::-webkit-scrollbar,
.products::-webkit-scrollbar,
.cart-body::-webkit-scrollbar,
.org-list::-webkit-scrollbar{ display:none; width:0; height:0 }
.app-frame main{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.products, .cart-body, .org-list{ -ms-overflow-style: none; scrollbar-width: none }

/* cart page styles - card layout similar to provided design */
.cart-store-card{ background:#fff; border-radius:12px; padding:14px; box-shadow:0 12px 30px rgba(0,0,0,0.06); margin:12px 14px }
.cart-store-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.store-left{ display:flex; align-items:center; gap:12px }
.select-circle{ width:22px; height:22px; border-radius:50%; border:2px solid #f0a375; display:inline-flex; align-items:center; justify-content:center; color:#fdaf4d; background:transparent }
.select-circle.selected{ background:#fdaf4d; color:#fff; border-color:transparent }
.store-name{ font-weight:700; color:#333 }
.store-actions{ color:#c9c9c9 }
.cart-item-row{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px dashed #f2f2f2 }
.cart-item-row:first-of-type{ border-top:0 }
.item-thumb{ width:56px; height:56px; border-radius:8px; overflow:hidden; flex:0 0 56px }
.item-meta{ flex:1 }
.item-title{ font-size:15px; color:#333; margin-bottom:6px }
.item-qty{ color:#666; font-size:13px }
.item-price{ color:#fd6a3b; font-weight:700; margin-left:auto }
.cart-store-footer{ display:flex; justify-content:space-between; align-items:center; padding-top:8px }
.cart-bottom-toolbar{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; padding:0; background:transparent; z-index:140; padding-bottom: env(safe-area-inset-bottom); }
.cart-toolbar-inner{ background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.85) 100%); width:100%; max-width:none; margin:0; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; box-sizing:border-box; border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:0 -10px 28px rgba(0,0,0,0.08)}
.cart-toolbar-actions{ display:flex; align-items:center; gap:20px }
.cart-toolbar button{ background:transparent; border:0; padding:10px 16px; border-radius:24px; font-size:16px }
/* Beautify cart toolbar buttons */
.cart-toolbar-inner button{ 
	appearance:none; border:0; outline:0; 
	display:inline-flex; align-items:center; gap:8px; 
	padding:10px 14px; border-radius:24px; 
	font-size:15px; font-weight:600; cursor:pointer; 
	background:rgba(0,0,0,0.04); color:#444; 
	box-shadow:0 2px 6px rgba(0,0,0,0.04);
	transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
.cart-toolbar-inner button:active{ transform:translateY(1px); box-shadow:0 1px 4px rgba(0,0,0,0.06) }
/* Specific styles with icons */
#clearCart{ background:rgba(253,175,77,0.15); color:#fdaf4d }
#clearCart::before{ content:'⚡'; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06)); }
#deleteSelected{ background:rgba(255,107,90,0.15); color:#ff6b5a; border:1px solid rgba(255,107,90,0.25) }
#deleteSelected::before{ content:'🗑'; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06)); }
.cart-toolbar .danger{ border:1px solid #fdaf4d; color:#fdaf4d }

/* Remove underline from bottom navigation and bottom toolbars */
.app-frame .bottom-nav .nav-item,
.app-frame .bottom-nav .nav-item a,
.app-frame .bottom-nav .nav-item button,
.app-frame .cart-toolbar button,
.app-frame .cart-toolbar a,
.app-frame .cart-bottom-toolbar button,
.app-frame .cart-bottom-toolbar a,
.bottom-nav .nav-item,
.bottom-nav .nav-item a,
.bottom-nav .nav-item button,
.cart-toolbar button,
.cart-toolbar a {
	text-decoration: none;
}

/* 顶部栏右侧图标整体下移 10px（仅影响包含 .icons 的页面，如首页）*/
.topbar .icons{ margin-top:10px }

/* iPhone 16 Pro 风格状态栏通用样式与尺寸变量
	 使用 safe-area-inset-top 做为可选的刘海/灵动岛补偿：
	 在支持 env() 的设备上会自动把状态栏高度放大以避开刘海。
*/
:root{
	--status-bar-base: 24px;
	--status-bar-height: calc(var(--status-bar-base) + env(safe-area-inset-top, 0px));
}

/* 主题变量：用于快速调整色彩与卡片风格 */
:root{
	--theme-accent: #fdaf4d;        /* 主色（按钮、激活态） */
	--theme-accent-2: #ff7f7f;      /* 次要强调色（徽章/标签） */
	--theme-card: rgba(255,255,255,0.98);
	--theme-bg-overlay: linear-gradient(180deg, rgba(253,175,77,0.04), rgba(255,255,255,0));
	--theme-text: #333333;
}

/* 统一主题化小组件 */
.tag-badge{ background: rgba(255,222,230,0.95); color: var(--theme-accent-2); padding:6px 10px; border-radius:14px; font-size:12px }
.pill{ display:inline-block; background: rgba(255,222,230,0.9); color: var(--theme-accent-2); padding:4px 8px; border-radius:8px; font-size:12px; margin-right:8px }
.section-title{ color:var(--theme-text); margin:14px 18px 6px; font-size:14px }
.org-card, .card{ background:var(--theme-card); }

/* 顶部栏适配状态栏高度：保持原高度，状态栏以内层覆盖方式显示，不改变布局高度 */
.topbar{ height:56px; padding-top:0; }
.app-frame .topbar{ flex: 0 0 56px; }

/* SPA 注入根节点顶部偏移保持原值 */
#spaRoot{ top:56px; }

/* 状态栏布局与图标（简化版：时间在左，指示在右） */
.status-bar{ position:absolute; left:0; right:0; top:0; height:var(--status-bar-height); display:flex; align-items:center; padding:0 10px; color:currentColor; pointer-events:none }
.status-bar .sb-left{ flex:1; display:flex; align-items:center }
.status-bar .sb-time{ font-weight:700; font-size:12px; letter-spacing:.2px; opacity:.95 }
.status-bar .sb-indicators{ display:flex; align-items:center; gap:8px }
/* 信号条（4 段） */
.status-bar .sb-signal{ width:14px; height:10px; display:inline-block;
	background:
		linear-gradient(currentColor,currentColor) 0 7px/2px 3px no-repeat,
		linear-gradient(currentColor,currentColor) 4px 6px/2px 4px no-repeat,
		linear-gradient(currentColor,currentColor) 8px 4px/2px 6px no-repeat,
		linear-gradient(currentColor,currentColor) 12px 1px/2px 9px no-repeat;
	opacity:.9 }
/* 电池图标（CSS 绘制） */
.status-bar .sb-battery{ position:relative; width:24px; height:12px; border:2px solid currentColor; border-radius:3px; display:inline-block; opacity:.95 }
.status-bar .sb-battery .sb-level{ position:absolute; left:2px; top:2px; bottom:2px; width:70%; background:currentColor; border-radius:2px }
.status-bar .sb-battery .sb-cap{ position:absolute; right:-3px; top:50%; transform:translateY(-50%); width:3px; height:6px; background:currentColor; border-radius:1px }