/* 庞圆圆家快手菜 · 运营后台样式
   配色沿用小程序设计令牌，后台与前端同一套视觉语言 */

:root {
  --brand-red: #C93B27;
  --brand-yellow: #F2A93B;
  --brand-green: #5C8A4A;
  --bg: #FBF6EE;
  --card: #FFFFFF;
  --price: #E23C2C;
  --member: #C9A24D;
  --text: #2B2422;
  --sub: #8C8078;
  --line: #EFE6DA;
  --soft: #F7F2EA;
  --r: 14px;
  --shadow: 0 4px 20px rgba(43, 36, 34, .06);

  /* 自研线条图标（24×24 viewBox，stroke 取 currentColor 由 mask 上色） */
  --ico-member: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E");
  --ico-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h11v9h-11z'/%3E%3Cpath d='M13.5 10.5h4l3 3v2.5h-7z'/%3E%3Ccircle cx='7' cy='18.5' r='1.8'/%3E%3Ccircle cx='17' cy='18.5' r='1.8'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --ico-price: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7l9 9-7 7-9-9z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
  --ico-content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2.5'/%3E%3Cpath d='M7.5 9h9M7.5 13h9M7.5 17h5'/%3E%3C/svg%3E");
  --ico-dish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a8 8 0 0 1 16 0'/%3E%3Cpath d='M2.5 11h19'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='19' r='1.6'/%3E%3C/svg%3E");
  --ico-service: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Crect x='2.6' y='13' width='4' height='6' rx='1.6'/%3E%3Crect x='17.4' y='13' width='4' height='6' rx='1.6'/%3E%3C/svg%3E");
  --ico-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4 17l5-4.5 3.5 3 3-2.5L20 17'/%3E%3C/svg%3E");
  --ico-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l5.5-2.5 7 2.5 5.5-2.5v13l-5.5 2.5-7-2.5L3 19.5z'/%3E%3Cpath d='M8.5 4v13M15.5 6.5v13'/%3E%3C/svg%3E");
  /* 订单：单据 + 折角，比「购物车」更像「单子」，贴合接单场景 */
  --ico-order: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3h9l4.5 4.5V21h-13.5z'/%3E%3Cpath d='M14.5 3v4.5H19'/%3E%3Cpath d='M8.5 12h7M8.5 15.5h4.5'/%3E%3C/svg%3E");
  /* 概览：仪表盘 */
  --ico-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='4.5' rx='2'/%3E%3Crect x='13.5' y='10.5' width='7.5' height='10.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/svg%3E");
  --ico-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3C/svg%3E");
  /* 支付：银行卡 + 中间一道磁条，区别于「价格」的标签造型 */
  --ico-pay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M6 14.5h5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ══ 整体外壳：左导航 + 右主区 ══ */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

/* ── 左侧导航栏 ── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--line);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}

.sidebar__logo {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-red), var(--brand-yellow));
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sidebar__brandtext { min-width: 0; }
.sidebar__name { font-weight: 700; font-size: 14px; }
.sidebar__sub { font-size: 11px; color: var(--sub); }

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px;
}

.sidebar__sect {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--sub);
  text-transform: uppercase;
}
/* 第二段（内容与配送）与上一段之间留白，视觉上分出「改规则」与「改内容」 */
.sidebar__sect--gap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.navitem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.navitem:hover { background: var(--soft); }

.navitem.on {
  background: #FDF1EC;
  color: var(--brand-red);
  font-weight: 600;
}

.navitem__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navitem__count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--sub);
  flex-shrink: 0;
}

.navitem.on .navitem__count { background: #fff; color: var(--brand-red); }

/* 待办角标：订单还没处理完时用红底白字，比灰色数字更抓眼，防止漏单 */
.navitem__count--alert { background: var(--brand-red) !important; color: #fff !important; }

/* 自研线条导航图标：用 background mask 上色，便于跟随选中态变色 */
.nico {
  width: 17px; height: 17px;
  flex-shrink: 0;
  background: currentColor;
  opacity: .72;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.navitem.on .nico { opacity: 1; }

.nico--member  { -webkit-mask-image: var(--ico-member);  mask-image: var(--ico-member); }
.nico--truck   { -webkit-mask-image: var(--ico-truck);   mask-image: var(--ico-truck); }
.nico--pin     { -webkit-mask-image: var(--ico-pin);     mask-image: var(--ico-pin); }
.nico--price   { -webkit-mask-image: var(--ico-price);   mask-image: var(--ico-price); }
.nico--content { -webkit-mask-image: var(--ico-content); mask-image: var(--ico-content); }
.nico--dish    { -webkit-mask-image: var(--ico-dish);    mask-image: var(--ico-dish); }
.nico--service { -webkit-mask-image: var(--ico-service); mask-image: var(--ico-service); }
.nico--image   { -webkit-mask-image: var(--ico-image);   mask-image: var(--ico-image); }
.nico--map     { -webkit-mask-image: var(--ico-map);     mask-image: var(--ico-map); }
.nico--order   { -webkit-mask-image: var(--ico-order);   mask-image: var(--ico-order); }
.nico--dash    { -webkit-mask-image: var(--ico-dash);    mask-image: var(--ico-dash); }
.nico--dot     { -webkit-mask-image: var(--ico-dot);     mask-image: var(--ico-dot); }
.nico--pay     { -webkit-mask-image: var(--ico-pay);     mask-image: var(--ico-pay); }

.sidebar__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

/* ── 右侧主区 ── */
.main { min-width: 0; display: flex; flex-direction: column; }

.main__head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: rgba(251, 246, 238, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.main__titlebox { min-width: 0; flex: 1; }
.main__head h1 { margin: 0; font-size: 16px; }
.main__head p { margin: 3px 0 0; font-size: 12px; color: var(--sub); }

.main__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.main__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 20px 24px 90px;
  align-items: start;
}

.conn { font-size: 12px; padding: 4px 10px; border-radius: 999px; display: inline-block; }
.conn--ok { background: #EEF6EA; color: var(--brand-green); }
.conn--bad { background: #FDECEC; color: var(--brand-red); }

.panel { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
/* 表单与地图互斥地占用左列：同处 grid-column 1 / grid-row 1，靠 .on 切换谁可见 */
.panel--form { display: none; grid-column: 1; grid-row: 1; }
.panel--form.on { display: block; }
.panel--map { display: none; grid-column: 1; grid-row: 1; }
.panel--map.on { display: block; }
.panel--recipes { display: none; grid-column: 1; grid-row: 1; }
.panel--recipes.on { display: block; }
.panel--dishes { display: none; grid-column: 1; grid-row: 1; }
.panel--dishes.on { display: block; }
.panel--overview { display: none; grid-column: 1; grid-row: 1; }
.panel--overview.on { display: block; }
.panel--orders { display: none; grid-column: 1; grid-row: 1; }
.panel--orders.on { display: block; }

/* ── 今日概览 ── */
.ovw { padding: 18px 20px 22px; }

.ovw__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(120deg, #C93B27, #E0653F 62%, #F2A93B);
  border-radius: var(--r);
  padding: 18px 20px;
  color: #fff;
}
.ovw__hero-l { min-width: 0; }
.ovw__hello { font-size: 12px; opacity: .88; }
.ovw__big { font-size: 30px; font-weight: 700; letter-spacing: .5px; margin-top: 2px; }
.ovw__big small { font-size: 13px; font-weight: 500; opacity: .9; margin-left: 4px; }
.ovw__hero-r { text-align: right; font-size: 12px; opacity: .92; flex-shrink: 0; }

/* 四张待办卡：数字大、字说人话，扫一眼就知道该干什么 */
.ovw__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.ovw__card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, background .15s;
}
.ovw__card:hover { border-color: var(--brand-yellow); background: #FFFCF6; }
.ovw__card-n { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--text); }
.ovw__card-l { font-size: 12px; color: var(--sub); margin-top: 3px; }
.ovw__card--warn .ovw__card-n { color: var(--brand-red); }
.ovw__card--go .ovw__card-n { color: var(--brand-green); }

.ovw__sect { margin-top: 22px; }
.ovw__sect-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
}
.ovw__sect-head h3 { margin: 0; font-size: 14px; }
.ovw__sect-head p { margin: 0; font-size: 12px; color: var(--sub); }
.ovw__sect-head .ovw__more {
  margin-left: auto; font-size: 12px;
  color: var(--brand-red); background: none; border: 0;
  cursor: pointer; font-family: inherit; padding: 0;
}
.ovw__sect-head .ovw__more:hover { text-decoration: underline; }

/* 概览里的订单行：复用订单页的款式，只做尺寸收敛 */
.ovw__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  font: inherit;
  width: 100%;
}
.ovw__row:hover { background: var(--soft); }
.ovw__row-main { min-width: 0; flex: 1; }
.ovw__row-id { font-size: 13px; font-weight: 600; }
.ovw__row-meta { font-size: 12px; color: var(--sub); margin-top: 2px; }
.ovw__row-amt { font-size: 14px; font-weight: 700; color: var(--price); flex-shrink: 0; }

.ovw__stat-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.ovw__stat {
  flex: 1 1 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.ovw__stat-n { font-size: 18px; font-weight: 700; }
.ovw__stat-l { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* ── 订单管理 ── */
.order-page { display: grid; grid-template-columns: 292px minmax(0, 1fr); }

.order-page__list {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.order-page__edit { min-width: 0; }
.order-page__acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.order-page__acts .btn[disabled] { opacity: .4; cursor: not-allowed; }

.order-page__filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px 2px;
}
.ofilter {
  font: inherit; font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--sub);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.ofilter:hover { border-color: var(--brand-yellow); }
.ofilter.on {
  background: #FDF1EC;
  border-color: var(--brand-red);
  color: var(--brand-red);
  font-weight: 600;
}
.ofilter__n {
  font-size: 10px; font-weight: 600;
  background: var(--soft); color: var(--sub);
  border-radius: 999px; padding: 0 5px;
}
.ofilter.on .ofilter__n { background: var(--brand-red); color: #fff; }

.order-page__search { padding: 8px 12px 6px; }

.odlist { overflow-y: auto; max-height: 640px; padding: 4px 8px 10px; }
.odlist__empty { padding: 26px 12px; text-align: center; font-size: 12px; color: var(--sub); }

.odcard {
  display: block; width: 100%; text-align: left;
  font: inherit;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 4px;
  background: #fff;
  cursor: pointer;
}
.odcard:hover { background: var(--soft); }
.odcard.on { background: #FDF1EC; border-color: #F3D3C9; }

/* 本次刷新时才出现的单子，给个「新」角标，老板一眼看到 */
.odcard--new { border-color: #F3D3C9; background: #FFFDFB; }
.odcard--new:hover { background: #FDF1EC; }
.odcard__new {
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--brand-red); color: #fff;
  flex-shrink: 0;
}
.odcard__top { display: flex; align-items: center; gap: 8px; }
.odcard__id { font-size: 12px; font-weight: 600; color: var(--text); }
.odcard__amt { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--price); }
.odcard__mid { font-size: 12px; color: var(--sub); margin-top: 3px; }
.odcard__bot { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 状态色标：待配送=姜黄待办、配菜/配送中=青蒜绿进行、已送达=灰、取消/退款=红 */
.st {
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  flex-shrink: 0;
}
.st--pending_pay      { background: #FDF1E4; color: #B4761F; }
.st--pending_delivery { background: #FFF4DE; color: #A9691A; }
.st--preparing        { background: #EEF6EA; color: #4A7A38; }
.st--delivering       { background: #E6F2FB; color: #2C6C97; }
.st--done             { background: var(--soft);  color: var(--sub); }
.st--canceled         { background: #F2ECEA; color: #94867E; }
.st--refunded         { background: #FDECEC; color: var(--brand-red); }

.pill { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--soft); color: var(--sub); }
.pill--warn { background: #FDECEC; color: var(--brand-red); font-weight: 600; }

/* 订单详情 */
.odetail { padding: 4px 20px 22px; }

.od__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px; margin-bottom: 14px;
}
.od__id { font-size: 17px; font-weight: 700; }
.od__bar-amt { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--price); }

.od__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 22px;
  margin-bottom: 16px;
}
.od__f { min-width: 0; }
.od__f-k { font-size: 11px; color: var(--sub); }
.od__f-v { font-size: 13px; margin-top: 2px; word-break: break-all; }
.od__f-v b { font-weight: 600; }

.od__sec {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.od__sec-h {
  padding: 8px 12px;
  background: var(--soft);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.od__sec-h .od__sec-hint { font-weight: 400; color: var(--sub); font-size: 11px; margin-left: auto; }
.od__sec-b { padding: 10px 12px; }

/* 商品明细行（改内容时变成可编辑的数字框） */
.oditem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.oditem:last-child { border-bottom: 0; }
.oditem__name { font-size: 13px; min-width: 0; flex: 1; }
.oditem__spec { font-size: 11px; color: var(--sub); }
.oditem__price { font-size: 12px; color: var(--sub); flex-shrink: 0; }
.oditem__sum { font-size: 13px; font-weight: 600; width: 62px; text-align: right; flex-shrink: 0; }
.oditem__qty { width: 58px; flex-shrink: 0; }
.oditem__del {
  border: 0; background: none; cursor: pointer;
  color: var(--sub); font-size: 13px; flex-shrink: 0;
  padding: 2px 4px; border-radius: 6px; font-family: inherit;
}
.oditem__del:hover { color: var(--brand-red); background: #FDECEC; }

/* 金额构成：像小票一样右对齐 */
.od__money { margin-left: auto; max-width: 290px; }
.od__money-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 3px 0; color: var(--sub);
}
.od__money-row b { color: var(--text); font-weight: 500; }
.od__money-row--cut b { color: var(--brand-green); }
.od__money-row--total {
  border-top: 1px solid var(--line);
  margin-top: 5px; padding-top: 7px;
  font-size: 14px;
}
.od__money-row--total b { color: var(--price); font-weight: 700; font-size: 16px; }

/* 时间线 */
.odtl { position: relative; padding-left: 18px; }
.odtl__i {
  position: relative;
  padding: 0 0 12px;
  font-size: 12px;
}
.odtl__i:last-child { padding-bottom: 0; }
.odtl__i::before {
  content: '';
  position: absolute;
  left: -14px; top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.odtl__i--on::before { background: var(--brand-green); }
.odtl__i:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -11px; top: 13px; bottom: 1px;
  width: 1px; background: var(--line);
}
.odtl__t { color: var(--sub); font-size: 11px; margin-left: 6px; }
.odtl__x--on { color: var(--text); font-weight: 500; }

/* 驳回理由等内联输入 */
.od__inline {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px;
}
.od__inline .input { flex: 1; }
.od__hint { font-size: 12px; color: var(--sub); margin: 0 0 8px; }
.od__hint b { color: var(--text); }

/* ── 菜品管理 ── */
.dish-page { display: grid; grid-template-columns: 236px minmax(0, 1fr); }

.dish-page__list {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.dish-page__edit { min-width: 0; }

.dish-page__acts { display: flex; gap: 8px; margin-top: 12px; }

.dish-page__search { padding: 10px 14px 4px; }

.dishlist { flex: 1; padding: 6px 8px 12px; overflow-y: auto; }

.ddish {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.ddish:hover { background: var(--soft); }
.ddish.on { background: #FDF1EC; }
.ddish__name { font-size: 13px; font-weight: 500; color: var(--text); }
.ddish.on .ddish__name { color: var(--brand-red); font-weight: 600; }
.ddish.off .ddish__name { color: var(--sub); text-decoration: line-through; }
.ddish__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--sub);
}

.pill {
  font-style: normal;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--sub);
  border: 1px solid var(--line);
}
.pill--warn { background: #FEF6E9; color: var(--warning); border-color: #F6E3C4; }

/* 分类管理 */
.dish-page__cats { border-top: 1px solid var(--line); padding: 10px 10px 14px; }
.dish-page__cats-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--sub);
  letter-spacing: .04em;
  padding: 2px 4px 8px;
}
.catlist { display: flex; flex-direction: column; gap: 4px; }
.catrow { display: flex; align-items: center; gap: 4px; }
.catrow__name { flex: 1; min-width: 0; }
.catrow__count { font-size: 10px; color: var(--sub); white-space: nowrap; }

/* 菜品编辑表单 */
.dishform { padding: 4px 22px 22px; }
.dform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  padding: 14px 0 6px;
}
.dform__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dform__f > span { font-size: 12px; color: var(--sub); }
.dform__f--block { padding: 12px 0; border-top: 1px dashed var(--line); }
.dform__f--block > span { margin-bottom: 2px; }

.dform__recipe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}

.dform__switches {
  border-top: 1px dashed var(--line);
  padding-top: 4px;
}

.dform__note {
  font-size: 11px;
  color: var(--sub);
  margin: 12px 0 0;
  line-height: 1.7;
}
.dform__note code { background: var(--soft); padding: 1px 6px; border-radius: 5px; }

@media (max-width: 1180px) {
  .dish-page { grid-template-columns: minmax(0, 1fr); }
  .dish-page__list { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
  .dishlist { display: flex; flex-wrap: wrap; gap: 4px; max-height: 180px; }
  .ddish { width: auto; }
  .dform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 菜谱图文编辑器 ── */
.recipe-page { display: grid; grid-template-columns: 184px minmax(0, 1fr); }

.recipe-page__list { border-right: 1px solid var(--line); }
.recipe-page__edit { min-width: 0; }

.recipe-page__acts { display: flex; gap: 8px; margin-top: 12px; }

.recipe-dishlist { padding: 8px 8px 16px; }

.rdish {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.rdish:hover { background: var(--soft); }
.rdish.on { background: #FDF1EC; }
.rdish__name { font-size: 13px; font-weight: 500; color: var(--text); }
.rdish.on .rdish__name { color: var(--brand-red); font-weight: 600; }
.rdish__meta { font-size: 11px; color: var(--sub); }

.recipe-steps { padding: 6px 22px 20px; }

.rstep {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.rstep:last-child { border-bottom: none; }

.rstep__no {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

.rstep__body { flex: 1; min-width: 0; }

.rstep__imgrow { display: flex; align-items: flex-start; gap: 12px; }

.rstep__thumb {
  width: 132px; height: 92px;
  flex-shrink: 0;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 11px;
  color: var(--sub);
  text-align: center;
  line-height: 1.4;
}
.rstep__thumb img { width: 100%; height: 100%; object-fit: cover; }

.rstep__imgacts { display: flex; flex-direction: column; gap: 6px; }

.rstep__text { width: 100%; margin-top: 10px; resize: vertical; font: inherit; }

.rstep__acts { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.rstep__empty { padding: 40px 0; text-align: center; }
.rstep__empty p { margin: 0 0 6px; font-size: 13px; }

.btn--dirty { box-shadow: 0 0 0 3px rgba(201, 59, 39, .16); }

@media (max-width: 1180px) {
  .recipe-page { grid-template-columns: minmax(0, 1fr); }
  .recipe-page__list { border-right: none; border-bottom: 1px solid var(--line); }
  .recipe-dishlist { display: flex; flex-wrap: wrap; gap: 4px; }
  .rdish { width: auto; }
}

.panel__head { padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.panel__head h2 { margin: 0; font-size: 16px; }
.panel__head p { margin: 6px 0 0; font-size: 12px; color: var(--sub); }
/* 地图页的表头在地图下方，避免把地图挤下去 */
.panel__head--below { border-bottom: none; border-top: 1px solid var(--line); }

/* ── 表单 ── */
.form { padding: 4px 0 20px; }

.group { border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: none; }

.group__head { padding: 18px 22px 10px; }
.group__head h3 { margin: 0; font-size: 14px; color: var(--brand-red); }
.group__head p { margin: 4px 0 0; font-size: 12px; color: var(--sub); }

/* 分组改动概览：一眼看出这组有几项不是默认值 */
.group__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 9px;
  background: #FEF6E9;
  border: 1px solid #F6E3C4;
  font-size: 12px;
  color: #8A6216;
}
.group__summary b { color: #A9741B; }
.group__summary-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-yellow);
  flex-shrink: 0;
}
.group__summary-reset {
  margin-left: auto;
  border: 1px solid #E8D2A8;
  background: #fff;
  color: #8A6216;
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.group__summary-reset:hover { border-color: var(--brand-yellow); color: #7A5510; }
.group__summary--clean {
  background: var(--soft);
  border-color: var(--line);
  color: var(--sub);
}

.group__search { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.group__search .input { flex: 1; }
.group__search-hint { font-size: 11px; color: var(--sub); white-space: nowrap; }
.group__empty { padding: 28px 0; text-align: center; font-size: 13px; color: var(--sub); }

.group__body { padding: 0 22px 14px; }

.field {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 0 9px 12px;
  border-bottom: 1px dashed var(--line);
  position: relative;
  border-radius: 0 8px 8px 0;
  transition: background .15s;
}
.field:last-child { border-bottom: none; }
.field--block { display: block; }
.field--switch { justify-content: space-between; }

/* 已被改动的字段：左侧竖线 + 淡底，老板一眼扫出「我动过哪几项」 */
.field--changed { background: #FFFBF4; }
.field--changed::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--brand-yellow);
}

.field__main { min-width: 0; flex: 1; }
.field__label {
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
/* 参数说明：老板就是靠这行字理解「这一项改了会怎样」，
   所以不能再是 11px 的浅灰附属文字，要能一眼看清、也方便读长句 */
.field__tip {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--sub);
  max-width: 62ch;
}
.field__ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.field__unit { font-size: 12px; color: var(--sub); }

/* 「已改」小签：配合左侧竖线，明确指出这一项偏离了默认值 */
.field__badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-yellow);
  color: #fff;
  cursor: help;
}

/* 未改动时的默认值灰字：随时能确认「原本是多少」 */
.field__def { font-size: 11px; font-weight: 400; color: var(--sub); opacity: .8; }

/* 单项「恢复默认」：平时低调，悬停该字段才显形，避免干扰阅读 */
.field__reset {
  border: none;
  background: transparent;
  color: var(--sub);
  font: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.field:hover .field__reset { opacity: 1; }
.field__reset:hover { color: var(--brand-red); background: #FDECEC; }
/* 触摸屏没有 hover，直接常显 */
@media (hover: none) { .field__reset { opacity: 1; } }

.field--block .field__label { display: flex; margin-bottom: 6px; }
.field--block .field__reset { display: inline-block; margin-bottom: 6px; }

.input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  outline: none;
  resize: vertical;
}
.input:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(201, 59, 39, .08); }
.input--sm { width: 128px; text-align: right; }
.input--xs { width: 100%; padding: 4px 6px; font-size: 12px; }
/* 密钥类输入：单行密钥 / 多行私钥，等宽字体便于核对 */
.input--key { width: min(360px, 100%); text-align: left; font-family: Consolas, "Courier New", monospace; letter-spacing: .5px; }
.input--code { font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.55; white-space: pre; }

/* 开关 */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: .2s;
  cursor: pointer;
}
.switch__slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.switch input:checked + .switch__slider { background: var(--brand-red); }
.switch input:checked + .switch__slider::before { transform: translateX(18px); }

/* 按钮 */
.btn {
  border: none;
  background: var(--brand-red);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { opacity: .92; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.btn--ghost:hover { border-color: var(--brand-red); color: var(--brand-red); }
.btn--danger { background: #FDECEC; color: var(--brand-red); }
.btn--sm { padding: 6px 14px; font-size: 12px; }
.btn--xs { padding: 3px 9px; font-size: 11px; }

/* 星期 chip */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--sub);
  padding: 7px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chip.on { background: var(--brand-red); border-color: var(--brand-red); color: #fff; font-weight: 600; }

/* 配送时段表（开始 / 结束 / 删） */
.ftable { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ftable th {
  font-size: 11px; color: var(--sub); font-weight: 500;
  text-align: left; padding: 4px 4px 6px;
}
.ftable td { padding: 3px 4px; }
.ftable--slots { max-width: 320px; }

/* 子字段组（协议正文：每份协议一个输入块）*/
.sub-fields {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  background: var(--soft);
  border-radius: 10px;
}
.sub-field { display: flex; flex-direction: column; gap: 4px; }
.sub-field__label { font-size: 12px; color: var(--sub); }

/* 店铺中心点：地址 + 去地图定位 + 只读坐标 + 备注 */
.center-field { display: flex; flex-direction: column; gap: 10px; }
.center-field__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 10px;
}
.center-field__addr { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.center-field__k { font-size: 11px; color: var(--sub); }
.center-field__addr b { font-size: 13px; word-break: break-all; }
.center-field__row .btn { flex-shrink: 0; }
.center-field__lab {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--sub);
}
.center-field__lab .input { flex: 1; min-width: 0; }
.center-field__lab .input[readonly] {
  background: var(--soft);
  color: var(--sub);
  font-family: ui-monospace, monospace;
  cursor: default;
}

/* 图片字段 */
.img-field { display: flex; align-items: center; gap: 10px; }
.img-field .input { flex: 1; }
.img-field__box {
  width: 44px; height: 44px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 10px; color: var(--sub);
  background: var(--soft);
}
.img-field__box img { width: 100%; height: 100%; object-fit: cover; }

/* ── 配送范围地图 ── */
.map-toolbar { padding: 18px 18px 0; }
.map-search { display: flex; gap: 8px; align-items: center; }
.map-search .input { flex: 1; max-width: 460px; }
.map-toolbar__hint { font-size: 12px; color: var(--sub); margin-top: 8px; }
.map-results { margin-top: 10px; }
.map-results:not(:empty) {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  max-width: 560px;
}
.map-results__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}
.map-results__item:last-child { border-bottom: none; }
.map-results__item:hover { background: var(--soft); }
.map-results__item b { font-weight: 600; }
.map-results__item span { font-size: 11px; color: var(--sub); }
.map-results__item.muted { cursor: default; font-size: 12px; }
.map-results__item.muted:hover { background: transparent; }

/* 订单详情里的顾客定位 */
.od__geo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.od__geo-coord {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: var(--soft);
  padding: 3px 8px;
  border-radius: 6px;
}
.od__geo .btn { text-decoration: none; }
.od__geo .muted { font-size: 12px; color: var(--sub); }

/* 订单详情里的内嵌地图：不用跳走就能看到顾客在哪 */
.od__map {
  height: 260px;
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft);
  border: 1px solid var(--line);
}
.od__map-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sub);
  line-height: 1.5;
}
.od__map-off {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--sub);
}
.od__map-off b { color: var(--text); font-size: 13px; }
.od__map-off p { margin: 0; font-size: 12px; line-height: 1.6; max-width: 46ch; }

#map { padding: 18px; }

.map-canvas {
  width: 100%;
  height: 460px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--soft);
  cursor: crosshair;
}

.map-placeholder {
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 16px;
}
.map-placeholder p { margin: 0 0 6px; font-size: 13px; }
.muted { color: var(--sub); font-size: 12px; }

.map-info { display: flex; flex-wrap: wrap; gap: 22px; margin: 16px 0; }
.map-info__item { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.map-info__item span { color: var(--sub); font-size: 11px; }
.map-info__item .ok { color: var(--brand-green); }
.map-info__item .off { color: var(--sub); }

.map-tip { font-size: 12px; color: var(--sub); line-height: 1.7; }
.map-tip code { background: var(--soft); padding: 1px 6px; border-radius: 5px; font-size: 11px; }

/* ── 地图页的两把 Key（唯一编辑入口，参数组里只做指示） ── */
.map-keys { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 16px; }
.map-keys__row {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid var(--line, #EFE6DA);
  border-radius: 10px;
  padding: 12px 14px 12px 16px;
}
/* 改了还没保存：左侧姜黄竖线，与参数组的「已改」视觉保持一致 */
.map-keys__row--changed { border-left: 3px solid var(--brand-yellow, #F2A93B); }
.map-keys__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.map-keys__state {
  font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px;
  background: var(--soft, #F7F2EA); color: var(--sub, #8C8078);
}
.map-keys__state.ok { background: #EDF5E8; color: var(--brand-green, #5C8A4A); }
.map-keys__state.off { background: #FDF1EC; color: var(--brand-red, #C93B27); }
.map-keys__input { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.map-keys__tip { font-size: 11px; color: var(--sub, #8C8078); line-height: 1.6; margin: 7px 0 0; }
.map-keys__tip b { color: var(--text, #2B2422); }
.map-keys__tip code { background: var(--soft, #F7F2EA); padding: 1px 5px; border-radius: 4px; }

/* 参数组里的地图 Key 指示块 */
.field__keyrow { display: flex; align-items: center; gap: 10px; }
.field__keystate {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: var(--soft, #F7F2EA); color: var(--sub, #8C8078);
}
.field__keystate.ok { background: #EDF5E8; color: var(--brand-green, #5C8A4A); }
.field__keystate.off { background: #FDF1EC; color: var(--brand-red, #C93B27); }

/* ── 菜品点选器（首页今日推荐 / 销量榜） ── */
.dishpick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dishpick__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--soft, #F7F2EA);
  border: 1px solid var(--line, #EFE6DA);
  border-radius: 8px;
  font-size: 12px;
}
/* 已下架 / 已删除的菜：置灰但仍显示，让老板知道该换掉了 */
.dishpick__item--off { opacity: .55; }
.dishpick__no {
  flex: 0 0 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 50%; background: var(--brand-red, #C93B27); color: #fff;
  font-size: 11px; font-weight: 700;
}
.dishpick__item--off .dishpick__no { background: var(--sub, #8C8078); }
.dishpick__nm { flex: 1; min-width: 0; color: var(--text, #2B2422); font-weight: 600; }
.dishpick__px { color: var(--brand-red, #C93B27); font-weight: 700; }
.dishpick__flag {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--line, #EFE6DA); color: var(--sub, #8C8078);
  font-size: 10px; font-weight: 400;
}
.dishpick__ops { display: flex; gap: 4px; }
.dishpick__ops .btn:disabled { opacity: .35; cursor: not-allowed; }
.dishpick__empty {
  font-size: 12px; color: var(--sub, #8C8078); line-height: 1.6;
  padding: 10px 0 4px; margin: 0;
}
.dishpick__foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dishpick__count { font-size: 11px; color: var(--sub, #8C8078); }

/* 选菜弹层 */
.pickmodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.pickmodal__mask { position: absolute; inset: 0; background: rgba(43, 36, 34, .45); }
.pickmodal__box {
  position: relative;
  width: min(680px, 92vw); max-height: 82vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.pickmodal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #EFE6DA);
}
.pickmodal__head b { font-family: var(--font-brand); font-size: 15px; color: var(--text, #2B2422); }
.pickmodal__search { flex: 1; min-width: 0; }
.pickmodal__list { overflow: auto; padding: 6px 16px 12px; }
.pickmodal__hint { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line, #EFE6DA); font-size: 11px; color: var(--sub, #8C8078); }
.dishpick__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line, #EFE6DA);
  font-size: 12px; cursor: pointer;
}
.dishpick__row:last-child { border-bottom: none; }
.dishpick__row--off { opacity: .5; cursor: not-allowed; }
.dishpick__row input { flex: 0 0 auto; }
.dishpick__row-nm { flex: 1; min-width: 0; color: var(--text, #2B2422); }
.dishpick__row-cat { color: var(--sub, #8C8078); font-size: 11px; }
.dishpick__row-px { color: var(--brand-red, #C93B27); font-weight: 700; min-width: 60px; text-align: right; }

.map-list { display: flex; flex-direction: column; }
.map-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.map-row:last-child { border-bottom: none; }
.map-row b { min-width: 120px; }
.map-row span { color: var(--sub); }
.map-row__geo { margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; }

.empty { padding: 20px; text-align: center; color: var(--sub); font-size: 12px; }

/* ── 保存条 ── */
.save-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120%);
  display: flex; align-items: center; gap: 20px;
  background: #2B2422;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(43,36,34,.3);
  font-size: 13px;
  transition: transform .25s;
  z-index: 60;
}
.save-bar.show { transform: translate(-50%, 0); }
.save-bar b { color: var(--brand-yellow); }
.save-bar__acts { display: flex; gap: 8px; }
.save-bar .btn--ghost { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); }
.save-bar .btn--ghost:hover { color: #fff; border-color: #fff; }

/* ── Toast ── */
.toast {
  position: fixed;
  left: 50%; top: 22px;
  transform: translate(-50%, -140%);
  background: #2B2422;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  transition: transform .25s;
  z-index: 70;
}
.toast.show { transform: translate(-50%, 0); }
.toast.warn { background: #A9741B; }
.toast.err { background: var(--brand-red); }

/* 启动失败 */
.boot-err { padding: 40px 24px; text-align: center; }
.boot-err h3 { margin: 0 0 8px; color: var(--brand-red); }
.boot-err pre {
  background: var(--soft);
  padding: 12px; border-radius: 8px;
  font-size: 12px; text-align: left;
  display: inline-block; margin: 10px 0;
}

/* 窄屏：侧栏收窄 */
@media (max-width: 820px) {
  .shell { grid-template-columns: 68px minmax(0, 1fr); }
  .sidebar__brandtext, .sidebar__sect, .navitem__label, .navitem__count { display: none; }
  .navitem { justify-content: center; padding: 11px 0; }
  .sidebar__brand { justify-content: center; padding: 16px 0; }
  /* 窄屏也要能退出登录，所以底栏不能整块藏掉，只把文字收起来 */
  .sidebar__foot { display: flex; padding: 10px 4px; }
  .sidebar__acct { flex-direction: column; gap: 4px; margin-top: 6px; }
  .sidebar__who { display: none; }
  .main__head, .main__body { padding-left: 14px; padding-right: 14px; }
}

/* ══ 登录 / 首次设置遮罩 ══
   未登录时盖住整个后台。后端 /api/admin/* 与写配置都需要管理员 token，
   这层只是「别让老板对着一个点了没反应的界面」，真正的闸在服务端。 */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.gate.on { display: flex; }

.gate__card {
  width: 100%;
  max-width: 380px;
  padding: 28px 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.gate__logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}
.gate__card h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}
.gate__sub {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sub);
}
.gate__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--sub);
}
.gate__card .input {
  width: 100%;
  margin-bottom: 12px;
}
.gate__err {
  min-height: 18px;
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--brand-red);
}
.gate__submit { width: 100%; }
.gate__back { width: 100%; margin-top: 8px; }
.gate__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--sub);
}
/* 遮罩内一律听 hidden 的（有些元素设了 display，会盖掉默认的 [hidden] 行为） */
#login-gate [hidden] { display: none !important; }

/* ── 侧栏底部的账号行 ── */
.sidebar__acct {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.sidebar__acct[hidden] { display: none !important; }
.sidebar__who {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--sub);
}

/* ══ 配送视图（配送员 / 用手机的老板）══
   单列卡片 + 点开详情 + 大按钮：这是手机上的主战场，不做并排两栏 */
.panel--delivery, .panel--accounts { display: none; grid-column: 1; grid-row: 1; }
.panel--delivery.on, .panel--accounts.on { display: block; }

.deliver { padding: 16px; }
.deliver__hint { padding: 30px 8px; text-align: center; color: var(--sub); font-size: 13px; }
.deliver__hint--bad { color: var(--brand-red); }
.deliver__sect { margin: 6px 2px 8px; font-size: 12px; color: var(--sub); font-weight: 500; }

.dcard {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.dcard:hover { border-color: var(--brand-red); }
.dcard--doing { border-left: 3px solid var(--brand-yellow); }
.dcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dcard__no { font-size: 12px; color: var(--sub); }
.dcard__st { padding: 2px 8px; font-size: 12px; border-radius: 20px; background: var(--soft); }
.dcard__when { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--brand-red); }
.dcard__who { margin-top: 6px; font-size: 13px; }
.dcard__cnt { margin-left: 8px; font-size: 12px; color: var(--sub); }
.dcard__addr { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--sub); }

.deliver__back { margin-bottom: 12px; }
.dbox {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.dbox__no { font-size: 12px; color: var(--sub); }
.dbox__when { margin: 4px 0 14px; font-size: 17px; font-weight: 500; color: var(--brand-red); }
.dbox__row { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dbox__k { flex: 0 0 52px; font-size: 13px; color: var(--sub); }
.dbox__v { flex: 1; min-width: 0; line-height: 1.55; word-break: break-all; }
.dbox__v--warn { color: var(--brand-red); }
.dlink { color: var(--brand-red); font-weight: 500; text-decoration: none; }
.dbox__acts { display: flex; gap: 8px; margin-top: 14px; }
.dbox__acts .btn { flex: 1; text-align: center; text-decoration: none; }
.dbox__sect { margin: 18px 0 8px; font-size: 12px; font-weight: 500; color: var(--sub); }
.dlist { margin: 0; padding: 0; list-style: none; }
.dlist li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dli__q { display: inline-block; min-width: 30px; color: var(--brand-red); font-weight: 500; }
.dli__spec { margin-left: 8px; font-size: 12px; color: var(--sub); }
.btn--block { display: block; width: 100%; margin-top: 20px; padding: 13px; font-size: 15px; }
.dbox__done { background: var(--brand-green); color: #fff; }
.dbox__end { margin-top: 20px; text-align: center; font-size: 13px; color: var(--sub); }

/* ══ 账号管理 ══ */
.accounts { padding: 16px; }
.acct-form {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.acct-form__t { font-size: 14px; font-weight: 500; }
.acct-form__tip { margin: 8px 0 14px; font-size: 12px; line-height: 1.6; color: var(--sub); }
.acct-form__row { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-form__row .input { flex: 1 1 150px; min-width: 0; }
.acct-form__msg { min-height: 18px; margin-top: 8px; font-size: 12px; color: var(--brand-red); }
.acct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.acct__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acct__name { font-size: 14px; font-weight: 500; }
.acct__role { padding: 2px 8px; font-size: 11px; border-radius: 20px; }
.acct__role--owner { background: #FAEEDA; color: #854F0B; }
.acct__role--delivery { background: #E6F1FB; color: #185FA5; }
.acct__online { font-size: 11px; color: var(--brand-green); }

/* ══ 手机端（H5）══
   后台本来是为电脑做的两栏界面。配送员要在手机上看单送货，
   所以窄屏改成「单列 + 列表→详情」的推拉式，并把侧边栏变成底部标签栏。 */
.order-page__back { display: none; }

@media (max-width: 700px) {
  /* 侧边栏 → 底部标签栏：竖排变横排，固定在屏幕底部 */
  .shell { grid-template-columns: minmax(0, 1fr); padding-bottom: 62px; }
  .sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    height: auto;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid var(--line);
    border-right: none;
    padding: 4px 6px;
    overflow-x: auto;
  }
  .sidebar__brand { display: none; }
  .sidebar__nav {
    display: flex;
    flex-direction: row;
    gap: 2px;
    flex: 1;
    padding: 0;
  }
  .sidebar__sect { display: none; }
  .navitem {
    flex: 1 0 auto;
    min-width: 62px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 8px;
    border-radius: 10px;
  }
  .navitem__label { font-size: 11px; }
  .navitem__count { position: static; margin-left: 2px; }
  .sidebar__foot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 0 4px; }
  .sidebar__who { max-width: 60px; font-size: 11px; }

  /* 主区让出空间 */
  .main__head { padding: 14px 14px 10px; }
  .main__titlebox h1 { font-size: 17px; }
  .main__titlebox p { display: none; }
  .main__body { padding: 12px 12px 20px; }

  /* 订单页：单列，列表 ↔ 详情 二选一 */
  .order-page { grid-template-columns: minmax(0, 1fr); }
  .order-page--detail .order-page__list { display: none; }
  .order-page:not(.order-page--detail) .order-page__edit { display: none; }
  .order-page__back { display: inline-block; }
  .order-page__acts { gap: 6px; }
  .order-page__acts .btn { flex: 1 1 44%; }

  /* 参数表单：单列，标签不左浮 */
  .field__row, .dform__grid, .dish-page, .recipe-page { grid-template-columns: minmax(0, 1fr) !important; }

  /* 触摸目标加大：悬停才出现的控件在手机上一律常显 */
  .btn--sm { padding: 9px 14px; font-size: 13px; }
  .btn--xs { padding: 6px 11px; font-size: 12px; }
  .input { padding: 9px 11px; }
  .field__reset { opacity: 1; }

  .deliver, .accounts { padding: 12px; }
  .save-bar { left: 0; right: 0; bottom: 62px; border-radius: 0; }
}