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

 *  V8.5 弘度生活 — 盒马清新型视觉设计系统

 *  风格：天空蓝渐变 · 明亮清爽 · 真实摄影感

 *  兼容：在 V8.0 variables.css 基础上增量扩展（v85- 前缀）

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



/* V8.5 依赖 V8.0 基础设计 Token（页面内联 CSS 变量层叠兼容） */

@import url('variables.css');



:root {

  /* ====== V8.5 色彩系统（盒马清新方向） ====== */

  

  /*

   * 主色冲突说明（P0-V-007）：

   * V8.0 主色 --v85-primary: var(--v85-primary)（政务商务蓝）

   * V8.5 主色 --v85-primary: var(v85-primary)（盒马清新青）

   * 两者为不同设计系统的主题色，故意不同，非错误。

   * 页面应只使用其中一套系统，禁止混用。

   */



  /* 主色 — 清新青（替代原 var(--v85-primary) 深蓝） */

  --v85-primary: #0891B2;

  --v85-primary-rgb: 8, 145, 178;

  --v85-primary-dark: #0E7490;

  --v85-primary-light: #CFFAFE;

  --v85-primary-50: #ECFEFF;

  --v85-primary-100: #CFFAFE;

  --v85-primary-200: #A5F3FC;

  --v85-primary-400: #22D3EE;

  --v85-primary-500: #06B6D4;

  --v85-primary-600: #0891B2;

  --v85-primary-700: #0E7490;

  --v85-primary-800: #155E75;

  --v85-primary-900: #164E63;



  /* CTA 暖橙（购买/行动按钮） */

  --v85-cta: #F97316;

  --v85-cta-rgb: 249, 115, 22;

  --v85-cta-dark: #EA580C;

  --v85-cta-light: var(--orange-50);



  /* 正向行动绿 */

  --v85-success: var(--hex-22c55e);

  --v85-success-rgb: 34, 197, 94;

  --v85-success-light: #F0FDF4;



  /* 公益暖红 */

  --v85-charity: var(--red-600);

  --v85-charity-rgb: 220, 38, 38;

  --v85-charity-dark: var(--red-700);

  --v85-charity-light: var(--color-charity-light);



  /* 背景系统 */

  --v85-bg-page: #F8FAFB;

  --v85-bg-card: #FFFFFF;

  --v85-bg-sky-top: #E0F2FE;     /* 天空蓝顶部 */

  --v85-bg-sky-mid: #F0F9FF;     /* 天空蓝中部 */

  --v85-bg-warm: #FFFBEB;        /* 暖色背景 */



  /* 文字色阶 */

  --v85-text-primary: #1E293B;    /* slate-900 主文字 */

  --v85-text-secondary: #64748B;   /* slate-500 次要文字 */

  --v85-text-tertiary: #94A3B8;    /* slate-400 辅助文字 */

  --v85-text-placeholder: #CBD5E1;  /* slate-300 占位符 */

  --v85-text-price: var(--red-600);       /* 价格红 */

  --v85-text-on-primary: #FFFFFF;  /* 深色背景上的白字 */



  /* ====== 圆角升级（现代圆润感） ====== */

  --v85-radius-xs: 0.375rem;       /* 6px - 小元素 badge/tag */

  --v85-radius-sm: 0.5rem;         /* 8px - 按钮/输入框 */

  --v85-radius-md: 0.75rem;        /* 12px - 卡片标准 */

  --v85-radius-lg: 1rem;           /* 16px - 大卡片/Modal */

  --v85-radius-xl: 1.25rem;        /* 20px - 特大卡片 */

  --v85-radius-pill: 9999px;       /* 胶囊形 */

  --v85-radius-full: 50%;          /* 圆形头像/图标容器 */



  /* ====== 柔和弥散阴影（青色调） ====== */

  --v85-shadow-xs: 0 1px 2px rgba(8, 145, 178, 0.04);

  --v85-shadow-sm: 0 1px 3px rgba(8, 145, 178, 0.06), 0 1px 2px rgba(8, 145, 178, 0.04);

  --v85-shadow-md: 0 4px 12px rgba(8, 145, 178, 0.08), 0 1px 3px rgba(8, 145, 178, 0.04);

  --v85-shadow-lg: 0 8px 24px rgba(8, 145, 178, 0.12), 0 2px 6px rgba(8, 145, 178, 0.06);

  --v85-shadow-xl: 0 16px 48px rgba(8, 145, 178, 0.16), 0 4px 12px rgba(8, 145, 178, 0.08);

  --v85-shadow-float: 0 20px 60px rgba(8, 145, 178, 0.18), 0 8px 20px rgba(8, 145, 178, 0.10);



  /* CTA 橙色按钮阴影 */

  --v85-shadow-cta: 0 4px 14px rgba(249, 115, 22, 0.35), 0 2px 4px rgba(249, 115, 22, 0.15);

  /* 公益红色按钮阴影 */

  --v85-shadow-charity: 0 4px 14px rgba(220, 38, 38, 0.30), 0 2px 4px rgba(220, 38, 38, 0.12);



  /* ====== 渐变库（V8.5 新增） ====== */

  /* 首页 Header — 天空蓝渐变（带云朵通透感） */

  --v85-gradient-header: linear-gradient(

    180deg,

    var(--v85-bg-sky-top) 0%,

    var(--v85-primary-200) 30%,

    var(--v85-bg-sky-mid) 70%,

    var(--v85-bg-page) 100%

  );



  /* 公益页 Banner — 暖红渐变 */

  --v85-gradient-charity-banner: linear-gradient(

    135deg,

    var(--v85-charity) 0%,

    var(--red-500) 50%,

    var(--red-300) 100%

  );



  /* 我的页 Header — 天空蓝渐变 */

  --v85-gradient-my-header: linear-gradient(

    180deg,

    var(--v85-primary-200) 0%,

    var(--v85-bg-sky-mid) 40%,

    var(--v85-bg-page) 100%

  );



  /* CTA 按钮渐变 — 暖橙 */

  --v85-gradient-cta: linear-gradient(135deg, #FB923C 0%, var(--v85-cta) 100%);



  /* 正向行动渐变 — 绿色 */

  --v85-gradient-success: linear-gradient(135deg, #4ADE80 0%, var(--v85-success) 100%);



  /* 金色会员渐变 */

  --v85-gradient-gold: linear-gradient(135deg, #FDE68A 0%, var(--amber-400) 50%, var(--amber-500) 100%);



  /* 云朵装饰渐变（用于 header 装饰） */

  --v85-cloud-shape: radial-gradient(

    ellipse 120px 60px at 20% 30%,

    rgba(255, 255, 255, 0.7) 0%,

    transparent 70%

  ),

  radial-gradient(

    ellipse 80px 40px at 75% 45%,

      rgba(255, 255, 255, 0.5) 0%,

      transparent 70%

    ),

    radial-gradient(

      ellipse 150px 70px at 50% 65%,

      rgba(255, 255, 255, 0.35) 0%,

      transparent 70%

    );



  /* ====== 排版系统（响应式 clamp） ====== */

  --v85-font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --v85-font-heading: 'Rubik', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;



  --v85-text-xs: clamp(0.6875rem, 1.5vw, 0.75rem);    /* 11-12px */

  --v85-text-sm: clamp(0.75rem, 1.6vw, 0.875rem);    /* 12-14px */

  --v85-text-base: clamp(0.875rem, 1.8vw, 1rem);     /* 14-16px */

  --v85-text-lg: clamp(1rem, 2vw, 1.125rem);          /* 16-18px */

  --v85-text-xl: clamp(1.125rem, 2.5vw, 1.375rem);    /* 18-22px */

  --v85-text-2xl: clamp(1.25rem, 3vw, 1.375rem);       /* 20-22px */

  --v85-text-hero: clamp(1.5rem, 4vw, 1.5rem);         /* 24px */



  --v85-price: clamp(1.125rem, 2.5vw, 1.375rem);      /* 18-22px bold */

  --v85-price-large: clamp(1.5rem, 3.5vw, 2rem);       /* 24-32px bold */



  --v85-line-height-tight: 1.25;

  --v85-line-height-normal: 1.55;

  --v85-line-height-relaxed: 1.75;



  /* 字重 */

  --v85-weight-normal: 400;

  --v85-weight-medium: 500;

  --v85-weight-semibold: 600;

  --v85-weight-bold: 700;



  /* ====== 动效系统 ====== */

  --v85-duration-fast: 150ms;

  --v85-duration-normal: 250ms;

  --v85-duration-slow: 350ms;

  --v85-duration-slower: 500ms;



  --v85-ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --v85-ease-in: cubic-bezier(0.4, 0, 1, 1);

  --v85-ease-out: cubic-bezier(0, 0, 0.2, 1);

  --v85-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --v85-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);



  --v85-transition-base: all var(--v85-duration-normal) var(--v85-ease-default);

  --v85-transition-fast: all var(--v85-duration-fast) var(--v85-ease-default);

  --v85-transition-colors: color var(--v85-duration-fast) var(--v85-ease-default),

                       background-color var(--v85-duration-fast) var(--v85-ease-default),

                       border-color var(--v85-duration-fast) var(--v85-ease-default);



  /* ====== Z-Index 层级系统（V8.5 扩展） ====== */

  --v85-z-base: 0;

  --v85-z-card: 10;

  --v85-z-sticky: 100;

  --v85-z-nav: 200;

  --v85-z-overlay: 300;

  --v85-z-modal: 400;

  --v85-z-toast: 500;

  --v85-z-float-btn: 600;

  --v85-z-drawer: 350;

  --v85-z-popover: 320;

  --v85-z-tooltip: 310;

  --v85-z-filter-bar: 95;



  /* ====== 安全区域 ====== */

  --v85-safe-top: env(safe-area-inset-top, 0px);

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

  --v85-safe-left: env(safe-area-inset-left, 0px);

  --v85-safe-right: env(safe-area-inset-right, 0px);

  --v85-nav-height: 3.5rem;

  --v85-page-bottom: calc(var(--v85-safe-bottom) + var(--v85-nav-height));



  /* ====== 间距系统（rem 单位） ====== */

  --v85-space-xs: 0.25rem;   /* 4px */

  --v85-space-sm: 0.5rem;    /* 8px */

  --v85-space-md: 0.75rem;   /* 12px */

  --v85-space-lg: 1rem;      /* 16px */

  --v85-space-xl: 1.5rem;    /* 24px */

  --v85-space-2xl: 2rem;     /* 32px */

  --v85-space-3xl: 3rem;     /* 48px */



  /* ====== 金刚区图标色阶（V8.5 鲜活版） ====== */

  /* 生鲜食材 */

  --v85-kk-fresh: #E11D48;           --v85-kk-fresh-bg: #FFE4E8;

  /* 日用百货 */

  --v85-kk-daily: #7C3AED;           --v85-kk-daily-bg: #EDE9FE;

  /* 粮油米面 */

  --v85-kk-grain: var(--amber-500);           --v85-kk-grain-bg: #FFFBEB;

  /* 方便速食 */

  --v85-kk-snack: #EA580C;           --v85-kk-snack-bg: var(--orange-50);

  /* 宠物用品 */

  --v85-kk-pet: #DB2777;             --v85-kk-pet-bg: #FDF2F8;

  /* 潮玩手办 */

  --v85-kk-toy: #9333EA;            --v85-kk-toy-bg: #FAF5FF;

  /* 鲜花园艺 */

  --v85-kk-garden: var(--color-health);          --v85-kk-garden-bg: var(--color-health-light);

  /* 自有品牌 */

  --v85-kk-brand: var(--blue-700);           --v85-kk-brand-bg: var(--v85-primary-light);

  /* 时令鲜品 */

  --v85-kk-seasonal: var(--green-600);        --v85-kk-seasonal-bg: #F0FDF4;

  /* 地方特产 */

  --v85-kk-local: #B45309;           --v85-kk-local-bg: #FFFbeb;

  /* 零食酒水 */

  --v85-kk-snack-drink: #E11D48;     --v85-kk-snack-drink-bg: #FFF1F2;

  /* 家清个护 */

  --v85-kk-household: #0369A1;       --v85-kk-household-bg: #E0F2FE;

  /* 营养食谱 */

  --v85-kk-nutrition: #0891B2;       --v85-kk-nutrition-bg: #ECFEFF;

  /* 儿童营养 */

  --v85-kk-child-nutri: var(--teal-600);     --v85-kk-child-nutri-bg: #F0FDFA;

  /* 糖友专区 */

  --v85-kk-diabetes: #BE185D;        --v85-kk-diabetes-bg: #FDF2F8;

  /* 胃养护 */

  --v85-kk-stomach: #65A30D;         --v85-kk-stomach-bg: #F7FEE7;

  /* 孕产专区 */

  --v85-kk-pregnant: #C2410C;        --v85-kk-pregnant-bg: var(--orange-50);

  /* 肌力提升 */

  --v85-kk-muscle: var(--blue-800);          --v85-kk-muscle-bg: var(--v85-primary-light);

  /* 乡村认养 */

  --v85-kk-adoption: var(--green-700);        --v85-kk-adoption-bg: #F0FDF4;

  /* 公益捐赠 */

  --v85-kk-charity: var(--red-600);         --v85-kk-charity-bg: var(--color-charity-light);

  /* 邻里互助 */

  --v85-kk-help: #7C3AED;            --v85-kk-help-bg: #F5F3FF;

  /* 社区团购 */

  --v85-kk-group-buy: var(--color-health);       --v85-kk-group-buy-bg: var(--color-health-light);

  /* 非遗传承 */

  --v85-kk-heritage: #B45309;        --v85-kk-heritage-bg: #FFFBEB;

  /* 兑换商城/抢 */

  --v85-kk-exchange: #E11D48;         --v85-kk-exchange-bg: #FFF1F2;

  /* 公益盲盒 */

  --v85-kk-blindbox: #9333EA;        --v85-kk-blindbox-bg: #FAF5FF;

  /* AI短视频 */

  --v85-kk-aivideo: var(--blue-700);         --v85-kk-aivideo-bg: var(--v85-primary-light);

  /* 就业服务 */

  --v85-kk-job: var(--amber-500);             --v85-kk-job-bg: #FFFBEB;

  /* 技能实训 */

  --v85-kk-train: #0891B2;           --v85-kk-train-bg: #ECFEFF;

  /* 环保回收 */

  --v85-kk-recycle: var(--green-600);         --v85-kk-recycle-bg: #F0FDF4;

  /* 招商加盟 */

  --v85-kk-franchise: #7C3AED;       --v85-kk-franchise-bg: #F5F3FF;

  /* 弘度小镇 */

  --v85-kk-town: #0369A1;            --v85-kk-town-bg: #E0F2FE;

}



/* ====== 全局工具类 ====== */



/* 页面主题类 */

.v85-theme {

  font-family: var(--v85-font-family);

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

  background-color: var(--v85-bg-page);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  scroll-behavior: smooth;

  overscroll-behavior-y: contain;

}



/* 卡片基础样式 */

.v85-card {

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

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

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

  transition: var(--v85-transition-base);

}

.v85-card:hover {

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

  transform: translateY(-0.125rem);

}

.v85-card:active {

  transform: translateY(0);

  box-shadow: var(--v85-shadow-xs);

}



/* 按钮基础 */

.v85-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--v85-space-sm);

  padding: 0.625rem 1.25rem;

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

  font-family: var(--v85-font-family);

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

  font-weight: var(--v85-weight-semibold);

  cursor: pointer;

  border: none;

  transition: var(--v85-transition-base);

  -webkit-tap-highlight-color: transparent;

  min-height: 2.75rem;  /* 44px touch target */

  min-width: 2.75rem;

}

.v85-btn-primary {

  background: var(--v85-gradient-cta);

  color: var(--v85-text-on-primary, var(--v85-bg-card));

  box-shadow: var(--v85-shadow-cta);

}

.v85-btn-primary:hover {

  filter: brightness(1.05);

  box-shadow: var(--v85-shadow-cta), 0 0 0 4px rgba(249, 115, 22, 0.12);

}

.v85-btn-primary:active {

  filter: brightness(0.96);

  transform: scale(0.98);

}

.v85-btn-charity {

  background: var(--v85-gradient-charity-banner);

  color: var(--v85-text-on-primary, var(--v85-bg-card));

  box-shadow: var(--v85-shadow-charity);

}

.v85-btn-outline {

  background: transparent;

  border: 1.5px solid var(--v85-border-color, var(--border-line));

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

}

.v85-btn-outline:hover {

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

  color: var(--v85-primary);

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

}

.v85-btn-pill {

  border-radius: var(--v85-radius-pill);

  padding-left: 1.25rem;

  padding-right: 1.25rem;

}



/* 图片占位（开发期可见） */

.v85-img-placeholder {

  background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--legacy-border) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--v85-text-tertiary);

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

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

  min-height: 6rem;

}



/* 响应式隐藏 */

@media (max-width: 374px) { .v85-hide-xs { display: none !important; } }

@media (max-width: 479px) { .v85-hide-sm { display: none !important; } }

@media (min-width: 769px) { .v85-show-md { display: block !important; } }

@media (min-width: 1025px) { .v85-show-lg { display: block !important; } }



/* ====== 动画关键帧 ====== */

@keyframes v85-fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

@keyframes v85-slideUp {

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

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

}

@keyframes v85-scaleIn {

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

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

}

@keyframes v85-shimmer {

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

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

}

@keyframes v85-pulse-soft {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.7; }

}



/* 骨架屏 loading */

.v85-skeleton {

  background: linear-gradient(

    90deg,

    var(--bg-subtle) 25%,

    var(--legacy-border) 37%,

    var(--bg-subtle) 63%

  );

  background-size: 200% 100%;

  animation: v85-shimmer 1.5s ease infinite;

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

}



/* 可点击元素统一 */

[onclick], [data-href], a, button, .clickable, label[for] {

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

}



/* 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

  html { scroll-behavior: auto; }

}