/* ============================================================
 * base.css - 基础布局/排版(移动端)
 * 文档依据: 02-手机端功能模块页面设计.md 4.3-4.5
 * ============================================================ */
.page {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  max-width: 480px; margin: 0 auto;
  background: var(--color-bg-page);
}
@media (min-width: 769px) {
  .page { box-shadow: 0 0 24px rgba(0,0,0,0.08); }
}
.page-header {
  flex-shrink: 0;
  background: var(--color-bg-card);
  padding-top: var(--safe-top);
  position: sticky; top: 0; z-index: 90;
}
.page-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}
.page-footer { flex-shrink: 0; }

/* 导航栏 */
.navbar {
  display: flex; align-items: center; height: 44px;
  padding: 0 var(--space-md); gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}
.navbar-title {
  flex: 1; text-align: center;
  font-size: var(--font-size-subtitle); font-weight: var(--font-weight-bold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbar .nav-back, .navbar .nav-action {
  min-width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--color-text-regular);
}

/* 底部固定提交栏 */
.fixed-submit-bar {
  position: sticky; bottom: 0; z-index: 90;
  background: var(--color-bg-card);
  padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) + var(--safe-bottom));
  box-shadow: var(--shadow-tabbar);
  display: flex; gap: var(--space-sm);
}

/* 通用工具类 */
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-secondary { color: var(--color-text-secondary); }
.text-primary { color: var(--color-primary); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-caption { font-size: var(--font-size-caption); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* 金额 */
.amount { font-weight: var(--font-weight-bold); }
.amount-lg { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); }

/* 状态标签 */
.tag {
  display: inline-block; padding: 2px 10px;
  font-size: var(--font-size-caption); line-height: 1.6;
  border-radius: var(--radius-pill);
}
.tag-success { color: var(--color-success); background: var(--color-primary-bg); }
.tag-warning { color: var(--color-warning); background: var(--color-secondary-bg); }
.tag-danger  { color: var(--color-danger); background: #FDEBEA; }
.tag-info    { color: var(--color-info); background: #E8F1FE; }
.tag-default { color: var(--color-text-secondary); background: #F2F2F2; }
.tag-outline { color: var(--color-primary); border: 1px solid var(--color-primary); background: transparent; }

/* 进度条 */
.progress { height: 8px; background: var(--color-border-light); border-radius: var(--radius-pill); overflow: hidden; }
.progress-inner { height: 100%; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); border-radius: var(--radius-pill); }

/* 时间轴 */
.timeline { padding: var(--space-md) var(--space-lg); }
.timeline-item { display: flex; gap: var(--space-md); padding-bottom: var(--space-lg); position: relative; }
.timeline-item::before {
  content: ''; position: absolute; left: 4px; top: 14px; bottom: 0;
  width: 2px; background: var(--color-border);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-text-disabled); margin-top: 4px; position: relative; z-index: 1;
}
.timeline-item.done .timeline-dot { background: var(--color-primary); }
.timeline-item.active .timeline-dot { background: var(--color-secondary); }
.timeline-title { font-size: var(--font-size-body); color: var(--color-text-primary); }
.timeline-time { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.timeline-item.done .timeline-title { color: var(--color-primary); }

/* 区块标题(列表页/详情页通用) */
.section-title { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-subtitle); font-weight: var(--font-weight-bold); margin: 16px 16px 10px; }
.section-title .line { flex: 1; height: 1px; background: var(--color-border-light); }
.section-title a { font-size: var(--font-size-caption); color: var(--color-text-secondary); font-weight: 400; }

/* 图片占位 */
.img-placeholder {
  background: linear-gradient(135deg, #E8F5EE 0%, #F5F6F8 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-light); font-size: 28px;
}

/* 发布原料入口卡(供应商端首页/商品页) */
.publish-entry {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  margin: 0 var(--space-lg) var(--space-md); height: 50px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-inverse); border-radius: var(--radius-lg);
  font-size: var(--font-size-subtitle); font-weight: var(--font-weight-bold);
  box-shadow: 0 4px 12px rgba(26,138,91,.28); cursor: pointer;
}
.publish-entry:active { opacity: .85; }
.publish-entry i { font-size: 18px; }

/* 认证状态卡(实名/资质提交后展示) */
.auth-status {
  display: none; margin: 12px 16px; padding: 24px 16px;
  background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  text-align: center;
}
.auth-status.show { display: block; }
.auth-status .status-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.auth-status .status-title { font-size: var(--font-size-subtitle); font-weight: var(--font-weight-bold); }
.auth-status .status-desc { font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 6px; line-height: 1.6; }
.auth-status .status-remark {
  display: inline-block; margin-top: 10px; padding: 6px 14px;
  font-size: var(--font-size-caption); color: var(--color-danger);
  background: #FDEBEA; border-radius: var(--radius-pill);
}
.auth-status .status-actions { margin-top: 14px; }
.auth-status.pending .status-icon { background: var(--color-secondary-bg); color: var(--color-secondary); }
.auth-status.approved .status-icon { background: var(--color-primary-bg); color: var(--color-primary); }
.auth-status.rejected .status-icon { background: #FDEBEA; color: var(--color-danger); }

/* 「我的」页资金总览卡(余额/担保金/冻结金) */
.fund-card {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 12px 16px 0; background: var(--color-bg-card);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden;
  cursor: pointer;
}
.fund-item { text-align: center; padding: 14px 6px; position: relative; }
.fund-item + .fund-item::before { content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--color-divider); }
.fund-item .label { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.fund-item .amount { display: block; margin-top: 6px; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); }
.fund-item .amount.escrow { color: var(--color-secondary); }
.fund-item .amount.frozen { color: var(--color-danger); }
.fund-item .label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.fund-item .label .dot.balance { background: var(--color-primary); }
.fund-item .label .dot.escrow { background: var(--color-secondary); }
.fund-item .label .dot.frozen { background: var(--color-danger); }