/* 弘度生活设计语言 — 优先加载 Design Tokens */
@import url('variables.css');

@import url('z-index-system.css');



/* Remix Icon - 各页面已通过 link rel 单独引入，此处移除 CDN @import 避免阻塞首屏渲染 */

/* @import url('https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css'); */



/* ========== 隐藏浏览器地址�?状态栏，全屏APP体验 ========== */

html, body {

    height: 100%;

    min-height: 101vh;

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    user-select: none;

}

body {

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    overscroll-behavior: none;

}





:root {

    /* ===== 8pt 栅格系统基础变量 ===== */

    --grid-base: 8px;

    --grid-2x: 16px;

    --grid-1_5x: 12px;

    --grid-0_5x: 4px;

    

    /* ===== 全局安全边距 ===== */

    --safe-margin: var(--spacing-base);

    --safe-margin-sm: 12px;

    

    /* ===== 卡片内边�?===== */

    --card-padding: var(--spacing-base);

    --card-padding-sm: 12px;

    

    /* ===== 模块间距 ===== */

    --section-spacing: 12px;

    --section-spacing-sm: 10px;

    

    /* ===== 圆角半径（统一用 rem，禁止直接写 px） ===== */

    --radius-sm: 0.25rem;   /* 4px */

    --radius-md: 0.5rem;    /* 8px */

    --radius-lg: 0.75rem;   /* 12px */

    --radius-xl: 1.25rem;   /* 20px */



    /* ===== 边框宽度 ===== */

    --border-width: 0.09375rem;   /* 1.5px @ 16px root */

    --border-line: var(--hex-e0e0e0);



    /* ===== 字体层级 ===== */

    --font-title: 18px;

    --font-title-lg: 20px;

    --font-body: 14px;

    --font-body-lg: 16px;

    --font-small: 12px;

    

    /* ===== 色彩体系 ===== */

    --primary: var(--legacy-orange);

    --primary-dark: var(--legacy-orange-dark);

    --primary-light: var(--legacy-orange-light);

    --success: var(--legacy-success);

    --danger: var(--legacy-danger);

    --warning: var(--legacy-warning);

    --info: var(--legacy-info);

    --primary-color: var(--legacy-orange);

    --primary-dark-color: var(--legacy-orange-dark);

    --primary-light-color: var(--legacy-orange-light);

    --success-color: var(--legacy-success);

    --danger-color: var(--legacy-danger);

    --warning-color: var(--legacy-warning);

    --info-color: var(--legacy-info);

    

    /* V5.0 三大板块视觉色系 */

    --section-charity: var(--legacy-red);

    --section-charity-light: var(--red-50);

    --section-charity-gradient: linear-gradient(135deg, var(--legacy-red), var(--hex-ff6b6b));

    --section-commerce: var(--hex-ff8c00);

    --section-commerce-light: var(--hex-fff8e7);

    --section-elder: var(--legacy-purple);

    --section-elder-light: var(--hex-f5eef8);

    

    /* V4.6 Meituan CX 统一色板 */

    --mt-red: var(--hex-c81f2c);

    --mt-red-dark: var(--hex-b71c1c);

    --mt-orange: var(--hex-ff9f00);

    --mt-orange-dark: var(--hex-e68a00);

    --mt-bg: var(--legacy-bg);

    --mt-card-bg: var(--bg-card);

    --mt-text-primary: var(--legacy-text);

    --mt-text-secondary: var(--legacy-text-secondary);

    --mt-text-light: var(--legacy-text-light);

    --mt-border: var(--legacy-border);

    --mt-shadow: 0 2px 12px rgba(0,0,0,0.06);

    --mt-shadow-card: 0 2px 8px rgba(0,0,0,0.04);

    --mt-radius: 12px;

    --mt-radius-sm: 8px;

    --mt-radius-lg: 16px;

    --mt-font-title: 18px;

    --mt-font-body: 14px;

    --mt-font-small: 12px;

    

    /* ===== 京东APP 视觉规范 V1.0 ===== */

    --jd-primary: var(--hex-e2231a);

    --jd-primary-dark: var(--hex-c41d16);

    --jd-primary-light: var(--hex-ffecec);

    --jd-secondary: var(--hex-333333);

    --jd-text-primary: var(--hex-333333);

    --jd-text-secondary: var(--legacy-text-secondary);

    --jd-text-tertiary: var(--legacy-text-light);

    --jd-text-placeholder: var(--hex-cccccc);

    --jd-bg-page: var(--legacy-bg);

    --jd-bg-card: var(--bg-card);

    --jd-bg-elevated: var(--hex-fafafa);

    --jd-border: var(--hex-e5e5e5);

    --jd-border-light: var(--hex-f0f0f0);

    --jd-shadow: 0 2px 8px rgba(0,0,0,0.08);

    --jd-shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

    --jd-radius-sm: 6px;

    --jd-radius: 8px;

    --jd-radius-lg: 12px;

    --jd-radius-xl: 16px;

    --jd-radius-round: 9999px;

    --jd-icon-lg: 128px;

    --jd-icon-md: 64px;

    --jd-icon-sm: 48px;

    --jd-image-product: 800px;

    --jd-image-detail: 750px;

    

    /* Legacy tokens keep working */

    --bg: var(--legacy-bg);

    --white: var(--bg-card);

    --text: var(--legacy-text);

    --text-secondary: var(--legacy-text-secondary);

    --text-light: var(--legacy-text-light);

    --border: var(--legacy-border);

    --shadow: 0 4px 12px rgba(0,0,0,0.08);

    --shadow-lg: 0 8px 20px rgba(0,0,0,0.1);

    --shadow-xl: 0 12px 32px rgba(0,0,0,0.12);

    --shadow-card: 0 2px 8px rgba(0,0,0,0.04);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --gradient-primary: linear-gradient(135deg, var(--legacy-orange) 0%, var(--hex-ff6b2b) 100%);

    --gradient-warm: linear-gradient(135deg, var(--legacy-orange) 0%, var(--hex-ffd93d) 100%);

    --gradient-commerce: linear-gradient(135deg, var(--legacy-gold) 0%, var(--hex-ffa500) 50%, var(--hex-ff8c00) 100%);

    --gradient-charity: linear-gradient(135deg, var(--hex-ff6b6b) 0%, var(--hex-ee5a5a) 100%);

    --gradient-elder: linear-gradient(135deg, var(--legacy-purple) 0%, var(--hex-8e44ad) 100%);

    --gradient-silver: linear-gradient(135deg, var(--hex-667eea) 0%, var(--hex-764ba2) 100%);

    --glass-bg: rgba(255,255,255,0.85);

    --glass-border: rgba(255,255,255,0.3);

    --page-padding-bottom: 90px;

    --main-padding-bottom: calc(env(safe-area-inset-bottom, var(--spacing-base)) + 90px);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    -webkit-text-size-adjust: 100%;

    scroll-behavior: smooth;

}



body {

    margin: 0;

    padding: 0;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

    background: var(--legacy-bg);

    color: var(--text);

    line-height: 1.5;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    font-size: var(--font-body);

}



a {

    color: var(--primary);

    text-decoration: none;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

    /* 图片高清渲染（auto适合照片，crisp-edges适合图标�?*/

    image-rendering: auto;

    /* 消除移动端缩放模�?*/

    -ms-interpolation-mode: bicubic;

    /* GPU加速防抖动 */

    transform: translateZ(0);

    -webkit-transform: translateZ(0);

    /* 防止Chrome图片发虚 */

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    /* 保持图片质量不降�?*/

    -webkit-optimize-contrast: auto;

    /* 高清适配 */

    image-rendering: -webkit-optimize-contrast;

    /* 确保图片填充容器 */

    object-fit: cover;

    object-position: center;

}



/* 图标类图片保持锐�?*/

img[src*="icon"]:not([src*="photo"]),

img.icon-img,

.kk-icon img,

.entry-icon-wrap img,

.icon-sm img,

.icon-md img,

.icon-lg img {

    image-rendering: -webkit-optimize-contrast;

    image-rendering: crisp-edges;

}



/* 商品图片居中裁剪不变�?*/

.goods-img img,

.goods-card img,

.product-img img,

.goods-thumb img,

.page-goods-img img,

.goods-card-img {

    object-fit: cover;

    object-position: center;

    width: 100%;

    height: 100%;

    min-height: 100%;

    display: block;

    /* 高清显示 */

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* 商品图片容器 */

.goods-img,

.goods-card-img,

.product-img,

.page-goods-img,

.goods-card-img-wrap {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--legacy-bg), var(--hex-e0e0e0));

}



/* 集市、生鲜分类、生鲜预售页面通用商品图片 */

.goods-card-img-wrap img,

.page-goods-img img,

.fresh-product-img img,

.category-product-img img,

.fresh-flash-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* 生鲜页面商品图片容器 */

.fresh-flash-img,

.fresh-product-img {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--hex-e8f8fa), var(--hex-cfeef5));

}



/* 金刚区图标自适应 */

.page-kingkong-icon,

.kk-icon,

.kk-icon-meituan,

.entry-icon-wrap {

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.page-kingkong-icon img,

.kk-icon img,

.kk-icon-meituan img,

.entry-icon-wrap img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    image-rendering: crisp-edges;

}



/* 购物车商品图片高清自适应 */

.cart-img,

.cart-item-img,

.cart-goods-img,

.item-img {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--legacy-bg), var(--hex-e0e0e0));

}



.cart-img img,

.cart-item-img img,

.cart-goods-img img,

.item-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* 生鲜预售商品图片 */

.fresh-img,

.fresh-goods-img,

.pre-sale-img {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--hex-f0f8f0), var(--hex-d0e8d0));

}



.fresh-img img,

.fresh-goods-img img,

.pre-sale-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* Banner/轮播图全宽高�?*/

.banner-img img,

.banner-slide img,

.carousel-img img,

.swiper-slide img {

    object-fit: cover;

    object-position: center;

    width: 100%;

    min-height: 100%;

    image-rendering: auto;

}



/* ========== 全局图片加载优化 ========== */

/* 图片加载前防止CLS */

img:not([src]),

img[src=""],

img[src="#"] {

    visibility: hidden;

}

/* 响应式懒加载 �?渐进淡入，不�?opacity:0 避免�?JS 时图片不可见 */

img[loading="lazy"] {

    transition: opacity 0.4s ease;

}

img[loading="lazy"].loaded {

    opacity: 1;

}



/* ========== Meituan CX KingKong Grid ========== */

.kingkong-meituan {

    background: var(--white);

    border-radius: var(--mt-radius-lg);

    padding: 1rem 0.75rem 0.5rem;

    margin: 0 1rem 1rem;

    box-shadow: var(--mt-shadow);

}

.kingkong-meituan .kk-row {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: var(--spacing-xs) var(--spacing-sm);

    margin-bottom: var(--spacing-sm);

}

.kingkong-meituan .kk-row:last-child {

    margin-bottom: 0;

}

.kingkong-meituan .kk-item-meituan {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-sm);

    padding: var(--spacing-sm) var(--spacing-xs);

    border-radius: var(--mt-radius);

    cursor: pointer;

    transition: var(--transition);

    text-decoration: none;

    color: var(--text);

}

.kingkong-meituan .kk-item-meituan:active {

    background: var(--legacy-bg);

    transform: scale(0.94);

}

.kingkong-meituan .kk-icon-meituan {

    width: clamp(2.5rem, 12vw, 3rem);

    height: clamp(2.5rem, 12vw, 3rem);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(1.625rem, 8vw, 2rem);

    position: relative;

}

.kingkong-meituan .kk-icon-meituan i {

    font-size: clamp(1.375rem, 7vw, 1.75rem);

    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}

.kingkong-meituan .kk-item-meituan .kk-text-meituan {

    font-size: var(--mt-font-small);

    color: var(--text);

    font-weight: 500;

    text-align: center;

    line-height: 1.2;

}



/* ========== Meituan Product Card ========== */

.product-card-mt {

    background: var(--white);

    border-radius: var(--mt-radius);

    overflow: hidden;

    box-shadow: var(--mt-shadow-card);

    cursor: pointer;

    transition: var(--transition);

}

.product-card-mt:active {

    transform: scale(0.98);

}

.product-card-mt .mt-prod-img {

    width: 100%;

    aspect-ratio: 1/1;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    font-size: var(--v85-text-hero);

    overflow: hidden;

}

.product-card-mt .mt-prod-badge {

    position: absolute;

    top: 6px;

    left: 6px;

    background: linear-gradient(135deg, var(--legacy-red), var(--hex-ff5252));

    color: var(--bg-card);

    font-size: 10px;

    padding: var(--spacing-xs) var(--spacing-base);

    border-radius: var(--radius-md);

    font-weight: 600;

}

.product-card-mt .mt-prod-info {

    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);

}

.product-card-mt .mt-prod-name {

    font-size: var(--mt-font-body);

    color: var(--mt-text-primary);

    font-weight: 500;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    line-height: 1.4;

    margin-bottom: 6px;

    min-height: var(--height-btn);

}

.product-card-mt .mt-prod-price-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

}

.product-card-mt .mt-prod-price {

    color: var(--mt-orange);

    font-size: var(--font-title);

    font-weight: 700;

}

.product-card-mt .mt-prod-price .yen {

    font-size: var(--font-small);

    font-weight: 600;

}

.product-card-mt .mt-prod-original {

    font-size: 12px;

    color: var(--hex-bbbbbb);

    text-decoration: line-through;

    margin-left: var(--spacing-xs);

}

.product-card-mt .mt-prod-sales {

    font-size: 12px;

    color: var(--mt-text-light);

    margin-top: 2px;

}



input, textarea, select, button {

    font-family: inherit;

    font-size: inherit;

}



/* ========== Container ========== */

.container {

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    padding: 0 var(--spacing-base);

}



.container-sm {

    max-width: 720px;

}



/* ========== Top Bar ========== */

.top-bar {

    position: sticky;

    top: 0;

    z-index: var(--z-dropdown);

    background: var(--glass-bg);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    padding: var(--spacing-md) var(--spacing-base);

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-shadow: var(--shadow);

    border-bottom: 1px solid var(--glass-border);

}



.top-bar .back-btn {

    width: var(--height-btn);

    height: var(--height-btn);

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: none;

    font-size: var(--font-title-lg);

    color: var(--text);

    cursor: pointer;

    border-radius: 50%;

    transition: var(--transition);

}



.top-bar .back-btn:hover {

    background: var(--border);

}



.top-bar .title {

    font-size: var(--font-title);

    font-weight: 600;

}



.top-bar .action-btn {

    width: var(--height-btn);

    height: var(--height-btn);

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: none;

    font-size: var(--font-title-lg);

    color: var(--text);

    cursor: pointer;

    border-radius: 50%;

}



/* ========== Buttons ========== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: var(--spacing-sm) var(--spacing-lg);

    border-radius: var(--radius);

    border: none;

    font-size: var(--font-h3);

    font-weight: 500;

    cursor: pointer;

    transition: var(--transition);

    text-decoration: none;

    white-space: nowrap;

    user-select: none;

    position: relative;

    overflow: hidden;

}



.btn:active {

    transform: scale(0.96);

}



.btn-primary {

    background: var(--primary);

    color: var(--white);

}



.btn-primary:hover {

    background: var(--primary-dark);

    box-shadow: var(--shadow-lg);

}



.btn-success {

    background: var(--success);

    color: var(--white);

}



.btn-success:hover {

    background: var(--hex-5daf34);

    box-shadow: var(--shadow-lg);

}



.btn-danger {

    background: var(--danger);

    color: var(--white);

}



.btn-danger:hover {

    background: var(--hex-e85b5b);

    box-shadow: var(--shadow-lg);

}



.btn-outline {

    background: transparent;

    color: var(--primary);

    border: 1.5px solid var(--primary);

}



.btn-outline:hover {

    background: var(--primary-light);

}



.btn-lg {

    padding: var(--spacing-md) var(--spacing-base);

    font-size: var(--font-h2);

    border-radius: 1.5rem;

}



.btn-xl {

    padding: var(--spacing-base) var(--spacing-lg);

    font-size: var(--font-title);

    border-radius: 1.75rem;

}



.btn-block {

    display: flex;

    width: 100%;

}



.btn-icon {

    width: 40px;

    height: 40px;

    padding: 0;

    border-radius: 50%;

}



.btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none;

}



/* Gradient button variant */

.btn-gradient {

    background: var(--gradient-primary);

    color: var(--white);

    text-shadow: 0 1px 2px rgba(0,0,0,0.1);

}



.btn-gradient:hover {

    box-shadow: 0 6px 24px rgba(255,154,60,0.45);

    transform: translateY(-1px);

}



/* Ghost button variant */

.btn-ghost {

    background: transparent;

    color: var(--text-secondary);

}



.btn-ghost:hover {

    background: var(--border);

}



/* Round button variant */

.btn-round {

    border-radius: 3.125rem;

}



/* Ripple effect for all buttons */

.btn .ripple {

    position: absolute;

    border-radius: 50%;

    background: rgba(255,255,255,0.35);

    transform: scale(0);

    animation: rippleEffect 0.6s ease-out;

    pointer-events: none;

}



/* ========== Cards ========== */

.card {

    background: var(--white);

    border-radius: var(--radius);

    padding: var(--spacing-base);

    transition: var(--transition);

}



.card-shadow {

    box-shadow: var(--shadow);

}



.card-shadow:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-2px);

}



.card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: var(--spacing-md);

    border-bottom: 1px solid var(--border);

    margin-bottom: var(--spacing-md);

}



.card-title {

    font-size: var(--font-body-lg);

    font-weight: 600;

}



.card-body {

    padding: var(--spacing-xs) 0;

}



.card-footer {

    padding-top: var(--spacing-md);

    border-top: 1px solid var(--border);

    margin-top: var(--spacing-md);

}



/* Glassmorphism card variant */

.card-glass {

    background: var(--glass-bg);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border: 1px solid var(--glass-border);

    border-radius: var(--radius);

    padding: var(--spacing-base);

    transition: var(--transition);

}



/* Gradient card variant */

.card-gradient {

    background: var(--gradient-primary);

    color: var(--white);

    border-radius: var(--radius);

    padding: var(--spacing-base);

    transition: var(--transition);

}



.card-gradient .card-title,

.card-gradient .section-title {

    color: var(--white);

}



/* ========== Grids ========== */

.grid {

    display: grid;

    gap: var(--spacing-md);

}



.grid-2 { grid-template-columns: repeat(2, 1fr); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-5 { grid-template-columns: repeat(5, 1fr); }

.grid-6 { grid-template-columns: repeat(6, 1fr); }



.grid-18 {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: var(--spacing-sm);

    padding: var(--spacing-xs);

}



/* ========== 2�?宫格功能入口 - 美团风格 ========== */

.entrance-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--spacing-sm);

    padding: var(--spacing-base);

    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    margin: var(--spacing-md) var(--spacing-base);

}



.entrance-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-sm);

    padding: var(--spacing-base) var(--spacing-sm);

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: var(--transition);

    text-decoration: none;

    color: var(--text);

}



.entrance-item:active {

    transform: scale(0.96);

    background: var(--hex-f5f7fa);

}



.entrance-item .icon-wrap {

    width: 48px;

    height: 48px;

    border-radius: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: var(--font-asset-value);

    background: linear-gradient(135deg, var(--hex-fff5e6) 0%, var(--hex-ffe8cc) 100%);

}



/* 商业金色图标背景 */

.entrance-item.commerce .icon-wrap {

    background: linear-gradient(135deg, var(--hex-fff8e7) 0%, var(--amber-200) 100%);

}



/* 公益红色图标背景 */

.entrance-item.charity .icon-wrap {

    background: linear-gradient(135deg, var(--red-50) 0%, var(--red-100) 100%);

}



/* 银发紫色图标背景 */

.entrance-item.elder .icon-wrap {

    background: linear-gradient(135deg, var(--purple-50) 0%, var(--purple-100) 100%);

}



.entrance-item .icon-label {

    font-size: 13px;

    text-align: center;

    font-weight: 500;

    color: var(--hex-333333);

}



/* ========== 金刚�?8宫格 ========== */

.icon-grid-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    padding: 0.75rem 0.25rem;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: var(--transition);

    text-decoration: none;

    color: var(--text);

}



.icon-grid-item:hover {

    background: var(--primary-light);

    transform: translateY(-3px);

}



.icon-grid-item:active {

    transform: scale(0.95);

}



.icon-grid-item .icon-wrap {

    width: clamp(2.25rem, 10vw, 2.75rem);

    height: clamp(2.25rem, 10vw, 2.75rem);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(1.25rem, 5vw, 1.5rem);

    background: var(--primary-light);

}



.icon-grid-item .icon-label {

    font-size: clamp(0.625rem, 2.5vw, 0.6875rem);

    text-align: center;

    line-height: 1.3;

}







/* V5.0 管理后台侧边栏分组标�?*/

.sidebar-section-title {

    padding: 0.75rem 1rem 0.25rem;

    font-size: 0.6875rem;

    color: rgba(255,255,255,0.4);

    text-transform: uppercase;

    letter-spacing: 0.0625rem;

    font-weight: 600;

}



/* ========== Toast ========== */

.toast-container {

    position: fixed;

    top: 60px;

    left: 50%;

    transform: translateX(-50%);

    z-index: var(--z-toast);

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

    pointer-events: none;

}



.toast {

    padding: var(--spacing-md) var(--spacing-lg);

    border-radius: var(--radius-sm);

    color: var(--white);

    font-size: var(--font-body);

    font-weight: 500;

    white-space: nowrap;

    pointer-events: auto;

    animation: toastIn 0.35s ease;

    box-shadow: var(--shadow-lg);

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

}



.toast-success { background: var(--success); }

.toast-error { background: var(--danger); }

.toast-warning { background: var(--warning); }

.toast-info { background: var(--info); }



.toast-out {

    animation: toastOut 0.3s ease forwards;

}



@keyframes toastIn {

    from { opacity: 0; transform: translateY(-16px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes toastOut {

    from { opacity: 1; transform: translateY(0); }

    to { opacity: 0; transform: translateY(-16px); }

}



.modal {

    background: var(--white);

    border-radius: var(--radius);

    width: 100%;

    max-width: 420px;

    max-height: 80vh;

    overflow: hidden;

    animation: modalSlideUp 0.3s ease;

    display: flex;

    flex-direction: column;

}



.modal-overlay.closing .modal {

    animation: modalSlideDown 0.25s ease forwards;

}



.modal-header {

    padding: var(--spacing-base) var(--spacing-lg);

    border-bottom: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.modal-title {

    font-size: var(--font-h2);

    font-weight: 600;

}



.modal-close {

    width: var(--spacing-2xl);

    height: var(--spacing-2xl);

    border: none;

    background: none;

    font-size: var(--font-h1);

    color: var(--text-secondary);

    cursor: pointer;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.modal-close:hover {

    background: var(--border);

    color: var(--text);

}



.modal-body {

    padding: var(--spacing-lg);

    overflow-y: auto;

    flex: 1;

}



.modal-footer {

    padding: var(--spacing-md) var(--spacing-lg);

    border-top: 1px solid var(--border);

    display: flex;

    gap: 10px;

    justify-content: flex-end;

}



.modal-sm { max-width: var(--spacing-2xl); }

.modal-lg { max-width: 560px; }

.modal-full { max-width: 90vw; max-height: 90vh; }



@keyframes modalSlideUp {

    from { opacity: 0; transform: translateY(30px) scale(0.95); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}



@keyframes modalSlideDown {

    from { opacity: 1; transform: translateY(0) scale(1); }

    to { opacity: 0; transform: translateY(30px) scale(0.95); }

}



/* ========== Skeleton ========== */

.skeleton {

    background: linear-gradient(90deg, var(--hex-f0f0f0) 25%, var(--hex-e0e0e0) 50%, var(--hex-f0f0f0) 75%);

    background-size: 200% 100%;

    animation: skeletonShimmer 1.5s ease-in-out infinite;

    border-radius: var(--radius-sm);

}



.skeleton-text {

    height: 14px;

    margin-bottom: var(--spacing-sm);

    width: 100%;

}



.skeleton-text:last-child { width: 60%; }



.skeleton-title {

    height: var(--spacing-lg);

    width: 50%;

    margin-bottom: var(--spacing-md);

}



.skeleton-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

}



.skeleton-image {

    width: 100%;

    height: 160px;

    border-radius: var(--radius-sm);

}



.skeleton-card {

    padding: var(--spacing-base);

    background: var(--white);

    border-radius: var(--radius);

}



@keyframes skeletonShimmer {

    0% { background-position: -200% 0; }

    100% { background-position: 200% 0; }

}



/* ========== Empty State ========== */

.empty-state {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 60px var(--spacing-lg);

    color: var(--text-secondary);

}



.empty-state .empty-icon {

    font-size: var(--v85-text-hero);

    margin-bottom: var(--spacing-base);

    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--gradient-warm);

    border-radius: 50%;

    animation: float 3s ease-in-out infinite;

}



.empty-state .empty-text {

    font-size: var(--font-h3);

    margin-bottom: var(--spacing-lg);

}



/* ========== Production Empty State（生产空态：友好提示�?========== */

.empty-state-prod {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 64px var(--spacing-xl) 48px;

    text-align: center;

    min-height: 60vh;

}

.empty-state-prod .prod-icon-wrap {

    width: 96px;

    height: 96px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--amber-100), var(amber-200));

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--spacing-lg);

    color: var(--v85-primary, var(--v85-primary));

    font-size: var(--v85-text-lg);

    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.08);

}

.empty-state-prod .prod-title {

    font-size: var(--font-h2);

    font-weight: 600;

    color: var(--text-primary, var(--text-title));

    margin-bottom: var(--spacing-sm);

}

.empty-state-prod .prod-desc {

    font-size: var(--font-body);

    line-height: 1.7;

    color: var(--text-secondary, var(--text-secondary));

    max-width: var(--spacing-2xl);

    margin-bottom: var(--spacing-base);

}

.empty-state-prod .prod-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 14px;

    background: var(--bg-warm-light);

    color: var(--amber-700);

    border-radius: 999px;

    font-size: var(--font-small);

    font-weight: 500;

    border: 1px solid var(--bg-warm-hover);

}

.empty-state-prod .prod-status::before {

    content: '';

    width: 6px; height: 6px;

    border-radius: 50%;

    background: var(--hex-fa8c16);

    animation: pulse 1.5s ease-in-out infinite;

}

.empty-state-prod .prod-action {

    margin-top: var(--spacing-xl);

    padding: var(--spacing-sm) var(--spacing-base);

    background: var(--v85-primary, var(--v85-primary));

    color: var(--v85-bg-card);

    border-radius: 999px;

    border: none;

    font-size: var(--font-body);

    cursor: pointer;

    transition: all 0.2s;

    text-decoration: none;

    display: inline-block;

}

.empty-state-prod .prod-action:hover {

    background: var(--hex-1648b8);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25);

}

.empty-state-prod .prod-action:active { transform: translateY(0); }



@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.4; }

}



/* ========== Loading Spinner ========== */

.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(255,255,255,0.7);

    z-index: var(--z-toast);

    display: flex;

    align-items: center;

    justify-content: center;

}



.loading-spinner {

    width: 40px;

    height: 40px;

    border: 3px solid var(--border);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}



.loading-dots {

    display: flex;

    gap: 6px;

}



.loading-dots span {

    width: var(--spacing-sm);

    height: var(--spacing-sm);

    border-radius: 50%;

    background: var(--primary);

    animation: dotPulse 1.4s ease-in-out infinite both;

}



.loading-dots span:nth-child(1) { animation-delay: -0.32s; }

.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

.loading-dots span:nth-child(3) { animation-delay: 0s; }



@keyframes spin {

    to { transform: rotate(360deg); }

}



@keyframes dotPulse {

    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }

    40% { transform: scale(1); opacity: 1; }

}



/* ========== Animations ========== */

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes fadeOut {

    from { opacity: 1; }

    to { opacity: 0; }

}



@keyframes slideUp {

    from { opacity: 0; transform: translateY(24px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes slideDown {

    from { opacity: 0; transform: translateY(-24px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes pulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.08); }

}



@keyframes shake {

    0%, 100% { transform: translateX(0); }

    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }

    20%, 40%, 60%, 80% { transform: translateX(4px); }

}



@keyframes bounceIn {

    0% { transform: scale(0); opacity: 0; }

    50% { transform: scale(1.15); }

    70% { transform: scale(0.95); }

    100% { transform: scale(1); opacity: 1; }

}



@keyframes rippleEffect {

    to { transform: scale(4); opacity: 0; }

}



@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes scaleIn {

    from { transform: scale(0.9); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}



@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-8px); }

}



@keyframes shimmer {

    0% { background-position: -200% 0; }

    100% { background-position: 200% 0; }

}



@keyframes gradientShift {

    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }

}



@keyframes fabPulse {

    0% { transform: scale(1); opacity: 0.6; }

    100% { transform: scale(1.5); opacity: 0; }

}



.animate-fadeIn { animation: fadeIn 0.5s ease; }

.animate-slideUp { animation: slideUp 0.5s ease; }

.animate-slideDown { animation: slideDown 0.5s ease; }

.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.animate-shake { animation: shake 0.5s ease; }

.animate-bounceIn { animation: bounceIn 0.6s ease; }

.animate-fadeInUp { animation: fadeInUp 0.5s ease; }

.animate-scaleIn { animation: scaleIn 0.4s ease; }

.animate-float { animation: float 3s ease-in-out infinite; }



/* Staggered animation delays */

.delay-1 { animation-delay: 0.1s; }

.delay-2 { animation-delay: 0.2s; }

.delay-3 { animation-delay: 0.3s; }

.delay-4 { animation-delay: 0.4s; }

.delay-5 { animation-delay: 0.5s; }



/* ========== Score / Badge ========== */

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: var(--spacing-lg);

    height: var(--spacing-lg);

    padding: 0 6px;

    border-radius: 0.625rem;

    background: var(--danger);

    color: var(--white);

    font-size: 12px;

    font-weight: 600;

}



.score-display {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    background: linear-gradient(135deg, var(--legacy-gold), var(--hex-ffa500));

    color: var(--hex-8b4513);

    padding: var(--spacing-xs) var(--spacing-md);

    border-radius: var(--radius-xl);

    font-weight: 600;

    font-size: var(--font-body);

}



/* Badge color variants */

.badge-primary {

    background: var(--primary);

    color: var(--white);

}



.badge-success {

    background: var(--success);

    color: var(--white);

}



.badge-warning {

    background: var(--warning);

    color: var(--white);

}



/* Badge dot for status indicators */

.badge-dot {

    width: var(--spacing-sm);

    height: var(--spacing-sm);

    border-radius: 50%;

    display: inline-block;

}



/* Rounded tag variant */

.tag-rounded {

    border-radius: var(--radius-xl);

    padding: var(--spacing-xs) var(--spacing-md);

}



/* ========== Product Card - 美团风格 ========== */

.product-card {

    border-radius: var(--radius);

    overflow: hidden;

    background: var(--white);

    box-shadow: var(--shadow);

    border: none;

    transition: var(--transition);

    cursor: pointer;

}



.product-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-xl);

}



.product-card:hover .product-image {

    transform: scale(1.03);

}



.product-image {

    width: 100%;

    aspect-ratio: 4/3;

    object-fit: cover;

    background: linear-gradient(135deg, var(--hex-f5f7fa) 0%, var(--hex-e4e8ed) 100%);

    transition: transform 0.3s ease;

}



/* Product card corner badge */

.product-card-badge {

    position: absolute;

    top: 10px;

    left: 10px;

    padding: var(--spacing-xs) var(--spacing-sm);

    border-radius: var(--radius-xl);

    font-size: 12px;

    font-weight: 600;

    color: var(--white);

    background: linear-gradient(135deg, var(--hex-ff6b6b) 0%, var(--hex-ee5a5a) 100%);

    z-index: var(--z-base, 2);

    box-shadow: var(--shadow-md);

}



.product-info {

    padding: var(--spacing-md) var(--spacing-base);

}



.product-name {

    font-size: var(--font-h3);

    font-weight: 600;

    margin-bottom: var(--spacing-sm);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--legacy-text);

}



.product-price {

    color: var(--hex-ff6b35);

    font-size: var(--font-title-lg);

    font-weight: 700;

    display: flex;

    align-items: baseline;

    gap: var(--spacing-xs);

}



.product-price small {

    font-size: 13px;

    font-weight: 500;

}



.product-sales {

    color: var(--text-secondary);

    font-size: var(--font-small);

    margin-top: var(--spacing-sm);

}



.product-original-price {

    color: var(--text-light);

    font-size: var(--font-small);

    text-decoration: line-through;

    margin-left: var(--spacing-sm);

}



.product-tag {

    display: inline-block;

    padding: var(--spacing-md) var(--spacing-sm);

    border-radius: var(--radius-xl);

    font-size: 12px;

    margin-right: var(--radius-badge);

    font-weight: 500;

}



.tag-expiring { background: var(--amber-100); color: var(--primary); }

.tag-hot { background: var(--red-50); color: var(--danger); }

.tag-quality { background: var(--green-50); color: var(--success); }



/* ========== Form Elements ========== */

.form-group {

    margin-bottom: var(--spacing-base);

}



.form-label {

    display: block;

    font-size: var(--font-body);

    font-weight: 500;

    margin-bottom: 6px;

    color: var(--text);

}



.form-input {

    width: 100%;

    padding: var(--spacing-sm) var(--spacing-base);

    border: 1.5px solid var(--border);

    border-radius: var(--radius-sm);

    font-size: var(--font-h3);

    color: var(--text);

    background: var(--white);

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    outline: none;

}



.form-input:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(255, 154, 60, 0.1);

}



.form-input::placeholder {

    color: var(--text-light);

}



.form-textarea {

    resize: vertical;

    min-height: 80px;

}



/* Form input error state */

.form-input-error {

    border-color: var(--danger);

    box-shadow: 0 0 0 3px rgba(245,108,108,0.1);

}



/* Form input success state */

.form-input-success {

    border-color: var(--success);

}



/* ========== Section ========== */

.section {

    margin-bottom: var(--spacing-xl);

}



.section-title {

    font-size: var(--font-title);

    font-weight: 700;

    margin-bottom: 14px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-left: var(--spacing-md);

    position: relative;

}



.section-title::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 3px;

    height: 18px;

    background: var(--primary);

    border-radius: 0.125rem;

}



.section-more {

    color: var(--text-secondary);

    font-size: 13px;

    cursor: pointer;

}



/* ========== Divider ========== */

.divider {

    height: 1px;

    background: var(--border);

    margin: var(--spacing-base) 0;

}



.divider-text {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    color: var(--text-secondary);

    font-size: 13px;

}



.divider-text::before,

.divider-text::after {

    content: '';

    flex: 1;

    height: 1px;

    background: var(--border);

}



/* ========== AI Float Button (styles now in ai-fab.html fragment) ========== */

.ai-fab-global {

    z-index: var(--z-dropdown);

}



/* ========== Utility Classes ========== */

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-primary { color: var(--primary); }

.text-success { color: var(--success); }

.text-danger { color: var(--danger); }

.text-secondary { color: var(--text-secondary); }



.mt-1 { margin-top: var(--spacing-sm); }

.mt-2 { margin-top: var(--spacing-base); }

.mt-3 { margin-top: var(--spacing-xl); }

.mt-4 { margin-top: var(--spacing-2xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }

.mb-2 { margin-bottom: var(--spacing-base); }

.mb-3 { margin-bottom: var(--spacing-xl); }

.mb-4 { margin-bottom: var(--spacing-2xl); }

.ml-1 { margin-left: var(--spacing-sm); }

.mr-1 { margin-right: var(--spacing-sm); }



.p-1 { padding: var(--spacing-sm); }

.p-2 { padding: var(--spacing-base); }

.p-3 { padding: var(--spacing-xl); }



.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-center { display: flex; align-items: center; justify-content: center; }

.flex-between { display: flex; align-items: center; justify-content: space-between; }

.flex-wrap { flex-wrap: wrap; }

.flex-1 { flex: 1; }

.gap-1 { gap: var(--spacing-sm); }

.gap-2 { gap: var(--spacing-base); }



.w-full { width: 100%; }

.hidden { display: none !important; }

.visible { display: block !important; }

.relative { position: relative; }



/* Enhanced utility classes */

.rounded-full { border-radius: 50%; }

.shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

.shadow-none { box-shadow: none; }

.overflow-hidden { overflow: hidden; }

.truncate {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.line-clamp-2 {

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.gradient-text {

    background: var(--gradient-primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Page content area with bottom nav clearance */

.page-content {

    padding-bottom: var(--main-padding-bottom, var(--page-padding-bottom));

}



/* ========== Custom Scrollbar ========== */

::-webkit-scrollbar {

    width: var(--spacing-xs);

}



::-webkit-scrollbar-track {

    background: transparent;

}



::-webkit-scrollbar-thumb {

    background: var(--border);

    border-radius: 0.125rem;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--text-light);

}



/* ========== Elder Mode Base ========== */

body.elder-mode {

    font-size: var(--font-h1);

    line-height: 1.8;

}



body.elder-mode .btn {

    min-height: 52px;

    min-width: 140px;

    padding: var(--spacing-md) var(--spacing-base);

    font-size: var(--font-title-lg);

    border-radius: 0.875rem;

}



body.elder-mode .btn-lg {

    padding: 18px 36px;

    font-size: var(--font-h1);

}



body.elder-mode .btn-xl {

    padding: 22px 44px;

    font-size: var(--font-asset-value);

}



body.elder-mode .card {

    padding: var(--spacing-xl);

    border-radius: var(--radius-xl);

}



body.elder-mode .icon-grid-item .icon-wrap {

    width: 56px;

    height: 56px;

    font-size: var(--v85-text-xl);

}



body.elder-mode .icon-grid-item .icon-label {

    font-size: var(--font-h3);

}



body.elder-mode .bottom-nav .nav-item {

    font-size: var(--font-body);

}



body.elder-mode .bottom-nav .nav-item .nav-icon {

    font-size: var(--v85-text-xl);

}



body.elder-mode .form-input {

    padding: var(--spacing-md) var(--spacing-sm);

    font-size: var(--font-title-lg);

}



body.elder-mode .form-label {

    font-size: var(--font-title);

}



body.elder-mode .modal {

    border-radius: var(--radius-xl);

}



body.elder-mode .modal-title {

    font-size: var(--font-h1);

}



body.elder-mode .modal-body {

    font-size: var(--font-title-lg);

}



body.elder-mode .toast {

    font-size: var(--font-title);

    padding: var(--spacing-base) var(--spacing-xl);

}



/* Enhanced elder mode overrides */

body.elder-mode .card-glass {

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    background: var(--white);

}



body.elder-mode .section-title::before {

    height: var(--spacing-xs);

    width: clamp(1.25rem, 6vw, 1.5rem);

}



body.elder-mode .bottom-nav {

    padding: 0.625rem 0;

}



body.elder-mode .bottom-nav .nav-item {

    padding: 0.625rem 1rem;

}



/* ========== Responsive ==========

 * 断点基于 variables.css 设计 Token:

 * max-width: 768px  -> --breakpoint-md

 * max-width: 480px  -> --breakpoint-sm

 * min-width: 769px  -> --breakpoint-md + 1 (�?max-width:768px 配对)

 * max-width: 375px  -> --breakpoint-xs

 */

@media (max-width: 768px) {

    .grid-4, .grid-5, .grid-6 {

        grid-template-columns: repeat(3, 1fr);

    }



    .grid-18 {

        grid-template-columns: repeat(5, 1fr);

    }



    .modal {

        max-width: 92vw;

    }



    .hide-mobile {

        display: none !important;

    }

}



@media (max-width: 480px) {

    .grid-4, .grid-5, .grid-6 {

        grid-template-columns: repeat(2, 1fr);

    }



    .grid-18 {

        grid-template-columns: repeat(4, 1fr);

    }



    .btn-xl {

        padding: var(--spacing-md) var(--spacing-base);

        font-size: var(--font-body-lg);

    }

}



@media (min-width: 769px) {

    .hide-desktop {

        display: none !important;

    }

}



/* ========== 8大类别滚动屏 ========== */

.category-scroll-section {

    padding: 0 var(--spacing-base) var(--spacing-base);

}

.category-scroll {

    display: flex;

    gap: var(--spacing-md);

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    padding-bottom: var(--spacing-sm);

}

.category-scroll::-webkit-scrollbar {

    display: none;

}

.category-card {

    flex: 0 0 140px;

    scroll-snap-align: start;

    background: var(--bg-card);

    border-radius: 1rem;

    padding: var(--spacing-lg) var(--spacing-md);

    text-align: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.04);

    cursor: pointer;

    transition: transform 0.2s;

    text-decoration: none;

    display: block;

}

.category-card:active {

    transform: scale(0.96);

}

.cat-icon {

    font-size: var(--v85-text-hero);

    margin-bottom: var(--spacing-sm);

}

.cat-name {

    font-size: var(--font-body-lg);

    font-weight: 600;

    color: var(--text, var(--hex-333333));

}

.cat-desc {

    font-size: var(--font-small);

    color: var(--text-light, var(--legacy-text-light));

    margin-top: var(--spacing-xs);

}



/* 老人模式适配 */

body.elder-mode .category-card {

    flex: 0 0 200px;

    padding: 28px var(--spacing-base);

}

body.elder-mode .cat-icon {

    font-size: var(--v85-text-xl);

}

body.elder-mode .cat-name {

    font-size: var(--font-h1);

}

body.elder-mode .cat-desc {

    font-size: var(--font-body-lg);

}



/* [已移除] 旧版美团风格my-meituan样式�?�?已被V8.0政务商务风替�?*/



/* ========== 美团小象超市风格搜索�?========== */

.header-meituan {

    background: var(--hex-4fc3f7);

    /* 各页面统一顶部留白：移动端自动读取 safe-area-inset-top，桌面端回退 0，额外自适应+30px防遮挡状态栏 */

    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(1.5rem, 5vw, 1.875rem));

    padding-right: clamp(0.375rem, 2vw, 0.5rem);

    padding-bottom: clamp(0.25rem, 1.5vw, 0.375rem);

    padding-left: clamp(0.375rem, 2vw, 0.5rem);

    position: relative;

    z-index: var(--z-dropdown);

    box-shadow: var(--shadow-md);

    border-bottom-left-radius: clamp(0.5rem, 3vw, 0.75rem);

    border-bottom-right-radius: clamp(0.5rem, 3vw, 0.75rem);

}



.header-top-bar {

    padding: 0 var(--spacing-base);

    margin-bottom: var(--spacing-xs);

}



.location-selector {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    cursor: pointer;

    padding: var(--spacing-xs) var(--spacing-base);

    background: rgba(255,255,255,0.2);

    border-radius: var(--radius-lg);

    transition: all 0.3s ease;

}



.location-selector:hover {

    background: rgba(255,255,255,0.35);

    transform: scale(1.02);

}



.location-icon {

    font-size: var(--font-body);

    color: var(--bg-card);

}



.location-text {

    font-size: var(--font-small);

    font-weight: 500;

    color: var(--bg-card);

    max-width: 100px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.location-arrow {

    font-size: var(--font-small);

    color: rgba(255,255,255,0.85);

}



.header-content-meituan {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 var(--spacing-base);

    gap: var(--spacing-md);

}



.header-left-meituan {

    flex-shrink: 0;

}



.header-back-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: var(--spacing-2xl);

    height: var(--spacing-2xl);

    border-radius: 50%;

    background: rgba(255,255,255,0.25);

    color: var(--bg-card);

    font-size: var(--font-title-lg);

    text-decoration: none;

    transition: all 0.3s ease;

}



.header-back-btn:hover {

    background: rgba(255,255,255,0.4);

    transform: scale(1.05);

}



/* 页眉文字 - 仅在没有标题时隐藏 */

header:not(.has-title) .header-title-meituan,

header:not(.has-title) .header-top-bar,

header:not(.has-title) .location-selector,

header:not(.has-title) .location-text {

    display: none !important;

}

header:not(.has-title) span,

header:not(.has-title) div[class*="title"],

header:not(.has-title) div[class*="text"] {

    display: none !important;

}



/* X 关闭按钮 */

.header-close-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: var(--spacing-2xl);

    height: var(--spacing-2xl);

    border-radius: 50%;

    background: rgba(255,255,255,0.2);

    color: var(--bg-card);

    font-size: var(--font-title);

    text-decoration: none;

    transition: all 0.3s ease;

    margin-left: var(--spacing-xs);

}

.header-close-btn:hover {

    background: rgba(255,255,255,0.35);

    transform: scale(1.05);

}

.header-close-btn--title {

    background: rgba(0,0,0,0.06);

    color: var(--legacy-text, var(--text-heading));

    margin-left: auto;

}

.header-close-btn--title:hover {

    background: rgba(0,0,0,0.12);

}



.search-section {

    flex: 1;

    max-width: 100%;

    width: calc(100% - 120px);

}



.search-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

}



.search-input-container {

    flex: 1;

    display: flex;

    align-items: center;

    gap: clamp(0.25rem, 1vw, 0.375rem);

    background: rgba(255,255,255,0.95);

    border-radius: clamp(0.875rem, 3vw, 1.125rem);

    padding: 0 clamp(0.625rem, 2.5vw, 0.875rem);

    min-height: clamp(2.25rem, 8vw, 2.75rem);

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

    border: 1px solid rgba(255,255,255,0.6);

    transition: all 0.3s ease;

}



.search-input-container:hover {

    background: var(--bg-card);

    box-shadow: 0 3px 10px rgba(0,0,0,0.1);

}



.search-icon {

    font-size: var(--font-body-lg);

    color: var(--legacy-text-light);

    flex-shrink: 0;

}



.search-input {

    flex: 1;

    min-width: 0;

    border: none;

    outline: none;

    font-size: var(--font-body);

    color: var(--hex-333333);

    background: transparent;

    cursor: text;

    height: 30px;

    line-height: 30px;

}



.search-input::placeholder {

    color: var(--legacy-text-light);

}



.ai-camera-btn {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: rgba(255,255,255,0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

}



.ai-camera-btn:hover {

    background: rgba(255,255,255,0.5);

    transform: scale(1.08);

}



.ai-camera-btn i {

    font-size: var(--font-title-lg);

    color: var(--hex-333333);

}



.ai-label {

    display: none;

}



.header-right-meituan {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    flex-shrink: 0;

}



.scan-btn,

.msg-btn {

    width: var(--spacing-2xl);

    height: var(--spacing-2xl);

    border-radius: 50%;

    background: rgba(255,255,255,0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--hex-333333);

    font-size: var(--font-body-lg);

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

}



.scan-btn:hover,

.msg-btn:hover {

    background: rgba(255,255,255,0.5);

    transform: scale(1.08);

}



.scan-btn i,

.msg-btn i {

    font-size: var(--font-body-lg);

}



.msg-dot {

    position: absolute;

    top: -2px;

    right: -2px;

    min-width: 14px;

    height: 14px;

    background: var(--hex-ff3b30);

    color: white;

    font-size: 9px;

    border-radius: 0.4375rem;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 var(--spacing-sm);

    font-weight: 600;

}



@media (max-width: 375px) {

    .location-text {

        max-width: 70px;

        font-size: var(--font-small);

    }

    

    .search-input-container {

        padding: var(--spacing-sm) var(--spacing-md);

    }

    

    .ai-camera-inner {

        width: var(--spacing-2xl);

        height: var(--spacing-2xl);

        font-size: var(--font-body-lg);

    }

    

    .ai-label {

        display: none;

    }

    

    .scan-btn,

    .msg-btn {

        width: 34px;

        height: 34px;

        font-size: var(--font-title);

    }

}



/* ========== 定位选择器弹�?========== */

.location-picker-overlay {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.4);

    z-index: var(--z-top-nav);

    animation: pickerFadeIn 0.2s ease;

}

@keyframes pickerFadeIn { from { opacity: 0; } to { opacity: 1; } }



.location-picker-sheet {

    width: 100%;

    max-width: 480px;

    max-height: 75vh;

    background: var(--bg-card);

    border-radius: 1rem 16px 0 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    animation: pickerSlideUp 0.25s ease;

}

@keyframes pickerSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }



.location-picker-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: var(--spacing-base) var(--spacing-lg);

    border-bottom: 1px solid var(--legacy-border);

    flex-shrink: 0;

}

.location-picker-title {

    font-size: var(--font-body-lg);

    font-weight: 600;

    color: var(--legacy-text);

}

.location-picker-close {

    width: 28px;

    height: 28px;

    border: none;

    background: var(--legacy-bg);

    border-radius: 50%;

    font-size: var(--font-body);

    color: var(--legacy-text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

.location-picker-close:hover { background: var(--hex-e0e0e0); }



.location-picker-tabs {

    padding: var(--spacing-md) var(--spacing-lg);

    font-size: 13px;

    color: var(--legacy-text-secondary);

    border-bottom: 1px solid var(--hex-f0f0f0);

    white-space: nowrap;

    overflow-x: auto;

    flex-shrink: 0;

}

.location-picker-tabs span { display: inline; }

.location-picker-tabs .active { color: var(--primary); font-weight: 600; }

.location-tab-arrow { color: var(--hex-cccccc); margin: 0 var(--spacing-xs); }



.location-picker-body {

    flex: 1;

    overflow-y: auto;

    padding: var(--spacing-xs) 0;

    -webkit-overflow-scrolling: touch;

}

.location-picker-loading,

.location-picker-empty {

    text-align: center;

    padding: var(--spacing-lg) 0 var(--spacing-md);

    color: var(--legacy-text-light);

    font-size: var(--font-body);

}

.location-picker-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: var(--spacing-md) var(--spacing-lg);

    font-size: var(--font-h3);

    color: var(--hex-333333);

    cursor: pointer;

    transition: background 0.15s;

}

.location-picker-item:hover,

.location-picker-item:active { background: var(--hex-f8f8f8); }

.location-picker-item + .location-picker-item { border-top: 1px solid var(--legacy-bg); }

.location-picker-arrow {

    font-size: 12px;

    color: var(--hex-bbbbbb);

}



.location-picker-footer {

    padding: var(--spacing-sm) var(--spacing-lg);

    border-top: 1px solid var(--legacy-border);

    font-size: var(--font-small);

    color: var(--legacy-text-light);

    flex-shrink: 0;

}



/* ========== 新手引导·身份分流 ========== */

.guide-overlay {

    display: none;

    position: fixed;

    inset: 0;

    z-index: var(--z-top-nav);

    justify-content: center;

    align-items: center;

    padding: var(--spacing-base);

}

.guide-overlay.guide-visible {

    display: flex;

}



/* 温馨柔和遮罩 */

.guide-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(255,220,180,0.45);

    animation: guideFadeIn 0.25s ease;

}

@keyframes guideFadeIn { from { opacity: 0; } to { opacity: 1; } }



/* 温馨面板 */

.guide-panel {

    position: relative;

    z-index: var(--z-base, 2);

    width: 100%;

    max-width: 340px;

    background: linear-gradient(to bottom, var(--hex-fffef9) 0%, var(--hex-fff8ea) 100%);

    border-radius: var(--radius-xl);

    padding: var(--spacing-xl) var(--spacing-base);

    box-shadow: 0 12px 36px rgba(255,140,60,0.22);

    animation: guidePanelIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

}

@keyframes guidePanelIn {

    from { transform: scale(0.85); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}



.guide-close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 30px;

    height: 30px;

    border: none;

    background: var(--amber-100);

    border-radius: 50%;

    font-size: var(--font-h3);

    color: var(--hex-aa8866);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

}

.guide-close-btn:hover { background: var(--hex-ffe0b0); color: var(--hex-664422); }



/* 头部 */

.guide-header { text-align: center; margin-bottom: 18px; }

.guide-wave img {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: var(--spacing-sm);

    box-shadow: 0 4px 12px rgba(255,150,80,0.3);

}

.guide-title {

    font-size: var(--font-h2);

    font-weight: 600;

    color: var(--hex-553311);

    margin: 0 0 6px;

}

.guide-subtitle {

    font-size: 12px;

    color: var(--hex-997755);

    margin: 0;

    line-height: 1.4;

}



/* 四宫�?*/

.guide-identity-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

}

.guide-id-card {

    background: linear-gradient(to bottom, var(--hex-fff9ef) 0%, var(--hex-fff2df) 100%);

    border-radius: clamp(0.75rem, 2.5vw, 0.875rem);

    padding: clamp(0.5rem, 2vw, 0.875rem) clamp(0.5rem, 2vw, 0.625rem);

    text-align: center;

    cursor: pointer;

    transition: all 0.2s;

    border: var(--border-width) solid transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: clamp(0.25rem, 1vw, 0.3125rem);

}

.guide-id-card:hover, .guide-id-card:active {

    background: linear-gradient(to bottom, var(--hex-ffe8c0) 0%, var(--hex-ffd8a8) 100%);

    border-color: var(--legacy-orange);

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(255, 154, 60, 0.25);

}



.guide-id-icon {

    width: var(--height-btn);

    height: var(--height-btn);

    border-radius: var(--radius-lg);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: var(--font-title);

}

.guide-id-tourist { background: var(--hex-e8f4ff); color: var(--hex-1976d2); }

.guide-id-resident { background: var(--legacy-orange-light); color: var(--hex-ff8a2c); }

.guide-id-partner { background: var(--hex-f3e5ff); color: var(--purple-700); }

.guide-id-supplier { background: var(--green-50); color: var(--hex-388e3c); }



.guide-id-name {

    font-size: var(--font-small);

    font-weight: 600;

    color: var(--hex-443322);

}

.guide-id-desc {

    font-size: 9px;

    color: var(--hex-886644);

}



/* ===== 详情弹窗 ===== */

.guide-detail-overlay {

    position: fixed;

    inset: 0;

    z-index: var(--z-top-nav);

    background: rgba(0,0,0,0.65);

    display: flex;

    justify-content: center;

    align-items: center;

    padding-bottom: var(--page-padding-bottom); /* 给底部导航留出空�?*/

}

.guide-detail-sheet {

    width: 100%;

    max-width: 420px;

    max-height: 60vh;

    background: var(--bg-card);

    border-radius: 1.125rem;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    animation: gdSheetUp 0.28s ease;

}

@keyframes gdSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }



.guide-detail-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px var(--spacing-lg);

    border-bottom: 1px solid var(--hex-f0f0f0);

    flex-shrink: 0;

}

.guide-detail-title {

    font-size: var(--font-h2);

    font-weight: 700;

    color: var(--hex-443322);

}

.guide-detail-close {

    width: 30px; height: 30px;

    border: none; background: var(--legacy-bg);

    border-radius: 50%;

    font-size: var(--font-h3); color: var(--legacy-text-light);

    cursor: pointer;

    display: flex; align-items: center; justify-content: center;

}



.guide-detail-body {

    flex: 1;

    overflow-y: auto;

    padding: var(--spacing-base) var(--spacing-lg);

    -webkit-overflow-scrolling: touch;

}



/* 要点列表 */

.gd-bullets { display: flex; flex-direction: column; gap: 14px; }

.gd-bullet {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 12px;

    color: var(--hex-886644);

    line-height: 1.55;

}

.gd-bullet i {

    font-size: var(--font-body-lg);

    flex-shrink: 0;

    margin-top: 1px;

}

.gd-icon-green { color: var(--legacy-success); }

.gd-bullet b { color: var(--hex-443322); }



/* 底部按钮 */

.guide-detail-footer {

    display: flex;

    gap: 10px;

    padding: var(--spacing-md) var(--spacing-lg);

    border-top: 1px solid var(--hex-f0f0f0);

    flex-shrink: 0;

}

.gd-btn-primary, .gd-btn-outline {

    flex: 1;

    padding: 11px 0;

    border-radius: 0.625rem;

    font-size: var(--font-body);

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    transition: all 0.2s;

    cursor: pointer;

}

.gd-btn-primary {

    background: var(--primary);

    color: var(--bg-card);

    border: none;

}

.gd-btn-primary:hover { background: var(--primary-dark); }

.gd-btn-outline {

    background: var(--bg-card);

    color: var(--primary);

    border: 1.5px solid var(--primary);

}

.gd-btn-outline:hover { background: var(--primary-light); }



/* "新手引导"浮动小图标（后期复唤入口�?*/

.guide-trigger-btn {

    position: fixed;

    right: var(--spacing-md);

    top: 50%;

    width: auto;

    min-width: 64px;

    height: var(--spacing-2xl);

    border-radius: 1rem;

    background: rgba(255,255,255,0.4);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    box-shadow: 0 3px 12px rgba(0,0,0,0.12);

    border: 1px solid rgba(255,255,255,0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 var(--spacing-md);

    font-size: 12px;

    font-weight: 500;

    color: var(--hex-4fc3f7);

    cursor: pointer;

    z-index: var(--z-top-nav);

    user-select: none;

    -webkit-user-select: none;

    touch-action: manipulation;

}

.guide-trigger-btn:hover {

    box-shadow: 0 6px 20px rgba(0,0,0,0.18);

    background: rgba(255,255,255,0.6);

}

.guide-trigger-btn:active {

    box-shadow: var(--shadow-md);

}

.guide-trigger-label {

    display: none;

}

.guide-trigger-text {

    display: block;

    white-space: nowrap;

    font-size: var(--font-small);

    color: var(--hex-4fc3f7);

    font-weight: 500;

    line-height: 1.2;

    text-align: center;

    word-break: keep-all;

}

.guide-inline-btn {

    background: rgba(79,195,247,0.1);

    border: 1px solid var(--hex-4fc3f7);

    color: var(--hex-4fc3f7);

    padding: 3px var(--spacing-md);

    border-radius: 0.875rem;

    font-size: var(--font-small);

    cursor: pointer;

    transition: all 0.2s;

}

.guide-inline-btn:hover {

    background: var(--hex-4fc3f7);

    color: white;

}



/* ========== 生鲜分类页面商品图片样式 ========== */

.category-product-img,

.category-scroll-img {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--hex-e8f8fa), var(--hex-cfeef5));

}



.category-product-img img,

.category-scroll-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* ========== 生鲜预售页面商品图片样式 ========== */

.fresh-product-img,

.fresh-product-card-img {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--hex-e8f8f5), var(--green-100));

}



.fresh-product-img img,

.fresh-product-card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* ========== 购物车页面商品图片样�?========== */

.cart-item-img,

.cart-product-img {

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--legacy-bg), var(--hex-e0e0e0));

    border-radius: var(--radius-lg);

}



.cart-item-img img,

.cart-product-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    image-rendering: auto;

    -webkit-optimize-contrast: auto;

}



/* ========== V8.0 弘度设计规范 �?政务商务风体系统一 ==========

 * 风格定位：通透天空蓝 · 蓝色弥散�?· 去色收圆扁平

 * 主色：品牌蓝 var(--sky-blue-dark)（信任、专业、社区）

 * 公益红：var(--red-600)（仅用于公益强调/价格�?

 * 注意：本层仅做合理规范化，不使用!important暴力覆盖

 * ============================================================ */



/* 1. 主按�?�?品牌蓝色主色�?*/

.btn-primary, .primary-btn {

    background: var(--primary, var(--sky-blue-dark));

    color: var(--bg-card);

    border-radius: var(--radius-md);

    font-weight: 600;

    border: none;

}

.btn-primary:hover, .primary-btn:hover {

    background: var(--primary-hover, var(--v85-primary-dark));

}



/* 1a. 公益按钮变体 */

.btn-charity, .btn-charity-btn {

    background: var(--color-charity, var(--red-600));

    color: var(--bg-card);

}

.btn-charity:hover {

    background: var(--hex-c62828);

}



/* 2. 卡片统一（蓝色弥散光阴影�?*/

.card {

    border-radius: var(--radius-card, 10px);

    border: 1px solid var(--border-line);

    box-shadow: var(--shadow-md);

    background: var(--bg-card);

}



/* 3. 底部导航 �?统一规范 */

.bottom-nav, .tab-bar, .nav-bar, .footer-nav {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    display: flex;

    visibility: visible;

    opacity: 1;

    transform: none;

    justify-content: space-around;

    align-items: center;

    height: clamp(3rem, 8vw, 3.5rem);

    max-height: clamp(3rem, 8vw, 3.5rem);

    box-sizing: content-box;

    padding: 0;

    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: var(--bg-card);

    border-top: 1px solid var(--hex-e0e0e0);

    box-shadow: 0 -1px 0 rgba(0,0,0,0.05);

    z-index: var(--z-top-nav);

}

.bottom-nav .nav-item, .tab-bar .tab-item {

    display: flex;

    visibility: visible;

    opacity: 1;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1px;

    text-decoration: none;

    color: var(--gray-400);

    font-size: clamp(0.625rem, 2.5vw, 0.6875rem);

    min-width: 0;

    flex: 1;

    position: relative;

    padding: 0.25rem 0;

    height: clamp(3rem, 8vw, 3.5rem);

    box-sizing: border-box;

}

.bottom-nav .nav-item .nav-icon-wrap {

    display: flex;

    visibility: visible;

    opacity: 1;

    width: clamp(1.75rem, 7vw, 2rem);

    height: clamp(1.75rem, 7vw, 2rem);

    border-radius: 0.625rem;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.bottom-nav .nav-item .nav-icon {

    font-size: clamp(1rem, 4.5vw, 1.125rem);

    color: var(--gray-400);

    visibility: visible;

    opacity: 1;

    transition: all 0.25s ease-out;

}

.bottom-nav .nav-item .nav-label {

    display: block;

    visibility: visible;

    opacity: 1;

    font-size: clamp(0.5625rem, 2.2vw, 0.625rem);

    margin-top: 0.0625rem;

    color: inherit;

    white-space: nowrap;

    transition: all 0.25s ease-out;

}

.bottom-nav .nav-item .nav-icon--line { display: block; }

.bottom-nav .nav-item .nav-icon--fill { display: none; }

.bottom-nav .nav-item.active .nav-icon--line { display: none; }

.bottom-nav .nav-item.active .nav-icon--fill { display: block; }



.bottom-nav .nav-item.active {

    color: var(--nav-active-color, var(--v85-primary));

}

.bottom-nav .nav-item.active .nav-icon {

    color: inherit;

    transform: translateY(-1px);

    transition: all 0.2s ease-out;

}

.bottom-nav .nav-item.active .nav-label {

    font-weight: 600;

    color: inherit;

    transform: translateY(-1px);

    transition: all 0.2s ease-out;

}

/* .bottom-nav .nav-item.active::before 已删除 - 横条样式从顶部 Tab 栏误复制到此处 */
.bottom-nav .nav-item:not(.active) .nav-icon {

    color: var(--gray-500);

}

.bottom-nav .nav-item:not(.active) .nav-label {

    color: var(--gray-500);

    font-weight: 500;

    transition: all 0.25s ease-out;

}

/* tab-bar active�?�?品牌蓝高�?*/

.tab-bar .tab-item.active {

    color: var(--primary, var(--sky-blue-dark));

}

.tab-bar .tab-item.active .nav-icon {

    color: var(--primary, var(--sky-blue-dark));

}

.tab-bar .tab-item.active::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: clamp(1.25rem, 6vw, 1.5rem);

    height: 2px;

    background: var(--primary, var(--sky-blue-dark));

    border-radius: 0 0 2px 2px;

}

/* 公益tab使用各自品牌色（由JS设置�?*/



/* ============================================================

   非遗传承�?�?silver-heritage.html

   ============================================================ */

.heritage-hero-jd {

    background: linear-gradient(135deg, var(--v85-primary) 0%, var(--sky-blue) 100%);

    border-radius: var(--radius-lg);

    padding: clamp(1rem, 4vw, 1.5rem);

    color: var(--bg-card);

    box-shadow: 0 clamp(0.25rem, 1vw, 0.5rem) clamp(0.75rem, 3vw, 1.25rem) rgba(26,86,219,0.18);

    position: relative;

    overflow: hidden;

}

.heritage-hero-jd::after {

    content: '';

    position: absolute;

    right: -20%;

    top: -30%;

    width: 60%;

    height: 160%;

    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);

    pointer-events: none;

}

.hero-content-row {

    display: flex;

    align-items: center;

    gap: var(--space-3);

    margin-bottom: clamp(0.75rem, 3vw, 1rem);

    position: relative;

    z-index: var(--z-content);

}

.hero-icon-box {

    width: clamp(2.75rem, 11vw, 3.5rem);

    height: clamp(2.75rem, 11vw, 3.5rem);

    border-radius: 50%;

    background: rgba(255,255,255,0.22);

    border: 1px solid rgba(255,255,255,0.35);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(1.25rem, 5vw, 1.625rem);

    color: var(--bg-card);

    flex-shrink: 0;

}

.hero-text h2 {

    font-size: clamp(1.25rem, 5vw, 1.5rem);

    font-weight: 700;

    color: var(--bg-card);

    margin: 0 0 var(--space-1);

    line-height: 1.2;

}

.hero-text p {

    font-size: clamp(0.75rem, 2.6vw, 0.8125rem);

    color: rgba(255,255,255,0.85);

    margin: 0;

    line-height: 1.4;

}

.hero-stats-row {

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding-top: clamp(0.5rem, 2vw, 0.75rem);

    border-top: 1px solid rgba(255,255,255,0.18);

    position: relative;

    z-index: var(--z-content);

}

.hero-stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--space-1);

    flex: 1;

    color: var(--bg-card);

}

.hero-stat-item b {

    font-size: clamp(1.125rem, 4.4vw, 1.375rem);

    font-weight: 700;

    color: var(--bg-card);

    line-height: 1.2;

}

.hero-stat-item span {

    font-size: clamp(0.6875rem, 2.4vw, 0.75rem);

    color: rgba(255,255,255,0.85);

}

.hero-stat-divider {

    width: 1px;

    height: clamp(1.5rem, 6vw, 2rem);

    background: rgba(255,255,255,0.25);

}



/* 6 大非遗类目网�?*/

.heritage-grid-jd {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-2);

    background: var(--bg-card);

    border-radius: var(--radius-lg);

    padding: clamp(0.75rem, 3vw, 1rem);

    box-shadow: var(--shadow-sm);

    margin-bottom: var(--space-3);

}

.heritage-item-jd {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--space-2);

    padding: var(--space-2) var(--space-1);

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all 0.2s ease;

    text-decoration: none;

    color: var(--gray-700);

}

.heritage-item-jd:active {

    background: var(--gray-50);

    transform: scale(0.96);

}

.heritage-icon-jd {

    width: clamp(2.5rem, 10vw, 3rem);

    height: clamp(2.5rem, 10vw, 3rem);

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(1.25rem, 5vw, 1.5rem);

    color: var(--bg-card);

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

}

.heritage-icon-jd.cat-paper       { background: linear-gradient(135deg, var(--hex-2e7d32), var(--hex-66bb6a)); }

.heritage-icon-jd.cat-ceramic     { background: linear-gradient(135deg, var(--hex-1976d2), var(--hex-42a5f5)); }

.heritage-icon-jd.cat-calligraphy { background: linear-gradient(135deg, var(--hex-f57c00), var(--hex-ff9800)); }

.heritage-icon-jd.cat-embroidery  { background: linear-gradient(135deg, var(--hex-c2185b), var(--hex-ec407a)); }

.heritage-icon-jd.cat-shadow      { background: linear-gradient(135deg, var(--hex-7b1fa2), var(--hex-ab47bc)); }

.heritage-icon-jd.cat-bamboo      { background: linear-gradient(135deg, var(--hex-00897b), var(--hex-26a69a)); }

.heritage-label-jd {

    font-size: clamp(0.75rem, 2.6vw, 0.8125rem);

    font-weight: 500;

    color: var(--gray-700);

    text-align: center;

    line-height: 1.3;

}



/* 守护计划 CTA */

.heritage-cta-jd {

    display: flex;

    align-items: center;

    gap: var(--space-3);

    background: var(--bg-card);

    border-radius: var(--radius-lg);

    padding: clamp(0.75rem, 3vw, 1rem) clamp(1rem, 4vw, 1.25rem);

    box-shadow: var(--shadow-sm);

    cursor: pointer;

    transition: all 0.2s ease;

}

.heritage-cta-jd:active { transform: scale(0.99); }

.cta-icon-jd {

    width: clamp(2.25rem, 9vw, 2.75rem);

    height: clamp(2.25rem, 9vw, 2.75rem);

    border-radius: 50%;

    background: linear-gradient(135deg, var(--v85-primary), var(--sky-blue));

    color: var(--bg-card);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(1.125rem, 4.4vw, 1.375rem);

    flex-shrink: 0;

}

.cta-content { flex: 1; min-width: 0; }

.cta-content h3 {

    font-size: clamp(0.875rem, 3.2vw, 0.9375rem);

    font-weight: 600;

    color: var(--gray-900);

    margin: 0 0 var(--space-1);

}

.cta-content p {

    font-size: clamp(0.6875rem, 2.4vw, 0.75rem);

    color: var(--gray-600);

    margin: 0;

    line-height: 1.4;

}

.cta-arrow-jd {

    color: var(--gray-400);

    font-size: clamp(1.25rem, 5vw, 1.5rem);

    flex-shrink: 0;

}



/* 4. 价格�?�?公益红（克制�?*/

.price, .goods-price {

    color: var(--red-600);

    font-weight: 700;

}



/* 5. 标签/徽章圆角 */

.tag, .badge, .label {

    border-radius: 0.375rem;

}



/* 6. 输入框圆�?*/

input, textarea, select, .input, .search-input {

    border-radius: var(--radius-md);

}



/* 7. 弹窗圆角 */

.modal, .popup, .dialog {

    border-radius: var(--radius-lg);

}



/* 8. 按钮通用圆角 */

button, .btn {

    border-radius: var(--radius-md);

}



/* 9. 头像圆形 */

.avatar, [class*="avatar"] {

    border-radius: 50%;

}



/* 10. 页面内容区底部留�?*/

.main, .page-content, main, .app-container {

    padding-bottom: clamp(3.75rem, 12vw, 4.375rem);

}



/* ========== V8 集市 Emoji 占位图标规范 ========== */

.v8-emoji-lg {

    font-size: clamp(2.5rem, 12vw, 3.5rem);

    line-height: 1;

}



.v8-emoji-md {

    font-size: clamp(2rem, 10vw, 2.75rem);

    line-height: 1;

}



.v8-footer-note {

    text-align: center;

    padding: 1.25rem;

    color: var(--hex-aaaaaa);

    font-size: 0.625rem;

    line-height: 1.5;

}

.v8-footer-note a { color: var(--hex-aaaaaa); text-decoration: none; }



.v8-empty-tip {

    grid-column: 1 / -1;

    text-align: center;

    padding: 1.25rem;

    color: var(--legacy-text-light);

}



.v8-empty-tip--compact {

    padding: 0.625rem;

}



.v8-error-tip {

    grid-column: 1 / -1;

    text-align: center;

    padding: 1.25rem;

    color: var(--hex-e74c3c);

}



.v8-local-warning {

    padding: 3.75rem 1.25rem;

    text-align: center;

}



.v8-local-warning .warning-icon {

    font-size: clamp(2.5rem, 12vw, 3rem);

    margin-bottom: 1rem;

}



.v8-local-warning .warning-title {

    font-size: clamp(1rem, 4vw, 1.125rem);

    font-weight: 700;

    color: var(--hex-e74c3c);

    margin-bottom: 0.75rem;

}



.v8-local-warning .warning-text {

    font-size: clamp(0.75rem, 3vw, 0.875rem);

    color: var(--legacy-text-secondary);

    line-height: 1.8;

}



/* ========== P1：页面切换过渡（左右滑入 0.3s） ========== */

@keyframes pageEnter {

    from { opacity: 0; transform: translateX(24px); }

    to { opacity: 1; transform: translateX(0); }

}

@keyframes pageEnterReverse {

    from { opacity: 0; transform: translateX(-24px); }

    to { opacity: 1; transform: translateX(0); }

}

.main, .page-content, main {

    animation: pageEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;

}

/* 返回/上一页语义容器使用反向滑入 */

.page-enter-reverse {

    animation: pageEnterReverse 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;

}



/* ========== P1：统一悬浮/点击反馈（:active scale .96 + 0.2s） ========== */

.hd-card, .bulletin-card, .fg-card, .fg-drive-card, .fg-space-card, .fg-announce-item {

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}

.hd-card:active, .bulletin-card:active, .fg-card:active, .fg-drive-card:active, .fg-space-card:active, .fg-announce-item:active {

    transform: scale(0.96);

}