/* 荷小悦供应链订货商城 · Demo 样式 */
:root {
  --brand: #17795e;
  --brand-2: #23a37e;
  --accent: #ff7a45;
  --ink: #1b2320;
  --sub: #6b7a74;
  --line: #e6ece9;
  --bg: #f5f7f6;
  --card: #fff;
  --warn: #d9822b;
  --danger: #d64545;
  --info: #2b6cb0;
  --ok: #17795e;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 40, 32, .05), 0 8px 24px rgba(16, 40, 32, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; max-width: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink); background: #eef2f1; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.muted { color: var(--sub); }
.small { font-size: 12px; }
.center { text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.danger { color: var(--danger); }
.ok { color: var(--ok); }
.warn-t { color: var(--warn); }
.plus { color: var(--ok); }
.minus { color: var(--danger); }
.mt { margin-top: 10px; }
.full { width: 100%; }

/* ---------- 全局头 ---------- */
.global {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.g-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.g-brand em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--sub); margin-top: 2px; }
.logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 15px;
}
.shell-switch { display: flex; gap: 6px; background: var(--bg); padding: 4px; border-radius: 10px; }
.shell-switch button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; color: var(--sub); font-size: 13px;
}
.shell-switch button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow); font-weight: 600; }

/* ---------- 门店端容器（自适应，无手机壳） ---------- */
#app { padding: 0; display: block; }
.phone-wrap { display: block; }
.phone {
  width: 100%; max-width: 1200px; min-height: calc(100vh - 56px);
  margin: 0 auto; background: var(--bg);
  display: flex; flex-direction: column; position: relative;
}
.p-status { display: none; }
.p-head {
  position: sticky; top: 56px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(8px);
}
.p-head h1 { font-size: 16px; margin: 0; font-weight: 700; }
.p-head .back, .p-head .back-ph { width: 26px; font-size: 22px; color: var(--ink); line-height: 1; }
.p-head .who { font-size: 11px; color: var(--sub); background: #fff; padding: 4px 8px; border-radius: 20px; border: 1px solid var(--line); max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-tag { font-style: normal; font-size: 10px; color: #fff; background: #2b7de9; padding: 1px 5px; border-radius: 4px; vertical-align: 2px; }
.p-body { flex: 1; width: 100%; padding: 14px 16px 20px; }
.p-body:has(.bottom-bar) { padding-bottom: 92px; }
.p-tabbar {
  display: flex; border-top: 1px solid var(--line); background: #fff; padding: 6px 0 10px;
}
.p-tabbar a { flex: 1; text-align: center; font-size: 10px; color: var(--sub); display: flex; flex-direction: column; gap: 2px; }
.p-tabbar a.on { color: var(--brand); font-weight: 600; }
.p-tabbar .ic { font-size: 18px; position: relative; }
.p-tabbar .badge {
  position: absolute; top: -4px; right: 12px; background: var(--accent); color: #fff;
  font-style: normal; font-size: 9px; padding: 1px 4px; border-radius: 8px;
}
.phone-caption { font-size: 12px; color: var(--sub); display: flex; gap: 10px; align-items: center; }
.link { background: none; border: 0; color: var(--brand); font-size: 12px; text-decoration: underline; padding: 0; }

/* ---------- 通用块 ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 2px 8px; }
.sec-head h3 { font-size: 14px; margin: 0; }
.sec-head a { font-size: 12px; color: var(--sub); }
.panel { background: var(--card); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); }
.panel-t { font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.panel-t.mt { margin-top: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row.gap { gap: 10px; margin-top: 10px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.empty { text-align: center; color: var(--sub); font-size: 13px; padding: 26px 0; }
.empty.big { padding: 60px 0; line-height: 2; }

/* 按钮 */
.primary, .ghost {
  border-radius: 10px; border: 1px solid transparent; padding: 10px 16px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.primary { background: var(--brand); color: #fff; }
.primary:disabled { background: #b9cbc4; cursor: not-allowed; }
.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.sm { padding: 7px 12px; font-size: 12px; }
.xs { padding: 4px 9px; font-size: 11px; border-radius: 7px; }

/* 状态胶囊 */
.pill { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.pill.warn { background: #fdf1e3; color: var(--warn); }
.pill.info { background: #e8f0fb; color: var(--info); }
.pill.primary { background: #e3f2ec; color: var(--brand); }
.pill.success { background: #e3f2ec; color: var(--ok); }
.pill.danger { background: #fdeaea; color: var(--danger); }
.pill.muted { background: #eef2f1; color: var(--sub); }
.tag { font-size: 11px; background: var(--bg); padding: 2px 7px; border-radius: 6px; color: var(--sub); }

/* ---------- 门店端 ---------- */
.hero {
  background: linear-gradient(135deg, #17795e, #27a883); color: #fff; border-radius: 18px;
  padding: 16px; margin-top: 6px;
}
.hero .hello { font-size: 19px; font-weight: 700; }
.hero .sub { font-size: 11px; opacity: .85; margin-top: 3px; }
.hero-card { display: flex; gap: 8px; margin-top: 14px; }
.hero-card > div { flex: 1; background: rgba(255, 255, 255, .15); border-radius: 10px; padding: 8px; }
.hero-card .k { display: block; font-size: 10px; opacity: .85; }
.hero-card b { font-size: 14px; }
.danger-note { background: #fdeaea; border-color: #f3c9c9; color: #a33; }
.notice {
  background: #fff8ec; border: 1px solid #f7e3c3; color: #8a5a12; font-size: 12px;
  padding: 9px 12px; border-radius: 10px; margin-top: 10px;
}
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cats.big { grid-template-columns: repeat(2, 1fr); }
.cat {
  background: #fff; border-radius: 12px; padding: 12px 8px; text-align: center; font-size: 12px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; font-weight: 600;
}
.cat span { font-size: 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.prod { background: #fff; border-radius: 12px; padding: 8px; box-shadow: var(--shadow); display: block; }
.prod.out { opacity: .62; }
.thumb {
  height: 88px; border-radius: 10px; background: linear-gradient(160deg, #f2f8f5, #e7f2ec);
  display: grid; place-items: center; font-size: 40px; position: relative;
}
.thumb.sm { width: 62px; height: 62px; font-size: 28px; flex: none; }
.thumb i {
  position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 9px; background: var(--accent);
  color: #fff; padding: 2px 5px; border-radius: 5px;
}
.pname { font-size: 12.5px; font-weight: 600; margin-top: 7px; line-height: 1.3; }
.pspec { font-size: 10.5px; color: var(--sub); margin-top: 2px; }
.price { color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 5px; }
.price span { font-size: 10px; color: var(--sub); font-weight: 400; }
.price em { font-style: normal; font-size: 10px; color: var(--danger); }
.pmin { font-size: 10px; color: var(--sub); }
.stat-entry { display: block; background: #fff; border-radius: 12px; padding: 14px; font-size: 13px; box-shadow: var(--shadow); }

/* 订单卡 */
.order-card { display: block; background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 9px; box-shadow: var(--shadow); }
.order-card b { font-size: 13px; }
.order-card .oi { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.order-card .oi span { font-size: 11px; background: var(--bg); color: #46564f; padding: 3px 7px; border-radius: 6px; }

/* 商品详情 */
.detail-hero {
  height: 190px; border-radius: 16px; background: linear-gradient(160deg, #f2f8f5, #e4f1ea);
  display: grid; place-items: center; font-size: 88px; position: relative; margin-top: 6px;
}
.detail-hero .badge {
  position: absolute; top: 10px; left: 10px; background: var(--accent); color: #fff;
  font-size: 10px; padding: 3px 8px; border-radius: 6px;
}
.detail-body { padding: 12px 2px 90px; }
.detail-body h2 { font-size: 17px; margin: 6px 0; }
.price-lg { color: var(--accent); font-weight: 800; font-size: 24px; }
.price-lg span { font-size: 12px; color: var(--sub); font-weight: 400; }
.price-lg em { font-style: normal; font-size: 10px; background: #eef6f2; color: var(--brand); padding: 2px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 6px; }
.stock-line { margin: 10px 0; font-size: 12px; color: var(--sub); }
.stock-line b { color: var(--ok); }
.tier { display: flex; justify-content: space-between; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tier:last-child { border: 0; }
.tier.hint { color: var(--sub); font-size: 11px; }
.tier b { color: var(--accent); }
.tier.excl { background: #eff8f4; border-radius: 8px; padding: 8px; border: 1px dashed #b9dfd0; margin-bottom: 4px; }
.tier.excl b { color: var(--brand); }
.stepper { display: flex; align-items: center; gap: 0; }
.stepper button {
  width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; font-size: 16px; color: var(--ink);
}
.stepper button:first-child { border-radius: 8px 0 0 8px; }
.stepper button:last-of-type { border-radius: 0 8px 8px 0; }
.stepper input { width: 54px; height: 34px; text-align: center; border: 1px solid var(--line); border-left: 0; border-right: 0; font-size: 14px; }
.stepper.sm button { width: 26px; height: 26px; font-size: 13px; }
.stepper.sm input { width: 36px; height: 26px; font-size: 12px; }
.bottom-bar {
  position: sticky; bottom: 0; z-index: 25;
  width: 100%; max-width: 1200px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
}
.bottom-bar .sum { flex: 1; font-size: 12px; color: var(--sub); }
.bottom-bar .sum b { color: var(--accent); font-size: 18px; }
.bottom-bar .primary { flex: 1.2; }

/* 购物车 / 结算 */
.cart-line { display: flex; gap: 10px; background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 9px; box-shadow: var(--shadow); }
.cl-main { flex: 1; }
.cl-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.stepper.sm { gap: 0; }
.addr b { font-size: 14px; }
.addr div { font-size: 12px; margin-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 6px 12px;
  font-size: 12px; color: var(--sub);
}
.chip.on { border-color: var(--brand); color: var(--brand); background: #eff8f4; font-weight: 600; }
.co-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.co-line:last-child { border: 0; }
.co-line.total b { color: var(--accent); font-size: 16px; }
.co-line b { white-space: nowrap; }
.pay-note { font-size: 11.5px; color: #8a5a12; background: #fff8ec; border: 1px solid #f7e3c3; }
.input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font-size: 13px;
  background: #fff; margin-top: 4px; font-family: inherit;
}
.input.sm { width: 78px; margin: 0; padding: 5px 8px; }
.fld { display: block; font-size: 12px; color: var(--sub); margin-bottom: 10px; }

/* 空态 / 成功 */
.done-wrap { text-align: center; padding: 26px 6px; }
.done-wrap .ok {
  width: 62px; height: 62px; border-radius: 50%; background: #e3f2ec; color: var(--brand);
  font-size: 30px; display: grid; place-items: center; margin: 0 auto 12px;
}
.done-wrap h2 { margin: 4px 0; font-size: 18px; }
.done-wrap .row.gap { justify-content: center; }

/* 时间线 */
.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl { display: flex; gap: 9px; font-size: 12px; }
.tl i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 5px; flex: none; }

/* 统计 */
.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kpi { background: #fff; border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.kpi span { font-size: 11px; color: var(--sub); display: block; }
.kpi b { font-size: 19px; display: block; margin: 3px 0; }
.kpi em { font-style: normal; font-size: 11px; color: var(--sub); }
.kpi em.up { color: var(--ok); }
.kpi em.down { color: var(--danger); }
.bar-line { display: grid; grid-template-columns: 66px 1fr 62px; gap: 8px; align-items: center; font-size: 11.5px; padding: 5px 0; }
.bar { height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.bar.inline { display: inline-block; width: 70px; vertical-align: middle; margin-right: 6px; }
.statement .co-line { font-size: 13px; }
.seg { display: flex; background: #fff; border-radius: 10px; padding: 4px; margin: 8px 0; box-shadow: var(--shadow); }
.seg button { flex: 1; border: 0; background: transparent; padding: 7px; border-radius: 8px; font-size: 12px; color: var(--sub); }
.seg button.on { background: var(--bg); color: var(--brand); font-weight: 600; }

/* 我的 */
.me-head { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--shadow); margin-top: 6px; }
.avatar { width: 48px; height: 48px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; font-size: 24px; }
.list { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 10px; }
.list a { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.list a:last-child { border: 0; }
.list i { font-style: normal; color: var(--sub); }

/* 员工端 */
.devbar { background: linear-gradient(135deg, #2b7de9, #3f9bf0); color: #fff; border-radius: 14px; padding: 12px; margin-top: 6px; }
.dev-who { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.dev-who .wx { margin-left: auto; background: rgba(255, 255, 255, .22); padding: 2px 7px; border-radius: 6px; font-size: 10px; }
.dev-tabs { display: flex; gap: 4px; margin-top: 10px; overflow-x: auto; }
.dev-tabs a { font-size: 11px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.dev-tabs a.on { background: #fff; color: #2b7de9; font-weight: 700; }
.todo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.todo-grid.wide { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
.todo-grid a { background: #fff; border-radius: 12px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); }
.todo-grid b { display: block; font-size: 20px; color: var(--brand); }
.todo-grid span { font-size: 10.5px; color: var(--sub); }
.in-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }

/* ---------- 后台 ---------- */
.admin { display: flex; min-height: calc(100vh - 56px); background: var(--bg); }
.side {
  width: 220px; background: #0f2a22; color: #cfe0d9; padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; color: #fff; }
.brand > span { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; }
.brand b { font-size: 13px; display: block; }
.brand em { font-style: normal; font-size: 10.5px; opacity: .65; }
.side nav { display: flex; flex-direction: column; gap: 3px; }
.side nav a {
  padding: 9px 10px; border-radius: 9px; font-size: 12.5px; color: #b9cfc6; display: flex; align-items: center; gap: 6px;
}
.side nav a.on, .side nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.dot { margin-left: auto; font-style: normal; background: var(--accent); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
.side-close { display: none; }
.side-foot { margin-top: auto; display: grid; gap: 8px; }
.side-foot .ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #e6f1ec; }
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 17px; margin: 0; }
.top-r { display: flex; align-items: center; gap: 10px; }
.content { padding: 18px 22px 40px; max-width: 1240px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi-card { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.kpi-card span { font-size: 11.5px; color: var(--sub); }
.kpi-card b { display: block; font-size: 22px; margin: 4px 0; }
.kpi-card em { font-style: normal; font-size: 11px; color: var(--sub); }
.kpi-card em.up { color: var(--ok); }
.kpi-card em.down { color: var(--danger); }
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 11px; color: var(--sub); font-weight: 600; padding: 7px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 8px 6px; border-bottom: 1px solid #f2f5f4; vertical-align: top; }
.tbl tr:last-child td { border: 0; }
.ops { display: flex; gap: 5px; flex-wrap: wrap; }
.flow-note { font-size: 12px; color: #46564f; background: var(--bg); border-radius: 10px; padding: 10px; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
  background: rgba(16, 30, 26, .92); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 22px;
  opacity: 0; pointer-events: none; transition: .22s; z-index: 99;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .side { width: 168px; }
}
@media (max-width: 700px) {
  .admin { flex-direction: column; }
}

/* ---------- 商品主图上传与 1:1 裁剪 ---------- */
.img-pick {
  width: 148px; height: 148px; margin-top: 6px; border-radius: 12px; border: 1px dashed #c8d8d1;
  background: #f7fbf9; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  color: var(--sub); font-size: 12px; position: relative;
}
.img-pick:hover { border-color: var(--brand); color: var(--brand); }
.img-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-pick .img-change {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(14, 28, 23, .66); color: #fff;
  font-size: 11px; text-align: center; padding: 5px 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }

.crop-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(11, 22, 18, .62); backdrop-filter: blur(2px);
}
.crop-box { background: #fff; border-radius: 16px; padding: 16px; width: 324px; box-shadow: 0 26px 70px rgba(0, 0, 0, .32); }
.crop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
.crop-view {
  position: relative; width: 260px; height: 260px; margin: 0 auto; overflow: hidden;
  border-radius: 12px; background: #0d1714; cursor: grab; touch-action: none;
}
.crop-view.grabbing { cursor: grabbing; }
.crop-view img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; user-select: none; pointer-events: none; }
.crop-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .28) 1px, transparent 1px);
  background-size: 33.3333% 33.3333%;
}
.crop-corner { position: absolute; width: 18px; height: 18px; border: 2px solid #fff; pointer-events: none; }
.crop-corner.tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.crop-corner.tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.crop-corner.bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.crop-corner.br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.crop-tools { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; }
.crop-tools input[type="range"] { flex: 1; accent-color: var(--brand); }
.crop-hint { margin: 8px 2px 0; }
.crop-actions { display: flex; gap: 8px; margin-top: 14px; }
.crop-actions button { flex: 1; }

/* ---------- 商品图片：缩略图 / 悬停放大 / 大图 ---------- */
.img-cell {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #f2f7f5;
  display: grid; place-items: center; font-size: 22px; cursor: zoom-in;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease;
}
.img-cell:hover { transform: scale(1.12); box-shadow: 0 10px 22px rgba(16, 40, 32, .2); }
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-cell.placeholder { cursor: default; color: var(--sub); }
.img-cell.placeholder:hover { transform: none; box-shadow: none; }

.zoom-layer {
  position: fixed; width: 240px; height: 240px; z-index: 260; border-radius: 14px; overflow: hidden;
  border: 3px solid #fff; background: #fff; pointer-events: none;
  box-shadow: 0 20px 48px rgba(8, 24, 18, .34);
  opacity: 0; transform: scale(.9) translateY(10px);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.zoom-layer.show { opacity: 1; transform: scale(1) translateY(0); }
.zoom-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }

.img-lightbox {
  position: fixed; inset: 0; z-index: 270; background: rgba(9, 20, 16, .74);
  display: grid; place-items: center; cursor: zoom-out; animation: lbFade .16s ease;
}
.img-lightbox figure { margin: 0; text-align: center; animation: lbPop .22s cubic-bezier(.2, .8, .2, 1); }
.img-lightbox img {
  max-width: min(76vw, 720px); max-height: 74vh; border-radius: 16px; display: block;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .48);
}
.img-lightbox figcaption { color: #e9f3ee; font-size: 12px; margin-top: 10px; display: grid; gap: 2px; }
.img-lightbox figcaption span { color: #9fb8ae; font-size: 11px; }
@keyframes lbFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lbPop { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }

/* ---------- 报表趋势图 ---------- */
.trend { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 8px 2px 0; }
.trend-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 6px; }
.trend-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand-2), var(--brand)); transition: height .25s ease; }
.trend-col:hover .trend-bar { background: var(--accent); }
.trend-col span { font-size: 9px; color: var(--sub); transform: rotate(0deg); white-space: nowrap; }

/* ---------- 登录页 ---------- */
.login-wrap { min-height: calc(100vh - 56px); display: grid; place-items: center; padding: 30px 16px; background: linear-gradient(160deg, #eef5f1, #e6efec 60%, #e9f1ee); }
.login-card { width: 460px; max-width: 100%; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(12, 40, 30, .14); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.login-brand > span { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; display: grid; place-items: center; font-size: 18px; }
.login-brand b { display: block; font-size: 15px; }
.login-brand em { font-style: normal; font-size: 11.5px; color: var(--sub); }
.login-tip { font-size: 12px; color: var(--sub); margin: 10px 0 14px; }
.login-list { display: grid; gap: 8px; }
.login-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.login-item:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(16, 60, 45, .1); transform: translateY(-1px); }
.li-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; font-size: 18px; flex: none; }
.li-main { flex: 1; }
.li-main b { display: block; font-size: 13px; }
.li-main em { font-style: normal; font-size: 11px; color: var(--sub); }
.li-go { font-size: 11.5px; color: var(--brand); }

/* 实库门店：图片按容器裁剪，避免撑破卡片盖住文字 */
.thumb { overflow: hidden; }
.thumb > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 10px; }
.detail-hero { overflow: hidden; }
.detail-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line .thumb.sm { position: relative; overflow: hidden; }

/* 表格横向滚动容器（后台表列多时不再被裁） */
.tbl-wrap { overflow-x: auto; }
.tbl-wrap .tbl { min-width: 720px; }
.tag-mini { font-style: normal; font-size: 9px; background: var(--bg); color: var(--sub); padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.ops { white-space: nowrap; }
button.xs { padding: 4px 9px; font-size: 11.5px; border-radius: 7px; }
.thumb-img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: block; }
.row-danger td { background: #fff4f1; }

.row2 > button.ghost { justify-self: end; align-self: center; width: auto; }
.row2 { align-items: center; }
.pick-list { display: grid; gap: 6px; margin-top: 8px; }
.pick-item { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.pick-item:hover { border-color: var(--brand); }
.sm-input { width: 90px; padding: 5px 8px; font-size: 12px; }
.bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 4px; }
.tbl-wrap.narrow .tbl { min-width: 0; }
.login-label { display: block; font-size: 11.5px; color: var(--sub); margin: 12px 0 4px; }
.login-card .input { width: 100%; }
.store-login { padding: 4px 2px; max-width: 100%; }

/* 桌面端：门店端表单类页面居中收窄，避免输入框拉满整行 */
@media (min-width: 721px) {
  .store-login {
    max-width: 460px; margin: 40px auto 0; background: #fff; border-radius: 18px;
    box-shadow: var(--shadow); padding: 26px 24px;
  }
  .p-body > .panel,
  .p-body > .order-card,
  .p-body > .cart-line,
  .p-body > .empty,
  .p-body > .co-line,
  .p-body > .row.gap { max-width: 720px; margin-left: auto; margin-right: auto; }
  .p-body > .search-bar, .p-body > .chips { max-width: 1200px; margin-left: auto; margin-right: auto; }
}
.sl-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sl-brand > span { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; display: grid; place-items: center; font-size: 17px; }
.sl-brand b { display: block; font-size: 14px; }
.sl-brand em { font-style: normal; font-size: 11px; color: var(--sub); }

/* ---------- 首页入口 ---------- */
.landing { min-height: calc(100vh - 56px); display: grid; place-items: center; padding: 30px 16px;
  background: linear-gradient(160deg, #eef5f1, #e6efec 60%, #e9f1ee); }
.landing-card { width: 460px; max-width: 100%; background: #fff; border-radius: 18px; padding: 24px;
  box-shadow: 0 24px 60px rgba(12,40,30,.14); }
.landing-brand { display: flex; align-items: center; gap: 10px; }
.landing-brand > span { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; display: grid; place-items: center; font-size: 18px; }
.landing-brand b { display: block; font-size: 15px; }
.landing-brand em { font-style: normal; font-size: 11.5px; color: var(--sub); }
.landing-sub { font-size: 12px; color: var(--sub); margin: 14px 0 10px; }
.landing-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 10px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.landing-item:hover { border-color: var(--brand); box-shadow: 0 10px 24px rgba(16,60,45,.1); transform: translateY(-1px); }
.li-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--bg); display: grid; place-items: center; font-size: 20px; flex: none; }
.landing-item b { display: block; font-size: 14px; }
.landing-item em { font-style: normal; font-size: 11.5px; color: var(--sub); }
.li-go { margin-left: auto; font-size: 12px; color: var(--brand); }
.landing-foot { margin-top: 14px; font-size: 11px; color: var(--sub); text-align: center; }
.login-err { margin-top: 10px; font-size: 12px; color: var(--danger); background: #fff2ef; border-radius: 8px; padding: 7px 10px; }

/* 顶部入口按钮（a 标签） */
.shell-switch { display: flex; gap: 8px; }
.shell-switch a { font-size: 12.5px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  color: #2b3a34; background: #fff; text-decoration: none; }
.shell-switch a:hover { border-color: var(--brand); color: var(--brand); }

/* 商品图统一按 3:4 竖版展示（列表卡片 + 详情大图） */
.grid .prod .thumb { height: auto; aspect-ratio: 1 / 1; }
.detail-hero { height: auto !important; aspect-ratio: 3 / 4; }
.detail-hero > img { width: 100% !important; height: 100% !important; object-fit: cover; }



/* ================= 响应式适配（全站） ================= */

/* 平板 */
@media (max-width: 1024px) {
  .phone { max-width: 100%; }
  .p-head { top: 52px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
}

/* 手机 */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  .global { display: none; }                 /* 手机上去掉顶部品牌栏，直接全屏 */
  .phone { min-height: 100vh; }
  .p-head { top: 0; padding-top: calc(10px + env(safe-area-inset-top)); }
  .p-body { padding: 10px 12px 16px; }
  .bottom-bar {
    position: fixed; left: 0; right: 0; border-radius: 14px 14px 0 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .prod, .prod .pname, .prod .pspec { min-width: 0; }
  .pname { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .chips .chip { flex: none; }
  .row2 { grid-template-columns: 1fr; }

  /* 后台移动端布局由下方「后台移动端适配」统一接管（抽屉式侧栏） */
}

/* 桌面：门店端内容居中、卡片更多列 */
@media (min-width: 1025px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .phone-caption { display: none; }
}

/* 后台在窄屏：容器必须允许收缩，表格改为容器内横向滚动 */
@media (max-width: 720px) {
  .admin, .main, .content, .panel, .tbl-wrap { min-width: 0 !important; max-width: 100% !important; }
  .content { padding: 10px !important; }
  .panel { overflow: hidden; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap .tbl { min-width: 560px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row, .row2 { min-width: 0; flex-wrap: wrap; }
  .row > *, .row2 > * { min-width: 0; }
  .flow-note, .panel-t { word-break: break-word; }
  .pick-item { grid-template-columns: 1fr; gap: 4px; }
  .pick-item .link { justify-self: start; }
}

/* 门店端不显示全局头（避免出现"员工后台"入口） */
body[data-shell="mobile"] .global { display: none !important; }
body[data-shell="mobile"] .p-head { top: 0 !important; }
body[data-shell="mobile"] .phone { min-height: 100vh; }
.p-head .who { text-decoration: none; }
.p-head .who:hover { color: var(--brand); }

/* 门店主页 */
.me-head { display: flex; align-items: center; gap: 12px; }
.me-avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 18px; }
.me-name { font-size: 15px; font-weight: 700; }
.me-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px;
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); text-decoration: none; }
.me-row:last-child { border-bottom: 0; }

/* 顶栏动作区：购物车 + 门店入口 */
.head-actions { display: flex; align-items: center; gap: 6px; }
.head-link {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px;
  border-radius: 9px; background: #fff; border: 1px solid var(--line);
  font-size: 12px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.head-link:active { background: var(--bg); }
.head-link i {
  font-style: normal; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
}
.p-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--line);
  font-size: 16px; text-decoration: none; color: inherit;
}
.cart-btn:active { background: var(--bg); }
.orders-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--line);
  font-size: 15px; text-decoration: none; color: inherit;
}
.orders-btn:active { background: var(--bg); }
.cart-btn i {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: #fff; font-style: normal;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
}

/* 门店订单 */
.order-card { display: block; background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px;
  box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-mid { font-size: 11.5px; color: var(--sub); margin-top: 5px; }
.oc-bot { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.oitem { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.oitem:last-of-type { border-bottom: 0; }
.oi-main { min-width: 0; }
.oi-right { text-align: right; flex: none; }
.oi-right .mono { font-size: 11.5px; color: var(--sub); }

/* 返回首页 */
.back-home { position: fixed; top: 14px; left: 14px; z-index: 50; font-size: 13px; color: var(--sub);
  text-decoration: none; background: #fff; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--line); }
.back-home:hover { color: var(--brand); border-color: var(--brand); }
.login-wrap { position: relative; }

/* 选择入口页：隐藏顶部导航（避免与两张入口卡重复） */
body[data-shell="landing"] .global { display: none; }
body[data-shell="landing"] #app { padding: 0; }
body[data-shell="landing"] .landing { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
body[data-shell="landing"] .landing-card { max-width: 480px; width: 100%; }

/* 后台未登录：隐藏顶部导航，登录卡片独立 */
body[data-shell="admin"][data-loggedin="0"] .global { display: none; }

/* 顶栏空占位不显示 */
.p-head .who:empty { display: none; }

/* 数量输入框：可编辑，去掉数字框上下箭头 */
.stepper input#s-qty {
  width: 62px; text-align: center; font-size: 15px; font-weight: 600;
  -moz-appearance: textfield; appearance: textfield; cursor: text;
}
.stepper input#s-qty::-webkit-outer-spin-button,
.stepper input#s-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#s-qty-tip { margin-top: 6px; }

/* 详情页：桌面端左右两栏（左图右信息） */
.detail-page { display: block; }
@media (min-width: 721px) {
  .p-body:has(.detail-page) { max-width: 1040px; margin: 0 auto; }
  .detail-page {
    display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 28px; align-items: start;
  }
  .detail-page .detail-hero {
    aspect-ratio: 3 / 4; max-height: none; margin-top: 0;
    position: sticky; top: 76px;
  }
  .detail-page .detail-body { padding: 0; }
  .detail-page .price-lg { font-size: 28px; }
  .detail-page h2 { font-size: 22px; margin-top: 10px; }
  .p-body:has(.detail-page) + .bottom-bar,
  .p-body .bottom-bar { max-width: 1040px; }
  .detail-page .stepper input#s-qty { width: 72px; font-size: 16px; }
}

/* picture 包裹后保证图片充满容器 */
.thumb picture, .detail-hero picture { display: block; width: 100%; height: 100%; }
.thumb picture { position: absolute; inset: 0; }
.cart-line .thumb picture { position: absolute; inset: 0; }
.thumb picture img, .detail-hero picture img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: inherit;
}

/* 桌面端底部操作栏固定在底部并居中 */
@media (min-width: 721px) {
  .bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto;
    max-width: 1040px; border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 24px rgba(16, 40, 32, .08);
  }
  .p-body:has(.bottom-bar) { padding-bottom: 110px; }
}

/* 桌面端详情：主图用正方形（源图即 1:1，不裁切） */
@media (min-width: 721px) {
  .detail-page .detail-hero { aspect-ratio: 1 / 1; border-radius: 18px; }
  .detail-page .detail-body { padding-top: 5px; }
}

/* 购物车删除按钮 + 撤销 toast */
.cart-line { position: relative; }
.cart-line .cl-del {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--sub); font-size: 12px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.cart-line .cl-del:hover { color: var(--danger); border-color: var(--danger); background: #fff5f5; }
#toast .toast-act {
  margin-left: 10px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  font-size: 12px; padding: 3px 10px; border-radius: 12px; cursor: pointer;
}
#toast .toast-act:hover { background: rgba(255,255,255,.18); }

/* 购物车数量输入框可编辑 */
.stepper input.cart-qty { cursor: text; -moz-appearance: textfield; appearance: textfield; }
.stepper input.cart-qty::-webkit-outer-spin-button,
.stepper input.cart-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 表格内数量加减器（后台入库/采购/退货通用） */
.qty-ctl { display: inline-flex; align-items: center; gap: 4px; }
.qty-btn {
  width: 26px; height: 26px; flex: none; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.qty-btn:hover { border-color: var(--brand); color: var(--brand); }
.qty-btn:active { background: var(--bg); }
.qty-ctl .input { width: 64px; text-align: center; }

/* 起订/递增提示：红色强调 */
.qty-warn { color: #d64545; font-size: 11.5px; line-height: 1.5; }

/* 箱规 */
.pack-note { color: var(--brand); font-size: 12.5px; font-weight: 600; margin: 2px 0 4px; }
.stepper .unit-label { font-size: 12px; color: var(--sub); margin-left: 4px; }

/* 按箱 / 拆箱切换 */
.unit-switch { display: inline-flex; gap: 6px; margin-bottom: 10px; }
.unit-btn {
  border: 1px solid var(--line); background: #fff; color: var(--sub);
  padding: 6px 12px; border-radius: 16px; font-size: 12.5px; cursor: pointer;
}
.unit-btn.on { border-color: var(--brand); color: var(--brand); background: #f2f9f6; font-weight: 600; }

/* 数量按钮到达边界时的视觉提示（仍可点击，点了会提示原因） */
.stepper button.is-disabled { opacity: .35; }

/* 后台二级标签 */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 10px 22px 0; background: #fff; border-bottom: 1px solid var(--line); }
.tabs .tab {
  padding: 8px 14px; font-size: 13px; color: var(--sub); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs .tab:hover { color: var(--brand); }
.tabs .tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* 后台弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(16, 28, 24, .38); z-index: 200;
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: #fff; border-radius: 16px; width: min(620px, 94vw); max-height: 88vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(10, 25, 20, .28);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 4px 20px 20px; }
.modal-close { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--sub); cursor: pointer; }

/* 商品图片预览 */
.pf-thumb {
  margin-top: 10px; width: 120px; height: 120px; border: 1px dashed var(--line); border-radius: 12px;
  display: grid; place-items: center; overflow: hidden; background: #fafcfb; color: var(--sub); font-size: 12px;
}
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-thumb {
  width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--bg);
  display: grid; place-items: center; font-size: 16px;
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 表格对齐规范 */
.tbl-prod { table-layout: fixed; }
.tbl th { font-weight: 600; color: var(--sub); font-size: 12px; white-space: nowrap; }
.tbl td, .tbl th { padding: 10px 12px; vertical-align: middle; }
.tbl .c { text-align: center; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .ellip { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .nowrap { white-space: nowrap; }
.tbl tbody tr:hover { background: #fafcfb; }
.tbl .prod-thumb { margin: 0 auto; }

/* 已录入畅捷通：整行墨绿 */
.tbl tbody tr.row-chanjet { background: #1d4a3c; color: #eaf6f0; }
.tbl tbody tr.row-chanjet:hover { background: #235845; }
.tbl tbody tr.row-chanjet .mono,
.tbl tbody tr.row-chanjet .small,
.tbl tbody tr.row-chanjet .muted { color: #cfe6dc; }
.tbl tbody tr.row-chanjet .pill { background: rgba(255,255,255,.16); color: #fff; }
.tbl tbody tr.row-chanjet .tag-mini { background: rgba(255,255,255,.2); color: #fff; }
.tbl tbody tr.row-chanjet button.ghost,
.tbl tbody tr.row-chanjet button.primary { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.cj-btn {
  border: 1px solid var(--line); background: #fff; color: var(--sub); font-size: 11.5px;
  padding: 4px 9px; border-radius: 14px; cursor: pointer; white-space: nowrap;
}
.cj-btn:hover { border-color: var(--brand); color: var(--brand); }
.cj-btn.on { background: #e8f5ee; border-color: #b7dfc9; color: #1d4a3c; font-weight: 600; }
.row-chanjet .cj-btn.on { background: rgba(255,255,255,.9); color: #1d4a3c; border-color: transparent; }

/* 订单详情弹窗 */
.lo-link { color: var(--brand); text-decoration: none; }
.lo-link:hover { text-decoration: underline; }
.order-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.order-meta > div { display: flex; flex-direction: column; gap: 2px; }
.order-meta .price { color: var(--accent); font-size: 16px; }
@media (max-width: 720px) { .order-meta { grid-template-columns: 1fr 1fr; } }

/* 弹窗内表格不超出 */
.modal .tbl { width: 100%; }
.modal .tbl-wrap { overflow-x: auto; }
.modal-body { max-width: 100%; }

/* 弹窗表格自适应 */
.modal .tbl { width: 100% !important; table-layout: auto; }
.modal .tbl th, .modal .tbl td { white-space: normal; word-break: break-all; }

/* 表单控件占满栅格列，避免 select 被选项文字撑宽 */
.row2 > div > .input, .row2 .input { width: 100%; min-width: 0; }

/* 同行表单控件统一高度 */
.row2 .input { height: 38px; box-sizing: border-box; }

/* 后台不再显示顶部的「门店订货 / 员工后台」切换（后台内无意义） */
body[data-shell="admin"] .shell-switch { display: none; }

/* ==================== 后台移动端适配 ==================== */
.nav-toggle { display: none; background: none; border: 0; font-size: 20px; line-height: 1; padding: 4px 8px; margin-right: 6px; color: var(--ink); cursor: pointer; }
.side-mask { display: none; }

@media (max-width: 900px) {
  /* 侧栏改为抽屉 */
  .admin { display: block; }
  .side {
    position: fixed; top: 0; left: 0; z-index: 80; width: 246px; height: 100vh; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
  }
  .side.open { transform: none; }
  .side-mask.on { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(10, 24, 20, .42); }

  .nav-toggle { display: inline-block; }
  .topbar { padding: 10px 12px; position: sticky; top: 0; z-index: 30; gap: 6px; }
  .topbar h1 { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .top-r a { padding: 5px 9px; font-size: 11.5px; }
  .content { padding: 10px 10px 28px; }

  /* 子标签横向滚动 */
  .tabs { padding: 8px 10px 0; gap: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto; padding: 8px 9px; font-size: 13px; }

  /* 卡片与栅格 */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px; }
  .kpi-v { font-size: 19px; }
  .panel { padding: 10px; border-radius: 12px; }
  .row2 { grid-template-columns: 1fr; }
  .todo-grid, .todo-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }

  /* 表格：横向滚动，首列收窄 */
  .tbl-wrap .tbl { min-width: 600px; font-size: 12px; }
  .tbl th, .tbl td { padding: 7px 5px; }
  .tbl-wrap .tbl-prod { min-width: 860px; }

  /* 弹窗全屏 */
  .modal-mask { align-items: stretch; padding: 0; }
  .modal { width: 100% !important; max-width: none !important; height: 100%; max-height: 100% !important; border-radius: 0 !important; margin: 0 !important; }

  /* 输入控件放大，避免 iOS 聚焦缩放 */
  input, select, textarea, .input { font-size: 16px !important; }
  .input.sm { width: 66px; }
  button.sm, a.sm, .primary.sm, .ghost.sm { font-size: 12.5px; padding: 8px 12px; }

  /* 表格内的操作按钮更好点 */
  .tbl .xs, .tbl button { min-height: 30px; }
}

@media (max-width: 900px) {
  /* 表格单元格不换行，靠横向滚动查看 */
  .tbl-wrap .tbl td, .tbl-wrap .tbl th { white-space: nowrap; }
  .tbl-wrap .tbl td.ellip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
}

.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpis.k3 .kpi { padding: 8px 6px; }
  .kpis.k3 .kpi-v { font-size: 17px; }
  .side nav { flex-direction: column; }
  .side nav a { width: 100%; }
  .side-foot { margin-top: 18px; }
}

/* 商品描述：门店端红色醒目 */
.pdesc {
  color: #c0392b; font-size: 11.5px; line-height: 1.35; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.detail-desc {
  color: #c0392b; font-weight: 600; font-size: 14px; line-height: 1.5;
  background: #fdecea; border-left: 3px solid #e74c3c; border-radius: 8px;
  padding: 8px 10px; margin: 8px 0;
}

/* 手机端弹窗内的订单明细表：隐藏规格列，保证数量/单价/金额都看得到 */
@media (max-width: 900px) {
  .modal .tbl-wrap { overflow-x: auto; }
  .modal .tbl-wrap .tbl-prod { min-width: 0; width: 100%; table-layout: auto; }
  .modal .tbl-prod th:nth-child(2),
  .modal .tbl-prod td:nth-child(2) { display: none; }
  .modal .tbl-prod th,
  .modal .tbl-prod td { padding: 7px 4px; font-size: 12px; white-space: normal; }
  .modal .tbl-prod td:first-child { min-width: 90px; }
  .modal .tbl-prod th:nth-child(3), .modal .tbl-prod td:nth-child(3) { text-align: right; white-space: nowrap; width: 42px; }
  .modal .tbl-prod th:nth-child(4), .modal .tbl-prod td:nth-child(4) { text-align: right; white-space: nowrap; width: 66px; }
  .modal .tbl-prod th:nth-child(5), .modal .tbl-prod td:nth-child(5) { text-align: right; white-space: nowrap; width: 76px; font-weight: 600; }
}

@media (max-width: 900px) {
  /* 弹窗内其他表格（收款单分摊等）自适应宽度，不再强制 600px */
  .modal .tbl-wrap .tbl { min-width: 0; }
}

/* ==================== 后台抽屉重做 ==================== */
@media (max-width: 900px) {
  .side {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 264px; max-width: 84vw; height: auto;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    z-index: 80; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 24px rgba(0, 0, 0, .28);
  }
  .side.open { transform: none; }
  .side .brand { margin: 2px 0 6px; }
  .side .brand > span { width: 34px; height: 34px; }
  .side nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .side nav a {
    width: 100%; padding: 11px 12px; font-size: 14px; border-radius: 10px; gap: 8px;
  }
  .side nav a.on { background: rgba(255, 255, 255, .14); font-weight: 600; }
  .side-foot { margin-top: auto; padding-top: 14px; gap: 10px; }
  .side-foot .muted { font-size: 12px; }
  .side-foot .ghost { padding: 10px; font-size: 13px; }
  .side-close {
    position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 10px;
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .1);
    color: #dfeee8; font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer;
  }
  .side-mask.on { backdrop-filter: blur(1px); }
}

/* 商品管理表格：列宽固定，空结果时表头不再重叠 */
.tbl-wrap .tbl-prod { min-width: 900px; }
.tbl-prod th { white-space: nowrap; }

/* 商品表：表头不重叠，列宽按百分比分配 */
.tbl-prod th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-prod td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 商品检索选择器 */
.picker { position: relative; }
.picker-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 260px; overflow: auto;
}
.picker-item { display: flex; gap: 8px; align-items: baseline; padding: 9px 11px; cursor: pointer; border-bottom: 1px solid #f3f6f5; }
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover, .picker-item.on { background: #eff7f3; }
.picker-item b { font-weight: 600; font-size: 13px; }
.picker-empty { padding: 12px; color: var(--sub); font-size: 12.5px; text-align: center; }

/* 订单卡片：主体可点，底部操作区单独 */
.order-card .oc-link { display: block; text-decoration: none; color: inherit; }
.order-card .oc-actions { margin-top: 8px; text-align: right; }

/* ---------- 门店订单卡片 & 详情抽屉 ---------- */
.order-card { padding: 12px 14px; }
.order-card .oc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-card .oc-head .mono { font-size: 12.5px; letter-spacing: .2px; }
.order-card .oc-meta { margin-top: 6px; color: var(--sub); font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.order-card .dot-sep { opacity: .5; }
.order-card .oc-foot { margin-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; }
.order-card .oc-amount { display: flex; align-items: baseline; gap: 6px; }
.order-card .oc-amount .price { font-size: 17px; color: var(--accent); }
.order-card .oc-more { font-size: 12px; color: var(--brand); }
.order-card .oc-actions { margin-top: 8px; text-align: right; }
.order-card:active { transform: scale(.995); }

.order-sheet-mask { display: flex; align-items: center; justify-content: center; padding: 16px; }
.order-sheet {
  width: 100%; max-width: 520px; max-height: 86vh; background: #fff;
  border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 60px rgba(10, 25, 20, .28); animation: sheet-pop .18s ease;
}
@keyframes sheet-pop { from { transform: translateY(10px) scale(.98); opacity: .7; } to { transform: none; opacity: 1; } }
.sheet-grab { display: none; }
@media (max-width: 720px) {
  .order-sheet-mask { padding: 12px; }
  .order-sheet { max-width: 100%; max-height: 84vh; }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 15px; }
.sheet-body { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.sheet-status { display: flex; align-items: center; gap: 8px; }
.sheet-status .mono { font-size: 13px; }
.sheet-meta { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-meta > div { display: flex; flex-direction: column; gap: 2px; }
.sheet-meta span { font-size: 11px; color: var(--sub); }
.sheet-meta b { font-size: 13px; }
.sheet-items { margin-top: 14px; border-top: 1px dashed var(--line); }
.si-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.si-row .pname { font-size: 13px; }
.si-right { text-align: right; }
.sheet-note { margin-top: 10px; font-size: 12px; color: var(--sub); background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* 订单详情：明细表格 */
.sheet-items { margin-top: 14px; }
.sheet-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sheet-tbl th, .sheet-tbl td {
  padding: 8px 4px; font-size: 12px; border-bottom: 1px solid #f0f4f2; vertical-align: top;
}
.sheet-tbl th { color: var(--sub); font-weight: 600; font-size: 11px; background: #f7faf9; white-space: nowrap; }
.sheet-tbl th:first-child, .sheet-tbl td:first-child { padding-left: 8px; }
.sheet-tbl th:last-child, .sheet-tbl td:last-child { padding-right: 8px; }
.sheet-tbl .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-tbl .st-name { font-size: 12.5px; line-height: 1.4; word-break: break-all; }
.sheet-tbl .st-spec { color: var(--sub); font-size: 11px; margin-top: 2px; }
.sheet-tbl tfoot td { border-bottom: 0; border-top: 1px solid var(--line); font-weight: 600; padding-top: 10px; }
.sheet-tbl tfoot .price { color: var(--accent); font-size: 14px; }
.sheet-tbl tfoot td:last-child { overflow: visible; }

/* 极窄屏（≤380px）：明细表压缩数字列，给商品名留空间 */
@media (max-width: 380px) {
  .sheet-tbl col:nth-child(2) { width: 50px !important; }
  .sheet-tbl col:nth-child(3) { width: 56px !important; }
  .sheet-tbl col:nth-child(4) { width: 78px !important; }
  .sheet-tbl th, .sheet-tbl td { padding: 7px 3px; font-size: 11.5px; }
  .sheet-tbl th { font-size: 10.5px; }
  .sheet-tbl .st-name { font-size: 12px; }
}

.sheet-tbl td, .sheet-tbl th { overflow: hidden; }
.sheet-tbl .r { text-overflow: ellipsis; }

/* 极窄屏表头允许换行，避免「订单数量」被省略 */
@media (max-width: 380px) {
  .sheet-tbl th, .sheet-tbl th.r {
    white-space: nowrap; text-overflow: clip; font-size: 10px; padding-left: 2px; padding-right: 2px;
  }
}

/* 门店订单：月份筛选 + 汇总 */
.oc-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.oc-month {
  flex: 0 0 auto; height: 32px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; font-size: 12.5px; color: var(--ink);
}
.oc-sum { display: flex; align-items: baseline; gap: 12px; font-size: 12px; color: var(--sub); }
.oc-sum b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.oc-sum b.price { color: var(--accent); }

/* ICP 备案号页脚 */
.icp-foot {
  margin-top: 18px; padding: 12px 0 8px; text-align: center;
  font-size: 11.5px; color: #97a5a0; letter-spacing: .2px;
}
.icp-foot a { color: #97a5a0; text-decoration: none; }
.icp-foot a:hover { color: var(--brand); text-decoration: underline; }