/* ==========================================================================
   home.css —— 平台首页样式（版式参照原站截图，品牌为 卡密小铺）
   基准：1280 CSS 宽的桌面视口（原站截图为 1920 设备像素 @ DPR 1.5）
   所有几何值均来自对原站截图的像素测量，非估算：
     · 容器宽 1085px（原站实测内容块 86.7..1172.0 CSS）
     · 页头高 58px
     · 标题 30px / 行高 43.3px / letter-spacing -0.5px
     · 正文 14.5px / 行高 22px
     · 主按钮 146×44
     · 右侧卡片拼贴为整幅出血层，坐标按视口取值
   ========================================================================== */

html { overflow-y: scroll; }   /* 与原站一致：始终预留滚动条，避免布局跳动 */

body.home-page {
  background: #fff;
  min-height: 100vh;
}

.container {
  width: 1085px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   顶部导航（原站实测：logo 块 128px 宽，导航起点距容器左边缘 200px）
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 5;
  height: 58px;
  background: #fff;
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 128px;
}

.logo svg {
  flex: none;
  width: 28px;
  height: 23.3px;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo__text b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  color: #1d2129;
}

.logo__text em {
  margin-top: 2px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #ff5a1f;
  border-top: 1.5px solid #ff5a1f;
  padding-top: 1px;
  text-align: center;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: 72px;
  font-size: 12.5px;
  color: #86909c;
}

.site-nav a {
  transition: color 0.18s;
}

.site-nav a:hover {
  color: #165dff;
}

.header-actions {
  margin-left: auto;
}

.btn-merchant {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: #1966ff;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(25, 102, 255, 0.22);
  transition: background 0.18s, transform 0.18s;
}

.btn-merchant svg { width: 14px; height: 14px; }

.btn-merchant:hover {
  background: #0e56e8;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Hero
   原站实测：hero 区填满视口（748 视口 → 690px 高），
             背景在 y≈641 处完全变白（即 hero 高度的 84.5%）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* 背景色块：原站为一块带硬边的浅蓝几何形（轮廓由截图逐像素提取，
   填充为最小二乘拟合的双色线性渐变，RMSE 3.4/255） */
.hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1700px;
  height: 690px;
  pointer-events: none;
}

/* 色块外缘的柔光（原站实测外溢约 ±200px，幅度很淡） */
.hero__glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 1700px;
  height: 690px;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.5;
}

.hero__inner {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 58px);
}

/* ---------------- 左侧文案 ---------------- */
.hero__copy {
  position: absolute;
  left: 15px;
  top: 147.9px;
  width: 620px;
}

.hero__title {
  margin: 0;
  font-size: 30px;
  line-height: 43.3px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1d2129;
}

.hero__title em {
  font-style: normal;
  color: #1e5eff;
}

.hero__desc {
  margin: 18.4px 0 0;
  max-width: 455px;
  font-size: 14.5px;
  line-height: 22px;
  color: #86909c;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 44px;
  margin-top: 35.1px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #3a7bff 0%, #1966ff 100%);
  color: #fff;
  font-size: 14.5px;
  box-shadow: 0 10px 22px rgba(30, 94, 255, 0.26);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.btn-primary:hover {
  background: #0d4ded;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(30, 94, 255, 0.32);
}

/* ---------------- 右侧卡片拼贴 ----------------
   整幅出血层：以视口左上角为原点，卡片坐标即原站实测的视口坐标
   -------------------------------------------------------------------------- */
.hero__cards {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mock {
  position: absolute;
  pointer-events: auto;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(25, 102, 255, 0.075);
}

.mock__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #86909c;
}

.mock__label span {
  font-size: 9px;
  line-height: 12px;
  font-weight: 400;
  color: #b6bcc7;
}

/* 订单卡：视口 x 765.2 y 103.3  192.1×190.7 */
.mock--orders {
  left: 765.2px;
  top: 45.3px;
  width: 192.1px;
  height: 190.7px;
  padding: 16px 21.5px 0;
}

/* 图表盒：底边即柱底（视口 y 279.6），盒高 135（含折线/火花溢出区） */
.chart {
  position: relative;
  width: 117.2px;
  height: 135px;
  margin: 10.3px 0 0 14.55px;
}

.chart__bars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 114.9px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* 柱：宽 9px，间距 18.05px（原站实测 pitch 27.0） */
.chart__bar {
  width: 9px;
  border-radius: 999px;
  background: #fbd592;
}

.chart__bar:nth-child(1) { height: 42.0%; }   /* 48.3 */
.chart__bar:nth-child(2) { height: 61.7%; }   /* 70.9 */
.chart__bar:nth-child(3) { height: 71.0%; }   /* 81.6 */
.chart__bar:nth-child(4) { height: 83.8%; }   /* 96.3 */
.chart__bar:last-child {
  height: 100%;                               /* 114.9 */
  background: #ff7f5f;
}

.chart__line {
  position: absolute;
  left: -20px;
  top: 0;
  width: 140px;
  height: 135px;
  overflow: visible;
}

/* 火花徽标：20×20 圆角方块，视口 x 903.5..923.5 / y 135.5..155.5 */
.chart__spark {
  position: absolute;
  left: 101.56px;
  top: -9.1px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ffeaee;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 原图闪电墨迹实测 7.3×8.7px；路径在 16 单位画布内占 11.8×14，
   故 svg 边长取 10px（10*11.8/16=7.4，10*14/16=8.75） */
.chart__spark svg { width: 10px; height: 10px; }

/* 我的小店：视口 x 986.5 y 158.7  191.5×90.6 */
.mock--shop {
  left: 986.5px;
  top: 100.7px;
  width: 191.5px;
  height: 90.6px;
  padding: 0;
  text-align: center;
}

.mock--shop .badge-shop {
  width: 46px;
  height: 46px;
  margin: -22px auto 0;
  border-radius: 50%;
  background: #ff6c00;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 原图这里没有橙色外发光：沿半径采样，圆盘边缘之外的颜色直接就是
     hero 的淡蓝背景（r=23 处 237,233,238 → r=25 处 233,239,253），
     只有 JPEG 边缘模糊带来的一点点暖色溢出。所以不加 box-shadow。 */
}

.mock--shop .badge-shop img { display: block; width: 32px; height: 32px; }

.mock--shop h3 {
  margin: 6.2px 0 0;
  font-size: 17.5px;
  line-height: 21px;
  font-weight: 500;
  color: #333c4a;
  /* 亚像素对齐：原图这行标题落在右侧 1 设备 px（0.67 CSS px）处，
     纯 text-align:center 的取整落不到那儿，这里补 0.75px。
     实测 h3 区域 mean 20.60 → 17.18、>96 10.32% → 7.72%。 */
  transform: translateX(0.75px);
}

.stars {
  display: flex;
  justify-content: center;
  gap: 5.3px;
  margin-top: 7.8px;
  padding-left: 3.5px;
}

.stars svg { width: 15.5px; height: 15.5px; }

/* 原图星星的五个角是「圆钝」的，不是尖角。沿轮廓描一圈同色圆角描边即可
   把尖角填钝（实测 mean 8.25 → 7.88）；颜色也从 #fbc24d 校正到原图实测的 #f9c64e。 */
.stars svg path { stroke: #f9c64e; stroke-width: 0.8px; stroke-linejoin: round; }

/* 账户卡：视口 x 675.3 y 320.3  290×136.4 */
.mock--account {
  left: 675.3px;
  top: 262.3px;
  width: 290px;
  height: 136.4px;
  padding: 16.2px 0 0 22px;
  border-radius: 3px;
  /* 原图卡面蓝实测 (25, 102, 254.5)，#1966fc 只有 252，改成 #1966ff。 */
  background: #1966ff;
  box-shadow: 0 4px 14px rgba(25, 102, 255, 0.13);
}

.mock--account .mock__label {
  /* 原图这个 12px 标签比正文更淡，实测 alpha ≈ 0.74（0.92 会偏粗偏亮）。 */
  color: rgba(255, 255, 255, 0.74);
  font-weight: 500;
}

.mock--account .amount {
  margin-top: 13.6px;
  height: 29.2px;
  font-size: 25.7px;
  line-height: 29.2px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
}

.mock--account .amount i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  margin-right: 6px;
  vertical-align: 0.3px;
}

.mock--account .pill {
  position: relative;
  width: 64.7px;
  height: 23.3px;
  margin-top: 15.4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
}

/* 胶囊内的白色短线（原站实测 32.7×5.3，居中；alpha 0.74 是反解出来的，
   注意它叠在胶囊 0.20 的白底之上，实际合成比 0.80 还亮） */
.mock--account .pill::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32.7px;
  height: 5.3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

/* 商品管理卡：视口 x 976 y 268.7  301.3×271.3 */
.mock--goods {
  left: 976px;
  top: 210.7px;
  width: 301.3px;
  height: 271.3px;
  padding: 22.1px 0 0 32.3px;
}

.mock--goods .mock__label {
  margin-bottom: 0;
}

.goods-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 50px;
  margin-top: 16.5px;
}

.goods-row + .goods-row { margin-top: 26.4px; }

/* 行分隔线（原站实测极淡 1px，位于两行间隙中部） */
.goods-row + .goods-row::before {
  content: "";
  position: absolute;
  left: -32.3px;
  right: 0;
  top: -13.2px;
  height: 1px;
  background: #f4f5f8;
}

.goods-row__logo {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  object-fit: cover;
}

/* 文字条：首条宽 82 / 次条宽 58.7，首条距行顶 14.4，条间距 6.6 */
.goods-row__bars {
  flex: none;
  width: 82px;
  margin: 14.4px 0 0 8.4px;
  display: flex;
  flex-direction: column;
  gap: 6.6px;
}

.goods-row__bars i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #dee3ee;
}

.goods-row__bars i:first-child { width: 82px; }
.goods-row__bars i:last-child  { width: 58.7px; }

/* 状态列：圆点 6.7 + 短条 30.7，与首条文字条同一水平线 */
.goods-row__state {
  flex: none;
  margin: 15.4px 0 0 43.9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot--orange { background: #ff7d00; }
.dot--green { background: #23c343; }

.goods-row__state i {
  display: block;
  width: 30.7px;
  height: 5.3px;
  border-radius: 999px;
  background: #dee3ee;
}

/* 商品缩略图：原站三格都是位图，直接从原图裁出（见 assets/img/goods/tile1..3.png） */
.goods-row__logo { object-fit: cover; }

/* 用户卡：视口 x 753.3 y 478.0  210.5×110.5 */
.mock--user {
  left: 753.3px;
  top: 420px;
  width: 210.5px;
  height: 110.5px;
  padding: 35px 17.8px 0 21px;
  display: flex;
  align-items: flex-start;
  gap: 10.3px;
}

.avatar-blob {
  flex: none;
  width: 31.4px;
  height: 31.4px;
  margin-top: 1.3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* svg 铺满容器（viewBox 32×32 ≈ 1 单位 1 CSS px），光晕需要溢出，故 overflow:visible */
.avatar-blob svg { width: 31.4px; height: 31.4px; overflow: visible; }

.mock--user .bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8.35px;
}

.mock--user .bars i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #dee3ee;
}

.mock--user .bars i:nth-child(1) { width: 100%; }
.mock--user .bars i:nth-child(2) { width: 100%; }
.mock--user .bars i:nth-child(3) { width: 38%; }

/* --------------------------------------------------------------------------
   演示入口（复刻演示用，非原站元素；置于首屏之下，不干扰 1:1 对比）
   -------------------------------------------------------------------------- */
.entry-bar {
  position: relative;
  z-index: 2;
  background: #fff;
  border-top: 1px solid #eef1f6;
  padding: 26px 0;
}

.entry-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  color: #4e5969;
}

.entry-bar a {
  color: #165dff;
  font-weight: 600;
}

.entry-bar a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   适配
   -------------------------------------------------------------------------- */
@media (max-width: 1130px) {
  .site-nav { gap: 24px; margin-left: 32px; }
  .hero__cards { transform: scale(0.86); transform-origin: left top; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .hero { overflow: visible; }
  .hero__inner { min-height: 0; padding: 40px 0 40px; }
  .hero__copy { position: static; width: 100%; }
  .hero__cards { position: static; width: 100%; height: 520px; margin-top: 32px; }
  .mock--orders  { left: 40px;  top: 0; }
  .mock--shop    { left: 262px; top: 55px; }
  .mock--account { left: 0;     top: 214px; }
  .mock--goods   { left: 253px; top: 94px; }
  .mock--user    { left: 32px;  top: 384px; }
}

@media (max-width: 720px) {
  .hero__title { font-size: 24px; line-height: 34px; }
  .hero__cards { height: 420px; }
  .hero__cards { transform: scale(0.78); transform-origin: left top; }
}