/* 桂农易通 农户首页 1:1 还原（基于 Figma 65:5095 新版设计稿 + 渲染图修正） */

:root {
  --c-primary: #16A34A;
  --c-primary-deep: #15803D;
  --c-lime: #BEF264;
  --c-bg: #EBF2FC;
  --c-white: #FFFFFF;
  --c-text: #111827;
  --c-text-sub: #6B7280;
  --c-green-50: #F0FDF4;
  --c-border: #E5E7EB;
  /* 状态色（对应 DESIGN.md 语义 Token：Fill.Status.*） */
  --c-info: #3B82F6;          /* Colors.Blue.500（Info.Default） */
  --c-info-soft: #93C5FD;     /* Colors.Blue.300 */
  --c-warning: #F97316;       /* Colors.Orange.500（Warning.Default） */
  --c-warning-soft: #FDBA74;  /* Colors.Orange.300 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { text-decoration: none; color: inherit; }

/* ---------- 绿色渐变头图区（状态栏 + 导航 + 本月统计 + 插画） ---------- */
.hero-zone {
  position: relative;
  width: 100%;
  height: 320px;
  background: url("../assets/images/bg-head.png") no-repeat center top / 100% 100%;
}
.hero-zone__inner {
  position: relative;
  height: 100%;
  padding: 0 16px;
}
/* 3D 插画横幅：内容位于图像右半幅，置于绿色头部下半部 */
.illus {
  position: absolute;
  left: 0;
  top: 90px;
  width: 375px;
  pointer-events: none;
}

/* 顶栏 */
.topbar__statusbar { height: 25px; }
.topbar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 16px;
}
.topbar__logo-wrap {
  display: flex;
  align-items: center;
}
.topbar__logo { width: 98px; height: 40px; }
.topbar__tag {
  margin-left: 9px;
  height: 20px;
  padding: 0 8px 1px;
  display: flex;
  align-items: center;
  background: var(--c-green-50);
  border-radius: 4px;
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 330;
  line-height: 1.326;
}
.topbar__wechat {
  width: 76px;
  height: 26px;
}
.topbar__wechat-icon {
  width: 76px;
  height: 26px;
}

/* 本月统计（白色文字 + 黄绿胶囊） */
.stat {
  margin-top: 38px;
  padding-left: 16px;
}
.stat__label {
  font-size: 14px;
  color: var(--c-white);
  opacity: 0.95;
}
.stat__unit {
  font-size: 12px;
  margin-left: 2px;
}
.stat__value {
  font-size: 48px;
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.1;
  margin-top: 2px;
  letter-spacing: 1px;
}
.stat__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding: 5px 14px;
  background: var(--c-lime);
  border-radius: 9999px;
  font-size: 14px;
  color: var(--c-text);
}
.stat__pill strong {
  font-size: 18px;
  font-weight: 700;
}

/* ---------- 页面主体（桂农码大卡上压住绿色头部底部） ---------- */
.page {
  position: relative;
  width: 100%;
  margin: -48px auto 0;
  padding: 0 8px 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- 桂农码大卡 ---------- */
.qr-card {
  background: var(--c-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
/* 顶部深绿账户条（Figma 306:12081：#15803D，上圆角 16，白色弧形边角） */
.qr-card__user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 24px;
  background: var(--c-primary-deep);
}
.qr-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.qr-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qr-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qr-card__name {
  font-size: 20px;
  font-weight: 630;
  line-height: 1.326;
  color: var(--c-white);
}
/* 管理员徽章：与名字同行、置于账户条右上角（Figma 306:12086） */
.qr-card__badge {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 1px 4px 1px 14px;
  background: var(--c-primary);
  border-radius: 0 4px 4px 0;
  font-size: 10px;
  font-weight: 330;
  line-height: 1.326;
  color: var(--c-white);
}
.qr-card__badge-icon {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-5.5px);
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.qr-card__phone {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
/* 白色弧形边角（绿色条与白底交界装饰） */
.qr-card__corner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* 白底主体（Figma 885:17763：下圆角 16，内边距 16） */
.qr-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--c-white);
}

/* 创建订单（Figma 885:17764：浅绿底、圆角 8、上下内边距 8、左右 16） */
.create-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  background: var(--c-green-50);
  border-radius: 8px;
}
.create-order__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.create-order__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.326;
  color: var(--c-text);
}
.create-order__sub {
  font-size: 14px;
  font-weight: 330;
  line-height: 1.326;
  color: var(--c-text);
}
.create-order__scan {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

/* 功能入口（自产自销证明 / 附近的收购点） */
.func-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 8px 0;
}
.func-row__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.func-row__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
/* 自产自销证明：蓝色文件图标（内联 SVG，颜色走语义 Token，不硬编码在 SVG 内） */
.func-file__fold { fill: var(--c-info-soft); }
.func-file__body { fill: var(--c-info); }
/* 附近的收购点：橙色商店图标 */
.func-store__awning { fill: var(--c-warning-soft); }
.func-store__body { fill: var(--c-warning); }
.func-row__item span {
  font-size: 14px;
  font-weight: 330;
  line-height: 1.326;
  color: var(--c-text);
  white-space: nowrap;
}
.func-row__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(16, 18, 21, 0.1);
}

/* ---------- 市场行情（Figma 884:17507：白底、圆角 8、内边距 16） ---------- */
.market {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--c-white);
  border-radius: 8px;
}
.market__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.market__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.326;
  color: var(--c-text);
}
.market__unit {
  font-size: 12px;
  font-weight: 330;
  color: var(--c-text-sub);
  white-space: nowrap;
}
/* 分段控件：浅绿容器 + 选中绿色胶囊（选中白字，未选中绿字） */
.market__tabs {
  display: flex;
  gap: 8px;
  padding: 3px;
  background: var(--c-green-50);
  border-radius: 20px;
}
.market__tab {
  flex: 1;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 330;
  color: var(--c-primary);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.market__tab--active {
  background: var(--c-primary);
  color: var(--c-white);
}
/* 表格 */
.market__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
}
.market__th {
  padding: 0 10px 4px;
  font-size: 14px;
  font-weight: 330;
  line-height: 1.326;
  color: var(--c-text);
  text-align: left;
  white-space: nowrap;
}
.market__th--time { width: 33%; }
.market__th--region { width: 34%; }
.market__th--price { width: 33%; text-align: right; }
.market__row td {
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 330;
  line-height: 1.326;
  color: var(--c-text);
  white-space: nowrap;
}
.market__row--hl td {
  background: var(--c-green-50);
}
.market__row td:first-child {
  border-radius: 8px 0 0 8px;
}
.market__row td:last-child {
  border-radius: 0 8px 8px 0;
}
.market__region {
  text-align: left;
}
.market__price {
  text-align: right;
}
.market__price-sym {
  font-size: 12px;
  font-weight: 330;
  color: var(--c-primary);
}
.market__price-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
}

/* ---------- 授权条（Figma 231:9723） ---------- */
.auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--c-white);
  border-radius: 8px;
}
.auth__text {
  flex: 1;
  font-size: 14px;
  font-weight: 330;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth__btn {
  flex-shrink: 0;
  padding: 4px 8px;
  background: var(--c-primary);
  border-radius: 4px;
  color: var(--c-white);
  font-size: 12px;
  font-weight: 330;
}

/* ---------- 底栏（Figma 539:41208 精确还原：5 项，含中间凸起"亮码卖货"主按钮）
   高度 81px = 上内边距 8 + 内容 57 + 下内边距 16；项间距 15px；标签 中文/中文小号文本 14px */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 8px 8px 16px;
  background: #FFFFFF;
  backdrop-filter: blur(20px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  color: rgba(16, 18, 21, 0.5);
}
/* 选中态选项背景块（Figma 539:41164 选项背景 60×57 圆角10 + 毛玻璃） */
.tabbar__item--active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 57px;
  background: transparent;
  border-radius: 10px;
  backdrop-filter: blur(20px);
  z-index: 0;
}
.tabbar__item--active {
  color: var(--c-primary);
}
/* 图标 24×24，位于 32×32 图标区内（Figma 图标框 32×32、图标 24 居中） */
.tabbar__icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  margin: 4px 0;
  color: inherit;
  fill: currentColor;
  stroke: none;
}
/* 标签：14px；未选中 #6B7280，选中 #16A34A（与图标色分离） */
.tabbar__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  font-size: 14px;
  font-weight: 330;
  line-height: 1.326;
  color: #6B7280;
  text-align: center;
}
.tabbar__item--active .tabbar__label {
  color: var(--c-primary);
}
/* 中间"亮码卖货"主按钮：绿色圆形 60×60 + 4px 白描边 + 白色二维码 28×28，凸出底栏顶部 15px */
.tabbar__item--main {
  justify-content: flex-end;
}
.tabbar__main-btn {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--c-primary);
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  z-index: 1;
}
.tabbar__main-icon {
  width: 28px;
  height: 28px;
}

@media (min-width: 768px) {
  .hero-zone { margin: 0 auto; }
}