/* ============ 全局基础 ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #f0f2f5;
  color: #303133;
  font-size: 14px;
}
#app { height: 100%; }

/* ============ 登录页 ============ */
.login-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
}
.login-card {
  width: 880px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  display: flex;
  min-height: 480px;
}
.login-left {
  width: 42%;
  background: linear-gradient(160deg, #1d3557, #2a9d8f);
  color: #fff;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-left h1 { font-size: 26px; margin: 0 0 10px; }
.login-left p { font-size: 13px; line-height: 1.9; opacity: .92; margin: 4px 0; }
.login-right { flex: 1; padding: 36px 40px; }
.login-tabs { margin-bottom: 18px; }
.login-role-tip {
  font-size: 12px; color: #909399; margin-bottom: 12px;
  padding: 8px 12px; background: #f4f4f5; border-radius: 6px; line-height: 1.6;
}
.login-quick { margin-top: 16px; font-size: 12px; color: #909399; }
.login-quick .el-button { margin: 6px 6px 0 0; }
.login-footer { margin-top: 20px; text-align: center; font-size: 12px; color: #c0c4cc; line-height: 1.9; }
.login-contact span { margin-right: 10px; white-space: nowrap; }
.login-beian { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 12px; }
.login-beian a { color: #c0c4cc; text-decoration: none; }
.login-beian a:hover { color: #409eff; }

/* ============ 后台布局 ============ */
.app-shell { height: 100%; display: flex; flex-direction: column; }
.app-header {
  height: 56px; background: #fff; border-bottom: 1px solid #e4e7ed;
  display: flex; align-items: center; padding: 0 18px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08); z-index: 10;
}
.app-header .logo { font-size: 18px; font-weight: 700; color: #1d3557; }
.app-header .logo .sub { font-size: 12px; font-weight: 400; color: #909399; margin-left: 8px; }
.app-header .header-nav { display: flex; align-items: center; gap: 4px; margin-left: 22px; }
.app-header .header-nav .nav-item {
  padding: 6px 16px; font-size: 14px; color: #606266; cursor: pointer;
  border-radius: 6px; white-space: nowrap;
}
.app-header .header-nav .nav-item:hover { color: #409eff; background: #f5f8ff; }
.app-header .header-nav .nav-item.active { color: #409eff; background: #ecf5ff; font-weight: 600; }
.app-header .spacer { flex: 1; }
.app-header .user-box { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.app-main { flex: 1; display: flex; overflow: hidden; }
.app-side {
  width: 220px; background: #fff; border-right: 1px solid #e4e7ed;
  overflow-y: auto; padding: 10px 0;
}
.app-side .side-title {
  padding: 8px 20px 4px; font-size: 11px; color: #909399; letter-spacing: 1px;
}
.app-side .el-menu { border-right: none; }
/* 侧栏底部备案/联系信息：贴底显示，网站设置里填了才渲染 */
.side-foot {
  position: sticky; bottom: 0; margin: 0 12px; padding: 10px 8px;
  background: #fff; border-top: 1px solid #f0f2f5;
  font-size: 11px; color: #a8abb2; line-height: 1.9; word-break: break-all;
}
.side-foot a { display: block; color: #a8abb2; text-decoration: none; }
.side-foot a:hover { color: #409eff; }
/* 网站设置页的对外展示预览 */
.site-preview { border: 1px dashed #dcdfe6; border-radius: 8px; padding: 18px 16px; text-align: center; color: #909399; font-size: 12px; line-height: 2; }
.site-preview .sp-name { font-size: 16px; font-weight: 600; color: #1d3557; margin-bottom: 6px; }
.site-preview .sp-row span { margin-right: 10px; white-space: nowrap; }
.app-content { flex: 1; overflow-y: auto; padding: 18px 20px 30px; }
.page-title { font-size: 17px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; }
.page-title .desc { font-size: 12px; color: #909399; font-weight: 400; margin-left: 10px; }
.card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card + .card { margin-top: 14px; }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #1d3557; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }

/* 统计卡 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.stat-card {
  background: #fff; border-radius: 8px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); border-top: 3px solid #409eff;
}
.stat-card .ic { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; }
.stat-card .label { font-size: 12px; color: #909399; }
.stat-card .value { font-size: 22px; font-weight: 700; color: #303133; line-height: 1.3; }
.stat-card .foot { font-size: 11px; color: #c0c4cc; margin-top: 2px; }

/* 步骤条区域 */
.step-box { margin-bottom: 16px; background: #fff; border-radius: 8px; padding: 14px 16px; }
.step-hint { font-size: 12px; color: #909399; margin-top: 8px; line-height: 1.7; }

/* 扫描样式 */
.scan-box {
  background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
  border: 1px dashed #91caff; border-radius: 10px; padding: 18px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.scan-box .scan-ic { font-size: 34px; color: #409eff; }
.scan-box .scan-input { flex: 1; }
.scan-box .scan-tip { font-size: 12px; color: #909399; margin-top: 4px; }

/* 批量表格 */
.import-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tag-c { margin-right: 6px; }

/* PDA 手机框架 */
.mobile-frame {
  height: 100%; display: flex; justify-content: center;
  background: #e8eaed; padding: 18px 0;
}
.phone {
  width: 390px; height: 100%; background: #f7f8fa; border-radius: 28px;
  border: 6px solid #111; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.phone-head {
  background: #1d3557; color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; font-size: 14px;
  flex-shrink: 0;
}
.phone-body { flex: 1; overflow-y: auto; padding: 12px; }
.mob-btn { height: 44px; font-size: 15px; }
.mob-cell { background: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.mob-cell .t { font-size: 12px; color: #909399; }
.mob-cell .v { font-size: 16px; font-weight: 600; margin-top: 2px; }
.mob-cell .r { font-size: 12px; color: #606266; margin-top: 2px; }
.mob-cell.gray { color: #909399; text-align: center; }

/* 移动端底部标签栏（4.8） */
.phone-tab {
  flex-shrink: 0; display: flex; background: #fff;
  border-top: 1px solid #ebeef5; padding: 6px 0 8px;
}
.phone-tab .tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  font-size: 11px; color: #909399; gap: 2px; cursor: pointer;
}
.phone-tab .tab-item.active { color: #409eff; font-weight: 600; }

/* 报表 */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-box { background: #fff; border-radius: 8px; padding: 14px; }
.chart-box .h { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

/* 通用辅助 */
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mb8 { margin-bottom: 8px; }

/* 经营分析小型统计卡（4.9） */
.stat-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.stat-mini .mini {
  background: #fff; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.stat-mini .mini .l { font-size: 12px; color: #909399; }
.stat-mini .mini .v { font-size: 20px; font-weight: 700; color: #303133; margin-top: 2px; }
.stat-mini .mini.hi { background: #ecf5ff; }
.empty-tip { text-align: center; color: #909399; padding: 30px 0; }
.flex { display: flex; align-items: center; gap: 8px; }
.gray { color: #909399; } .red { color: #f56c6c; } .orange { color: #e6a23c; } .green { color: #67c23a; }
.captcha-code { display: inline-block; min-width: 96px; padding: 6px 16px; font-size: 26px; font-weight: 700; letter-spacing: 8px; text-align: center; color: #f56c6c; background: #fef0f0; border: 1px dashed #f56c6c; border-radius: 6px; font-family: monospace; user-select: none; }
.text-right { text-align: right; }
.mono { font-family: "SF Mono", Consolas, monospace; }
.totalbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f4f8ff; border-radius: 8px; font-size: 13px; margin-top: 10px; }
.totalbar b { color: #1d3557; font-size: 16px; }
a.link { color: #409eff; cursor: pointer; text-decoration: none; }
.section-tip { font-size: 12px; color: #909399; padding: 8px 12px; background: #f9fafc; border-radius: 6px; margin-bottom: 12px; line-height: 1.7; }

/* 盘点差异统计条 */
.count-stat-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
.stat-chip { display: inline-block; padding: 4px 12px; border-radius: 14px; font-size: 13px; background: #f4f4f5; }
.stat-chip.green { background: #f0f9eb; }
.stat-chip.orange { background: #fdf6ec; }
.stat-chip.red { background: #fef0f0; }

/* 4.11 角色权限矩阵 */
.perm-group-title { font-size: 13px; font-weight: 600; color: #1d3557; margin: 14px 0 8px; padding-left: 8px; border-left: 3px solid #409eff; }
.perm-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sub-text { color:#909399; font-size:12px; line-height:1.4; }

/* ============ 侧栏抽屉与响应式（P2 §3.1 方案A） ============ */
/* 桌面默认不显示汉堡按钮与遮罩，仅小屏启用 */
.side-toggle { display: none; font-size: 20px; cursor: pointer; margin-right: 12px; color: #1d3557; }
.side-mask { display: none; }

@media (max-width: 768px) {
  /* 布局：220px 常驻侧栏改为抽屉，由 header 汉堡按钮唤出 */
  .side-toggle { display: block; }
  .hide-sm { display: none !important; }
  .app-header { padding: 0 12px; }
  .app-header .logo { font-size: 15px; }
  .app-header .logo .sub { display: none; }
  .app-header .header-nav { margin-left: 10px; gap: 2px; }
  .app-header .header-nav .nav-item { padding: 5px 10px; font-size: 13px; }
  .app-header .user-box { gap: 6px; font-size: 12px; }
  .app-content { padding: 12px 12px 24px; }

  .app-side {
    position: fixed; top: 56px; bottom: 0; left: 0; z-index: 20; width: 220px;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
  }
  .app-side.open { transform: translateX(0); }
  .side-mask {
    display: block; position: fixed; left: 0; right: 0; top: 56px; bottom: 0;
    background: rgba(0,0,0,.35); z-index: 19;
  }

  /* 登录页：880px 双栏改单栏流式 */
  .login-wrap { padding: 16px; }
  .login-card { width: auto; max-width: 520px; min-height: 0; flex-direction: column; }
  .login-left { width: auto; padding: 22px 24px; }
  .login-left h1 { font-size: 20px; }
  .login-right { padding: 22px 24px; }

  /* 统计卡 4 列 → 2 列；小卡 6 → 3；并排图表 → 纵向 */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-mini { grid-template-columns: repeat(3, 1fr); }
  .chart-row { grid-template-columns: 1fr; }
  .stat-card { padding: 12px; gap: 10px; }
  .stat-card .ic { width: 36px; height: 36px; font-size: 18px; }
  .stat-card .value { font-size: 18px; }

  /* 弹窗：覆盖模板里写死的像素宽度，消除横向溢出 */
  .el-dialog { width: 92% !important; max-width: 92%; }
  .el-message-box { width: 90% !important; max-width: 90%; }
  .card { padding: 12px; }
  .page-title { font-size: 15px; flex-wrap: wrap; }
  .page-title .desc { display: none; }

  /* PDA / 手机：演示用假手机壳改为铺满全屏 */
  .mobile-frame { padding: 0; background: #f7f8fa; }
  .phone { width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; }
}

/* ============ 移动端触控尺寸（P2 §3.2，可点区域 ≥44px） ============ */
.phone-body .el-input__wrapper { min-height: 44px; }
.phone-body .el-input__inner { font-size: 15px; }
.phone-body .el-button { min-height: 40px; font-size: 15px; }
.phone-body .el-button--small { min-height: 36px; }
.phone-body .el-button.is-link { min-height: 32px; padding: 6px 8px; }
.phone-tab .tab-item { min-height: 44px; justify-content: center; padding: 4px 0; }
.phone-tab { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

/* ============ 7.1 商品规格照片位（正面 / 左侧 / 右侧） ============ */
.photo-grid { display: flex; gap: 14px; }
.photo-item { text-align: center; }
.photo-box {
  width: 96px; height: 96px; border: 1px dashed #dcdfe6; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #fafafa; font-size: 12px; color: #909399;
}
.photo-box img { width: 100%; height: 100%; object-fit: contain; }
.photo-label { margin-top: 4px; font-size: 12px; color: #606266; }
.photo-size { font-size: 12px; color: #909399; }