* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #E8542D;
  --primary-dark: #C9431F;
  --bg: #F5F3F0;
  --card: #FFFFFF;
  --text: #2E2C29;
  --muted: #8B8681;
  --line: #ECE6DE;
  --green: #2E9E63;
  --amber: #E8A33D;
  --red: #D64541;
  --blue: #3D7EDB;
  --sidebar: #2B2926;
}
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.page-hidden { display: none !important; }
button { cursor: pointer; font-family: inherit; }

/* ===== 登录 ===== */
.login-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2B2926, #4a3a2c);
}
.login-card {
  background: #fff; border-radius: 20px; padding: 44px 40px; width: 360px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-logo {
  width: 130px; height: 130px; margin: 0 auto 16px;
  object-fit: contain;
}
.login-card h1 { font-size: 20px; }
.login-sub { color: var(--muted); font-size: 12px; margin: 8px 0 24px; }
.login-card input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  margin-bottom: 12px; font-size: 15px; outline: none;
}
.login-card input:focus { border-color: var(--primary); }
.login-btn {
  width: 100%; padding: 13px; background: var(--primary); color: #fff; border: none;
  border-radius: 10px; font-size: 16px; font-weight: 600; margin-top: 6px;
}
.login-err { color: var(--red); font-size: 13px; min-height: 20px; }

/* ===== 布局 ===== */
.main-view { display: flex; min-height: 100vh; }
.sidebar {
  width: 200px; background: var(--sidebar); color: #E8E4DE; flex-shrink: 0;
  display: flex; flex-direction: column; padding: 18px 12px;
}
.side-logo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; padding: 6px 12px 22px; color: #F0B16B; }
.side-logo img { width: 46px; height: 46px; object-fit: contain; }
.side-logo span { font-size: 14px; color: #B9B3AC; font-weight: 400; margin-left: 4px; }
.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nav-item {
  text-align: left; padding: 12px 14px; border: none; background: transparent;
  color: #C9C4BC; font-size: 15px; border-radius: 10px;
}
.nav-item:hover { background: rgba(255,255,255,.06); }
.nav-item.active { background: var(--primary); color: #fff; }
.side-user { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.side-user span { font-size: 13px; color: #B9B3AC; }
.logout-btn { background: transparent; border: 1px solid #555; color: #B9B3AC; border-radius: 8px; padding: 5px 10px; font-size: 12px; }

.content { flex: 1; padding: 20px 24px; overflow-y: auto; }

/* ===== 触摸模式（平板 / 触屏一体机）===== */
/* ☰ 抽屉按钮 + 遮罩：只在触摸模式出现 */
.drawer-toggle {
  position: fixed; left: 12px; top: 12px; z-index: 80;
  width: 54px; height: 54px; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fff; font-size: 24px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); cursor: pointer;
}
.drawer-toggle:active { background: #F5F1EB; }
.drawer-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 65; }

/* 侧栏收成抽屉：默认滑出屏幕，点 ☰ 才进来 */
body.touch-mode .sidebar {
  position: fixed; left: 0; top: 0; height: 100vh; z-index: 70;
  transform: translateX(-100%); transition: transform .25s ease;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
}
body.touch-mode.drawer-open .sidebar { transform: translateX(0); }
/* 内容区给 ☰ 让位（侧栏收起后本来可以占满，但左上角要留给按钮） */
body.touch-mode .content { padding-left: 84px; }

/* 手指点：点击目标一律加大 */
body.touch-mode .nav-item { padding: 18px; font-size: 17px; }
body.touch-mode .btn-mini { padding: 12px 18px; font-size: 15px; min-height: 44px; }
body.touch-mode .head-tools select,
body.touch-mode .head-tools input { padding: 12px 14px; font-size: 16px; }
body.touch-mode .order-card { padding: 18px 20px; }
body.touch-mode .side-user { padding: 16px 12px; }
body.touch-mode .logout-btn { padding: 12px 16px; font-size: 15px; }
/* 触屏没有 hover：不去掉的话点过的卡片会一直"浮着"不还原 */
body.touch-mode .order-card:hover { transform: none; }
body.touch-mode .nav-item:hover { background: transparent; }
body.touch-mode .nav-item.active:hover { background: var(--primary); }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 20px; }
.head-tools { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.head-tools select, .head-tools input {
  padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff;
}
.btn-mini { padding: 8px 14px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; }
.btn-mini.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-mini.ghost { border: none; background: transparent; font-size: 16px; }
.btn-mini.danger { color: var(--red); border-color: #f3c9c9; }
.btn-mini.danger.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ===== 多选删除模式 ===== */
.oc-cb-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px;
  flex-shrink: 0;
}
.oc-cb-wrap input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer;
}
.order-card.selected-card {
  outline: 2px solid var(--primary); outline-offset: -2px;
  background: #FFF9F5;
}
/* 非可删除订单在多选模式下降低透明度，提示不可勾选 */
body[data-select-mode] .order-card:not(.selected-card):not(.done):not(.cancelled) { opacity: .55; }

.batch-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: #FFF3EE; border-radius: 10px;
  font-size: 13px; width: 100%; margin-top: 8px;
}
/* 计数在左，操作按钮整体靠右（margin-left:auto 把第一个按钮推到右边） */
#btn-batch-del { margin-left: auto; }
.batch-count { font-weight: 600; color: var(--primary); }

/* ===== 岗位多选（菜品表单） ===== */
.station-pick { margin-top: 2px; }
.station-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.station-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.station-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: 13px; background: #fff; cursor: pointer; user-select: none;
}
.station-check input { accent-color: var(--primary); width: 15px; height: 15px; }
.station-check small { color: var(--muted); font-size: 11px; }
.station-check.fixed { background: #f4f1ec; color: var(--muted); cursor: default; }
.station-check.linked { border-style: dashed; color: var(--muted); }
.station-tip { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.st-tag {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 8px;
  background: #fdeee8; color: var(--primary); margin-right: 4px; font-weight: 600;
}

/* ===== 桌台管理 ===== */
.table-admin { display: block; }
.table-area-group { margin-bottom: 20px; }
.tag-area-name {
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin-bottom: 8px; padding-left: 8px; border-left: 3px solid var(--primary);
}
.table-area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.table-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.table-card .tc-name { font-size: 16px; font-weight: 700; }
.table-card .tc-area {
  font-size: 11px; font-weight: 600; color: #fff; background: var(--primary);
  border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px;
}
.table-card .tc-size { font-size: 12px; color: var(--muted); }
.table-card .tc-seats { font-size: 13px; }
.table-card .tc-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ===== 区域管理弹窗 ===== */
.area-tip { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.area-list { max-height: 320px; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.area-row {
  display: flex; align-items: center; gap: 10px;
  background: #faf8f5; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.area-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.area-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.area-edit-input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--primary); border-radius: 6px; font-size: 14px; }
.area-actions { display: flex; gap: 6px; }
.area-add { display: flex; gap: 8px; }
.area-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.empty { color: var(--muted); font-size: 14px; padding: 40px 0; text-align: center; }

/* ===== 统计条（状态芯片；饭市筛选已上移到顶部工具栏下拉） ===== */
.stat-strip {
  display: flex; gap: 10px; margin-bottom: 16px;
}
.stat-chip-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stat-chip {
  background: var(--card); border-radius: 12px; padding: 10px 16px; display: flex; gap: 8px;
  align-items: center; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.04); border: 2px solid transparent; cursor: pointer;
}
.stat-chip.active { border-color: var(--primary); }
.stat-chip b { font-size: 18px; }
.stat-chip.urgent { border-color: var(--red); }

/* ===== 订单列表 ===== */
.order-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.order-card {
  background: var(--card); border-radius: 14px; padding: 14px 16px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); border-left: 4px solid var(--muted);
  transition: transform .12s, box-shadow .12s;
}
.order-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.09); }
.order-card.urgent { border-left-color: var(--red); background: #FFF6F4; }
.order-card.hold { border-left-color: var(--blue); }
.order-card.reserved { border-left-color: var(--amber); }
.order-card.prep { border-left-color: var(--amber); }
.order-card.cooking { border-left-color: var(--primary); }
.order-card.ready { border-left-color: var(--green); }
.order-card.served { border-left-color: var(--green); }
.order-card.done { opacity: .62; }
.oc-top { display: flex; justify-content: space-between; align-items: center; }
.oc-id { font-weight: 700; font-size: 15px; }
.oc-status { font-size: 12px; padding: 3px 8px; border-radius: 10px; font-weight: 600; }
.oc-status.reserved { background: #FFF0DB; color: #9A6B1F; }
.oc-status.prep { background: #FFF0DB; color: #9A6B1F; }
.oc-status.cooking { background: #FDEBE4; color: var(--primary); }
.oc-status.ready { background: #E7F6EC; color: var(--green); }
.oc-status.served { background: #E7F6EC; color: var(--green); }
.oc-status.done { background: #EEE; color: #777; }
.oc-tags { display: flex; gap: 5px; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 8px; }
.tag.urgent { background: var(--red); color: #fff; animation: blink 1s infinite; }
.tag.hold { background: #E3EDFB; color: var(--blue); }
.tag.changed { background: #FDE4E4; color: var(--red); }
@keyframes blink { 50% { opacity: .45; } }
/* ===== oc-mid: 第二行 —— 点菜时间 + 期望上菜时段 ===== */
.oc-mid { display: flex; gap: 14px; margin: 8px 0 6px; font-size: 13px; color: var(--muted); align-items: center; }
.oc-mid b { color: var(--text); font-weight: 600; }
.oc-slot { color: #E8A33D; font-size: 13px; }

/* ===== oc-info: 第三行 —— 台号(可点击) + 人数 + 排号 + 即上 ===== */
/* gap 用 10px（原来 14px）：这一行现在多了「即上」按钮，卡片内宽只有 ~250px，
 * 间距不收一点按钮就会掉到下一行，跟「排 N」分家。 */
.oc-info { display: flex; gap: 10px; margin-bottom: 8px; font-size: 13px; align-items: center; flex-wrap: wrap; }
.oc-table-btn {
  cursor: pointer; padding: 3px 10px; border-radius: 7px;
  border: 1.5px solid transparent; transition: all .15s;
  font-size: 13px;            /* "台" 字基础字号（label 小） */
}
.oc-table-btn b {             /* 台号数字 / 未分配 —— 加大加粗让后厨一眼看清 */
  font-size: 20px; font-weight: 700;
  margin-left: 3px;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.oc-table-btn:hover { background: #FFF6F2; border-color: var(--primary); }
.oc-table-btn:hover b { color: var(--primary); }
.oc-table-btn:active { transform: scale(.96); }
.oc-queue { color: #E8A33D; font-weight: 600; }
.oc-bot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.oc-items { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.oc-amount { font-weight: 700; font-size: 15px; color: var(--primary); }
.drag-over { outline: 2px dashed var(--primary); }
/* 拖动排序已废弃（改为点排号输入，见 orders.js 的 promptRank）。
 * 手柄保留在 DOM 里但隐藏 —— 留着会让店员以为还能拖，拖不动只会困惑。 */
.oc-drag { display: none; }
/* 排号按钮：点击弹出输入框调整出菜顺序 */
.oc-queue {
  padding: 2px 10px; border-radius: 7px;
  background: #FFF6F2; color: var(--primary);
  border: 1.5px solid #f6d9cd;
  font-size: 13px; cursor: pointer;
  transition: background .15s, transform .12s;
}
.oc-queue b { font-size: 17px; font-weight: 700; }
.oc-queue:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.oc-queue:active { transform: scale(.96); }
/* 「即上」按钮：切换这单的「做好即上」标记（后厨端口电话号码后红字显示）。
 * 未标记 = 灰描边；已标记 = 实心红 —— 一排卡片扫过去就能看出哪几单要优先出。
 * 尺寸刻意做小 + 负 margin 左移，让它紧贴在「排 N」右边、又不会把排号挤到下一行。 */
.oc-asap-btn {
  padding: 2px 7px; border-radius: 7px;
  background: #fff; color: var(--muted);
  border: 1.5px solid #E4DCD3;
  font-size: 13px; font-weight: 600; line-height: 21px; cursor: pointer;
  margin-left: -4px;
  transition: all .15s, transform .12s;
}
.oc-asap-btn:hover { border-color: var(--red); color: var(--red); }
.oc-asap-btn:active { transform: scale(.96); }
.oc-asap-btn.on {
  background: var(--red); border-color: var(--red); color: #fff;
}
/* 拖动中：跟手的浮起卡片 / 原位占位块（见 shared/sortable.js） */
.order-card.sort-dragging { box-shadow: 0 16px 40px rgba(0,0,0,.22); transform: none; opacity: .96; }
.sort-placeholder {
  border: 2px dashed var(--primary); background: #FFF6F2;
  border-radius: 14px; min-height: 96px;
}
/* 卡片上的取消订单按钮 */
.oc-cancel {
  font-size: 11px; color: var(--red); background: #fff; border: 1px solid #F0C8C5;
  border-radius: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.oc-cancel:hover { background: var(--red); color: #fff; }

/* ==================== 按「期望上菜时段」分组显示 ====================
 * 订单列表按时段分段：同一时段的单排在一起，段上方标注时段与张数。
 * 「做好即上」单独成组并**永远置顶** —— 它还没派时段、不会进后厨，混在时段里会被漏掉。
 *
 * 布局要点：标题是 #order-list 的**直接子元素**，但不匹配 .order-card，
 * 所以拖动排序（itemSelector: '.order-card'）会自然忽略它；
 * 又因为容器是 grid，标题必须 grid-column: 1 / -1 跨满整行，否则会占掉一个卡片列。 */
.group-title {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 6px 4px 8px;
  border-bottom: 1.5px solid var(--line);
}
.group-title:first-child { margin-top: 0; }
.gt-label { font-size: 15px; font-weight: 700; color: var(--text); }
.gt-count {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 9px;
}
.gt-tip { font-size: 12px; color: var(--primary); font-weight: 600; }
/* 「做好即上」组：主题色强调 + 提示闪动，提醒这批单要人工派时段 */
.group-title.asap { border-bottom-color: var(--primary); }
.group-title.asap .gt-label { color: var(--primary); }
.group-title.asap .gt-tip {
  background: var(--primary); color: #fff;
  border-radius: 8px; padding: 2px 9px; font-size: 11px;
  animation: blink 1.4s infinite;
}

/* 「做好即上」的订单卡片：整张描边（普通单只靠左侧色条区分状态），
 * 让店员一眼看出这批单还没派时段、后厨看不到。 */
.order-card.asap {
  border: 2px solid var(--primary);
  border-left-width: 6px;
  background: #FFF6F2;
}
/* 下班后即上（2点后/8点后）：已直接下发后厨，用蓝色区别于「待派发」的橙色 */
.order-card.offhour-asap {
  border: 2px solid #3B82C4;
  border-left-width: 6px;
  background: #F2F7FD;
}
.order-card.offhour-asap .asap-tag { background: #3B82C4; color: #fff; }
.tag.asap-tag { background: var(--primary); color: #fff; font-weight: 600; }

/* 改时段按钮：每张订单卡片都有。
 * 普通单是「顺手改一下」的次要操作 → 浅色描边，避免整屏按钮抢眼；
 * 「做好即上」的派发是**必须人工处理**的动作 → 保留主题色实心 + 加粗。 */
.oc-dispatch-row { margin-top: 10px; }
.oc-dispatch {
  width: 100%; padding: 7px; border-radius: 9px;
  background: #fff; color: var(--muted);
  border: 1.5px solid var(--line);
  font-size: 13px; cursor: pointer;
  transition: background .15s, transform .12s, color .15s, border-color .15s;
}
.oc-dispatch:hover { border-color: var(--primary); color: var(--primary); background: #FFF6F2; }
.oc-dispatch:active { transform: scale(.98); }
.oc-dispatch.asap {
  background: var(--primary); color: #fff;
  border-color: var(--primary); font-weight: 600;
}
.oc-dispatch.asap:hover { background: var(--primary-dark); color: #fff; }

/* 详情面板「上菜时段」行内的小「修改」按钮 */
.dp-slot-edit {
  margin-left: 8px; padding: 2px 8px;
  font-size: 11px; font-weight: 400;
  color: var(--primary); background: #fff;
  border: 1px solid #f0c8b8; border-radius: 6px;
  cursor: pointer; vertical-align: middle;
}
.dp-slot-edit:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 分组后拖动：占位块同样要跨满整行，免得把后面的卡片挤到下一行造成跳动 */
.sort-placeholder { grid-column: 1 / -1; }

/* ===== 订单详情侧栏 ===== */
.detail-panel {
  position: fixed; right: 0; top: 0; height: 100vh; width: 460px; max-width: 92vw;
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.15); z-index: 60;
  transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column;
}
.detail-panel.open { transform: translateX(0); }
.dp-mask { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 55; }
.dp-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dp-head h3 { flex: 1; font-size: 17px; }
#dp-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.dp-section { margin-bottom: 18px; }
.dp-section h4 { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 14px; }
.dp-grid .row { display: flex; justify-content: space-between; }
.dp-grid .row span { color: var(--muted); }
.dp-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px;
}
.dp-item .name { flex: 1; }
.dp-item .name .item-status { font-size: 11px; color: var(--amber); margin-left: 6px; }
.dp-item .locked { color: var(--amber); font-size: 11px; }
.dp-item .ops { display: flex; gap: 4px; }
.dp-item .ops button {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 7px; font-size: 12px;
}
.dp-item .ops button.danger { color: var(--red); border-color: #F0C8C5; }
/* 已取消/减到0的菜品：灰色 + 划线，不显示操作按钮 */
.dp-item-cancelled {
  opacity: .45;
  text-decoration: line-through;
  text-decoration-color: var(--red);
}
.dp-item-cancelled .item-status {
  color: var(--red) !important;
  font-weight: 600;
}
/* 金额可点击修改 */
.dp-item .amount[data-op="amount"] { cursor: pointer; }
.dp-item .amount[data-op="amount"]:hover { color: var(--primary); text-decoration: underline; }
/* 斤两可点击修改（称重菜）：视觉提示与金额一致 */
.dp-item .qty.clickable {
  cursor: pointer; color: var(--primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.dp-item .qty.clickable:hover { color: var(--primary-dark); }
.dp-item .amount.manual { color: var(--primary); font-weight: 600; }
.manual-tag {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px;
  font-size: 10px; background: var(--primary); color: #fff;
  text-decoration: none; font-weight: 400; vertical-align: middle;
}
.dp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-actions button {
  padding: 8px 14px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; font-size: 13px;
}
.dp-actions button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.dp-actions button.danger { color: var(--red); border-color: #F0C8C5; }
.add-dish-row { display: flex; gap: 8px; margin-top: 8px; }
.add-dish-row select, .add-dish-row input {
  padding: 8px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 13px;
}
.change-log { max-height: 120px; overflow-y: auto; font-size: 12px; color: var(--muted); }
.change-log div { padding: 3px 0; }

/* ===== 订单操作流水（哪个端口 · 什么时候 · 做了什么） ===== */
.order-log { max-height: 220px; overflow-y: auto; font-size: 12px; }
.log-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 5px 0; border-bottom: 1px dashed var(--line);
}
.log-row:last-child { border-bottom: none; }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.log-port {
  font-size: 11px; color: var(--primary); background: #FDEEE8;
  border-radius: 5px; padding: 1px 6px; flex-shrink: 0;
}
.log-action { font-weight: 600; color: var(--text); flex-shrink: 0; }
.log-name { color: var(--text); }
.log-detail { color: var(--muted); }

/* ===== 菜品管理 ===== */
.dish-admin table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.dish-admin th, .dish-admin td { padding: 10px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line); }
.dish-admin th { background: #FAF8F5; color: var(--muted); font-weight: 600; }
.dish-admin td input, .dish-admin td select { padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 7px; font-size: 13px; width: 90px; }
.dish-admin .toggle { cursor: pointer; user-select: none; }
.dish-admin .toggle.on { color: var(--green); font-weight: 700; }
.dish-admin .toggle.off { color: var(--muted); }
.dish-admin .btn-edit { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 12px; }
.dish-admin .btn-del { background: #E5484D; color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 12px; }
.dish-admin .btn-del:hover { background: #d13b40; }
.dish-admin .btn-stock { background: #F4F0EB; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 12px; margin-left: 6px; cursor: pointer; }
.dish-admin .btn-stock:hover { background: #ECE6DE; }

.modal-subtitle { margin: 18px 0 8px; font-size: 14px; color: var(--text); }
.modal-tip { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.inv-list { background: #FAF8F5; border-radius: 10px; padding: 10px; max-height: 160px; overflow-y: auto; }
/* 菜品规格（二级菜单）列表：内嵌「特殊二级」配置区，需要比其他列表更高的可视空间 */
#f-opt-list { max-height: 520px; }
.inv-list:empty::before { content: '暂无特殊时段库存'; color: var(--muted); font-size: 13px; }
.inv-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.inv-item:last-child { border-bottom: none; }
.inv-add-grid { grid-template-columns: 1.4fr .9fr .8fr auto; }
.opt-sort { width: 48px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; text-align: center; margin-right: 8px; flex-shrink: 0; }
.opt-sort:focus { outline: 2px solid var(--blue); border-color: transparent; }
.opt-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* ===== 三级菜单（子规格）编辑区 ===== */
.opt-wrap { border-bottom: 1px solid var(--line); }
.opt-wrap:last-child { border-bottom: none; }
.sub-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  background: #F3E7D6; color: var(--primary); font-size: 11px; font-weight: 600;
}
.sub-block {
  margin: 0 8px 10px 40px; padding: 10px 12px; border-radius: 10px;
  background: #FFFBF6; border: 1px dashed #E3D3BC;
}
.sub-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.sub-title small { display: block; margin-top: 3px; font-weight: 400; font-size: 11px; color: var(--muted); }
/* 特殊二级「启用」开关 */
.sp-switch {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px;
  padding: 8px 10px; border-radius: 8px; background: #FFF;
  border: 1px solid #EFE4D4; cursor: pointer;
}
.sp-switch input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--primary); }
.sp-switch > span { font-size: 12px; font-weight: 600; color: var(--text); }
.sp-switch small { display: block; margin-top: 3px; font-weight: 400; font-size: 11px; color: var(--muted); }
/* 选项行：选项名 / 简称 / 组名 —— 窄屏自动换行，不挤成一团 */
.sub-item {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 6px; font-size: 12px; border-bottom: 1px dashed #EDE3D4;
}
.sub-item:last-of-type { border-bottom: none; }
.sub-item input {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; background: #fff; min-width: 0; width: auto;
}
.sub-item .sub-name-inp { flex: 2 1 130px; }
.sub-item .sub-alias-inp { flex: 1 1 76px; }
.sub-item .sub-groups-inp { flex: 2 1 170px; }
.sub-group-tip {
  flex: 0 0 auto; min-width: 38px; text-align: center; font-size: 11px;
  font-weight: 600; color: var(--primary); background: #F3E7D6; border-radius: 20px; padding: 2px 6px;
}
.sub-empty { font-size: 12px; color: var(--muted); padding: 4px 6px 8px; }
/* 做法库（隐藏菜品）勾选区：勾中的隐藏菜品就是一个做法 */
.sub-link-pick {
  display: flex; flex-wrap: wrap; gap: 3px 18px;
  margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
  background: #FFF; border: 1px solid #EFE4D4;
}
.sub-link-title { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.sub-link-title small { display: block; margin-top: 3px; font-weight: 400; font-size: 11px; color: var(--muted); }
.sub-link-item {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  font-size: 12px; color: var(--text); cursor: pointer;
}
.sub-link-item small { color: var(--muted); font-size: 11px; }
.sub-link-item input { width: auto; margin: 0; }
.sub-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sub-add input {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; background: #fff; min-width: 0;
}
.sub-add .sub-name { flex: 2 1 140px; }
.sub-add .sub-alias { flex: 1 1 86px; }
.sub-add .sub-groups { flex: 2 1 180px; }
.sub-add .btn-mini { padding: 6px 12px; font-size: 12px; }

.cat-list { background: #FAF8F5; border-radius: 10px; padding: 6px; max-height: 260px; overflow-y: auto; }
.cat-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cat-item:last-child { border-bottom: none; }
.cat-item input { flex: 1; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 13px; }
.cat-item .cat-sort { width: 70px; }
.cat-item .cat-del { background: var(--red); color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px; }

/* ===== 统计 ===== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.stat-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.stat-card h4 { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.stat-card .big { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat-card .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.stat-card .bar { height: 8px; background: #F0ECE6; border-radius: 5px; overflow: hidden; margin-top: 6px; }
.stat-card .bar i { display: block; height: 100%; background: var(--primary); border-radius: 5px; }

/* ===== 通知（从右上角移到顶部中间，避免挡住操作区） ===== */
.notify-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.notify {
  background: #2B2926; color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: slideIn .3s ease; max-width: 320px;
}
.notify b { color: #F0B16B; }
.notify.error { background: var(--red); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }

/* ===== 弹窗 ===== */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; display: flex; align-items: center; justify-content: center; }
.modal-card { background: #fff; border-radius: 16px; padding: 24px; width: 420px; max-width: 92vw; }
.modal-card h3 { margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.form-grid input, .form-grid select { padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 14px; }
/* 菜品编辑弹窗：桌面宽屏下主表单三列，更充分利用屏幕 */
@media (min-width: 900px) {
  .dish-main-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 主表单与下方分区标题之间留白，避免贴太近 */
.dish-main-grid { margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions button { flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; }
.btn-ghost { border: 1.5px solid var(--line); background: #fff; }
.btn-ok { background: var(--primary); color: #fff; border: none; }
.btn-danger { background: var(--red); color: #fff; border: none; }

/* 菜品编辑弹窗：操作条吸顶 + 宽屏弹窗外悬浮操作条 */
.dish-modal-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 4px 10px 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .18);
}
.dish-modal-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dish-modal-bar-actions button { padding: 9px 20px; border-radius: 10px; font-size: 14px; }
.dish-modal-bar-actions button:disabled { opacity: .6; cursor: not-allowed; }

.dish-float-actions {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 160;
  display: none;
  flex-direction: column;
  gap: 12px;
}
.dish-float-btn {
  width: 96px;
  padding: 14px 0;
  border-radius: 12px;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.dish-float-btn.ghost { background: #fff; border: 1.5px solid var(--line); }
.dish-float-btn.primary { background: var(--primary); color: #fff; border: none; }
.dish-float-btn:disabled { opacity: .6; cursor: not-allowed; }
/* 仅在弹窗打开 + 屏够宽时显示悬浮按钮 */
@media (min-width: 1400px) {
  .dish-float-actions.visible { display: flex; }
}

@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .side-logo span, .side-user span, .nav-item { font-size: 0; }
  .nav-item { padding: 14px; text-align: center; }
  .nav-item::before { content: ''; }
}

/* ===== 菜品图片编辑 ===== */
.dish-img-edit { display: flex; align-items: center; gap: 14px; background: #FAF8F5; border-radius: 10px; padding: 12px; }
.dish-img-preview { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #EFE9E2; display: none; }
.dish-img-btns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dish-img-btns .modal-tip { font-size: 12px; color: var(--muted); }

/* ===== 详情图（点开菜品后弹窗里左右滑动的多图）===== */
.dish-gallery {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: #FAF8F5; border-radius: 10px; padding: 12px; min-height: 64px;
}
.dish-gallery:empty::before { content: '还没有详情图'; font-size: 12px; color: var(--muted); }
.gallery-item { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #EFE9E2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-del {
  position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 14px; line-height: 20px; cursor: pointer;
}
.gallery-del:hover { background: var(--red); }
.gallery-btns { margin-top: 8px; }
#f-intro {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical;
}

/* ===== 端口机状态（后台「端口机」页）===== */
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.term-card { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.term-card.is-on { border-color: #CDE7D6; }
.term-head { display: flex; align-items: center; gap: 10px; }
.term-name { font-size: 16px; font-weight: 700; }
.term-badge { font-size: 12px; color: var(--muted); background: #F4EFE9; border-radius: 999px; padding: 3px 10px; }
.term-card.is-on .term-badge { color: #2E9E63; background: #E7F5EC; }
.term-off { margin-left: auto; }
.term-off:disabled { opacity: .45; }
.term-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; }
.term-table td { padding: 7px 4px; border-top: 1px solid var(--line); }
.term-table tr.is-off td { color: var(--muted); }
.term-table .dot { font-size: 12px; }
.term-table .dot.on { color: #2E9E63; }
.term-table .dot.off { color: var(--muted); }
.term-table .muted { color: var(--muted); font-size: 12px; }

/* ===== 称重计费 ===== */
.by-weight-check { cursor: pointer; gap: 4px; }
.by-weight-check input { width: 16px; height: 16px; vertical-align: -2px; margin-right: 4px; accent-color: var(--primary); }
.by-weight-check small { font-weight: 400; color: #8B8681; font-size: 12px; line-height: 1.4; }
/* 蒸制时长：仅勾选「蒸柜端」岗位时才显示（由 dishes.js 的 syncSteamField 控制） */
.steam-min-wrap small { font-weight: 400; color: #8B8681; font-size: 12px; line-height: 1.4; margin-top: 4px; }
/* 制作所需时间：所有菜都可填，砧板「开整」后据此计时（顾客端到点显示「已做好」） */
.cook-min-wrap small { font-weight: 400; color: #8B8681; font-size: 12px; line-height: 1.4; margin-top: 4px; }
.dp-item .ops button[data-op="weigh"] { color: var(--blue); border-color: #C3D9F5; }