:root {
  --bg: #E7F4F4;
  --surface: #FFFFFF;
  --surface-2: #F1F8F8;
  --border: #D3E6E6;
  --border-strong: #BCD8D8;
  --text: #17262A;
  --text-dim: #5E7476;
  --wine: #8B2942;
  --wine-dark: #6B1D38;
  --wine-grad: linear-gradient(180deg, #96305A 0%, #8B2942 100%);
  --green: #157F52;
  --green-bg: #E4F7EF;
  --orange: #B45309;
  --orange-bg: #FFF3DE;
  --red: #B91C1C;
  --red-bg: #FDECEC;
  --radius: 14px;
  --card-bg: linear-gradient(180deg, #FFFFFF 0%, #FAFDFD 100%);
  --shadow-card:
    0 1px 1px rgba(15, 55, 55, 0.05),
    0 6px 12px rgba(15, 55, 55, 0.08),
    0 20px 40px -8px rgba(15, 55, 55, 0.16);
  --shadow-card-hover:
    0 2px 3px rgba(15, 55, 55, 0.06),
    0 12px 20px rgba(15, 55, 55, 0.1),
    0 30px 52px -8px rgba(15, 55, 55, 0.2);
  --shadow-card-sm: 0 1px 1px rgba(15, 55, 55, 0.05), 0 3px 6px rgba(15, 55, 55, 0.08);
  --shadow-inset: inset 0 1px 3px rgba(15, 55, 55, 0.08);
  /* 平台管理台专属配色：深靛蓝 + 金色点缀（"后台/管理室"的观感），和公司驾驶舱的酒红色
     刻意区分开——老板反馈平台管理台和公司管理页面"长得一模一样"，容易让人搞混自己
     到底在哪个界面里，操作权限完全不同的两类角色需要能一眼分辨出当前是哪个界面。
     这两个变量只在 #platform-screen 容器内被覆盖（见文件末尾），不影响公司驾驶舱。 */
  --navy: #1B2A4A;
  --navy-dark: #12203B;
  --navy-grad: linear-gradient(180deg, #2C4270 0%, #1B2A4A 100%);
  --gold: #D9A441;
  --gold-dark: #B4832B;
  --gold-bg: #FBF3DF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ---------- Login / 首页 / 公司自助注册 / 试用锁定页：共用同一套全屏居中布局 ---------- */
#login-screen, #company-register-screen, #trial-locked-screen, #landing-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 38px 34px;
}

/* ---------- 首页：角色选择卡片 ---------- */
/* 语言下拉框固定在右上角，不占用居中卡片区域的布局空间——用 fixed 而不是 absolute，
   这样即使页面内容比视口高（小屏手机上两张卡片可能需要滚动）也始终留在视口右上角可见。 */
.landing-lang-select {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 5;
  width: auto;
  max-width: 130px;
  padding: 6px 10px;
  font-size: 13px;
}
.landing-wrap { width: 100%; max-width: 620px; }
.landing-header { text-align: center; margin-bottom: 34px; }
.landing-header h1 {
  font-size: 32px;
  margin: 0 0 10px;
  color: var(--wine);
  letter-spacing: 0.3px;
}
.landing-header p { margin: 0; color: var(--text-dim); font-size: 14.5px; }
/* 首月免费+价格徽标：故意做成显眼的胶囊形状放在首页最上方（而不是要点进注册表单才看到），
   这是潜在客户决定要不要点"注册"之前最想知道的信息，之前只在注册表单页才提到，等于
   让犹豫的老板多点一次才能看到"不用先付钱"这个最能打消顾虑的关键信息。 */
.landing-trial-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(139, 41, 66, 0.08);
  color: var(--wine);
  border: 1px solid rgba(139, 41, 66, 0.25);
  font-size: 13px;
  font-weight: 600;
}

.landing-cards { display: flex; flex-direction: column; gap: 16px; }
.landing-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.landing-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.landing-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: var(--shadow-card-sm);
}
.landing-card-icon.employee { background: linear-gradient(160deg, #E8A356 0%, #C97A3A 100%); }
.landing-card-icon.boss { background: var(--wine-grad); }
.landing-card-info { flex: 1; min-width: 0; }
.landing-card-info h3 { margin: 0 0 4px; font-size: 17px; color: var(--text); }
.landing-card-info p { margin: 0; font-size: 13px; color: var(--text-dim); }
.landing-card-actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn-primary-sm {
  padding: 10px 20px;
  background: var(--wine-grad);
  color: #fff;
  border: 1px solid var(--wine-dark);
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(139, 41, 66, 0.2), 0 4px 10px rgba(139, 41, 66, 0.28);
}
.btn-primary-sm:hover { filter: brightness(1.06); }

.landing-preview { margin-top: 34px; }
/* 视频上方那句可选的介绍文字，平台管理员在后台写（见index.html里#demo-video-caption
   旁边的注释）。样式沿用了原来"看看WorkOpsPilot怎么用"标题的视觉规格，留空时JS会给
   这个元素加 .hidden，不占位置。 */
.landing-preview-caption {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}
/* 真实演示视频播放区：单个<video>元素，16:9（新视频原始分辨率1920x1080）。之前这里
   还有"老板端/员工端"tab切换、语音解读开关、一层JS按播放进度实时填字幕的半透明条——
   换成Joseph自己配了真人讲解的新视频后，这几样都不需要了（详见index.html里的注释），
   相关CSS一并删掉。object-fit: contain 是保险丝：万一以后换的视频比例跟16:9对不上，
   video会完整显示、按比例留黑边，而不是被拉伸变形。 */
.landing-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #1a1620;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.landing-video-player { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }

.landing-footer {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.landing-footer a { color: var(--text-dim); font-weight: 500; }
.landing-footer a:hover { color: var(--wine); }

@media (max-width: 520px) {
  .landing-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .landing-card-actions { width: 100%; }
  .landing-card-actions button { flex: 1; }
}
.brand {
  text-align: center;
  margin-bottom: 28px;
}
.brand h1 {
  font-size: 27px;
  margin: 0 0 4px;
  color: var(--wine);
  letter-spacing: 0.3px;
}
.brand p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13.5px;
  font-style: italic;
}
label {
  display: block;
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 15px 0 6px;
  font-weight: 500;
}
input:not([type="checkbox"]):not([type="radio"]), select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14.5px;
  box-shadow: var(--shadow-inset);
}
input:focus, select:focus { outline: 1.5px solid var(--wine); border-color: var(--wine); }
input::placeholder { color: #9CA3AF; }
/* 复选框/单选框之前误被上面这条通用 input 规则拉伸成了一个和文字输入框一样宽、一样带
   内边距+边框的长条（聚焦或校验高亮时还会套上 wine 主题色的边框，看起来像一个出错的大红框）——
   本该是一个正常大小的小方框。这里显式排除掉、恢复成标准尺寸，只保留一个和主题色一致的
   选中颜色（accent-color），不需要逐个改HTML，全站所有复选框/单选框统一生效。 */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  box-shadow: none;
  accent-color: var(--wine);
  flex-shrink: 0;
}
input[type="radio"] { border-radius: 50%; }

button {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  transition: filter .15s ease, box-shadow .15s ease, transform .1s ease;
}
button:active { transform: translateY(1px); }
/* 全局禁用态：之前很多按钮点击后会 disabled=true 防止重复提交，但外观完全不变，
   用户分不清是"点了没反应"还是"正在处理中"。统一加一层视觉反馈。 */
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  width: 100%;
  padding: 12px;
  margin-top: 22px;
  background: var(--wine-grad);
  color: #fff;
  border: 1px solid var(--wine-dark);
  box-shadow: 0 1px 1px rgba(139, 41, 66, 0.2), 0 4px 10px rgba(139, 41, 66, 0.28);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 2px 2px rgba(139, 41, 66, 0.22), 0 6px 16px rgba(139, 41, 66, 0.32); }
.btn-primary:active { box-shadow: 0 1px 1px rgba(139, 41, 66, 0.2); }

.btn-secondary {
  padding: 9px 14px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card-sm);
}
.btn-small {
  padding: 7px 12px;
  font-size: 13px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card-sm);
}
.btn-secondary:hover, .btn-small:hover { box-shadow: var(--shadow-card); }

.error-box {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--red-bg);
  border: 1px solid #F3B4B4;
  color: var(--red);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
}

/* ---------- App shell ---------- */
#app-screen { min-height: 100vh; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 55, 55, 0.07);
  position: relative;
  z-index: 5;
}
.topbar .brand-inline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.topbar .brand-inline h2 { margin: 0; font-size: 19px; color: var(--wine); }
.topbar .brand-inline span { font-size: 13px; color: var(--text-dim); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.pill {
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* ---------- App shell: 左侧边栏导航 + 右侧内容区 ---------- */
/* 一次只展示一个页面的内容，不再把所有区块堆在一条长长的单页滚动里——
   这是老板反馈"内容太拥挤、不知道现在在看哪一块"之后的重新设计。 */
.app-body {
  display: flex;
  align-items: flex-start;
  max-width: 1320px;
  margin: 0 auto;
}
.sidebar {
  width: 208px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 22px 12px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}
.nav-item {
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--wine-grad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139, 41, 66, 0.25);
}

main { flex: 1; min-width: 0; padding: 24px 28px 60px; max-width: 980px; margin: 0; }

/* 概览卡片里可以点击跳转的几张（工资成本→员工档案、库存报警→智能库存等） */
.card.clickable { cursor: pointer; }
.card.clickable .hint { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; }
.card.clickable:hover .hint { color: var(--wine); }

/* AI利润分析里可以点击跳转到相关详情页的因素行 */
.profit-driver-row.clickable { cursor: pointer; }
.profit-driver-row.clickable:hover { border-color: var(--wine); }

/* 员工档案表格：点"详情"展开的当天完整情况（考勤/评分/排班一次看全，不用再跳去别的表格拼） */
.emp-detail-row td { background: var(--surface-2); padding: 16px 20px; }
.emp-detail-grid { display: flex; flex-wrap: wrap; gap: 16px 34px; margin-bottom: 12px; }
.emp-detail-item { font-size: 12.5px; color: var(--text-dim); }
.emp-detail-item b { display: block; margin-top: 3px; color: var(--text); font-weight: 600; font-size: 14px; }
.emp-detail-list-title { font-weight: 600; color: var(--text); font-size: 13px; margin: 10px 0 6px; }
.emp-detail-list-empty { color: var(--text-dim); font-size: 13px; }
.emp-detail-list-row { font-size: 13px; color: var(--text); padding: 3px 0; }
.emp-detail-jump { margin-top: 10px; }

/* 在线客服小按钮：右下角、小巧、不遮内容；z-index 低于弹窗(2100)，弹窗打开时不会压在上面。 */
.chat-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-card-hover);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.chat-launcher:hover { border-color: var(--wine); color: var(--wine); }
@media (max-width: 720px) { .chat-launcher { right: 12px; bottom: 12px; padding: 8px 12px; font-size: 12.5px; } }

/* 手机上每个功能页顶部的「← 返回今日概览」——由 app.js initSidebarNav() 注入；桌面端有侧边栏，隐藏。 */
.page-back-btn { display: none; }

@media (max-width: 900px) {
  .app-body { flex-direction: column; }
  .sidebar {
    position: sticky; top: 0; z-index: 20;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 右侧渐隐：告诉老板"这一排还能往右滑"——之前一半栏目藏在屏幕外没有任何提示。 */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), rgba(0,0,0,0) 100%);
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .nav-item { flex-shrink: 0; scroll-snap-align: center; }
  main { max-width: 100%; }

  .page-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 12px; padding: 8px 14px;
    background: var(--card-bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow-card-sm);
  }
  .page-back-btn:active { background: var(--surface-2); }
}

.section-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  margin: 34px 0 14px;
  letter-spacing: 0.1px;
}
.section-title:first-of-type { margin-top: 8px; }
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 34px 0 14px;
}
.section-title-row .section-title { margin: 0; }
.section-title-row:first-child { margin-top: 8px; }

/* 通用可折叠小节标题：点标题行折叠/展开下面紧跟着的内容块，用在会不断累积、平时
   只需要扫一眼标题确认"在哪"而不需要每次都展开细看的小节（公司设置里的一堆高级
   参数、库存分类、通知/考勤/流水这类历史记录分组等）。箭头方向靠 .collapsed 类
   切换，实际显隐还是复用项目里到处在用的 .hidden 类，不引入新的显隐机制——具体
   切换逻辑见 app.js 的 initCollapsibleSections()（事件委托，不需要每个小节单独
   注册一个开关函数，新加小节只要写对这两个 class/data 属性就自动生效）。 */
.collapse-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}
.collapse-header:hover { color: var(--wine); }
.collapse-header .collapse-arrow {
  font-size: 12px;
  color: var(--text-dim);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.collapse-header.collapsed .collapse-arrow { transform: rotate(-90deg); }

/* ---------- Dashboard cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.card .label { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; font-weight: 500; }
.card .value { font-size: 28px; font-weight: 700; color: var(--text); }
.card.accent-green .value { color: var(--green); }
.card.accent-red .value { color: var(--red); }
.card.accent-orange .value { color: var(--orange); }

/* ---------- 营收趋势曲线（纯 SVG 手写，零依赖，不引入 Chart.js） ---------- */
.trend-toggle { display: flex; gap: 6px; }
.trend-period-btn.active, .ai-insight-tab-btn.active { background: var(--wine); color: #fff; border-color: var(--wine); }
.trend-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 22px 14px;
}
.trend-svg { width: 100%; height: 200px; display: block; }
.trend-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.trend-x-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.trend-empty { color: var(--text-dim); font-size: 14px; padding: 30px 0; text-align: center; }

/* ---------- 全局加载进度条：覆盖全站的api()请求，见index.html里的说明 ---------- */
.global-loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
  background: var(--border);
  overflow: hidden;
}
.global-loading-bar::before {
  content: "";
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: var(--wine-grad);
  animation: global-loading-sweep 1.1s ease-in-out infinite;
}
@keyframes global-loading-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---------- 骨架屏：驾驶舱首次加载时卡片区域用灰色占位块代替空白/"—"，
   让人知道"正在加载"而不是"这里本来就没数据"。数据回来后 renderCards() 会
   直接用真实卡片HTML覆盖掉这些骨架块。 ---------- */
.skeleton-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-sm);
  padding: 16px;
  height: 74px;
}
.skeleton-block {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.skeleton-block.line-title { height: 12px; width: 55%; margin-bottom: 12px; }
.skeleton-block.line-value { height: 20px; width: 75%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- 通用确认/输入弹窗：替换原生 confirm()/prompt() ----------
   z-index 故意比 .legal-modal-overlay（2100）更高：这个弹窗随时可能从"已经打开的另一个弹窗
   内部"被调出来（比如分类管理弹窗里点"删除"要弹一个确认框），必须始终盖在最上面，
   不能被它上面调用它的那个弹窗挡住看不见。 */
.app-modal-overlay {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(15, 40, 40, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.app-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: 22px 24px;
  max-width: 420px;
  width: 100%;
}
.app-modal-message { font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-line; }
.app-modal input#app-modal-input { margin-top: 12px; }
.app-modal select#app-modal-select { margin-top: 12px; width: 100%; }
.app-modal-error { margin-top: 8px; font-size: 12.5px; color: var(--red); }
.app-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* 弹窗内的确定/取消按钮复用全站已有的 .btn-primary/.btn-secondary，
   但去掉它们原本给"表单提交按钮"设计的 width:100%/margin-top，改成并排的小按钮。 */
.app-modal-actions .btn-primary, .app-modal-actions .btn-secondary { width: auto; margin-top: 0; padding: 9px 18px; }
.app-modal-actions .btn-primary.btn-danger { background: var(--red); border-color: #8f1414; }

/* ---------- 法律条款弹窗（隐私政策/服务条款/Cookie声明）：内容比确认弹窗长很多，
   需要更宽、可滚动的容器，跟通用确认弹窗共用同一套遮罩视觉但独立的内容框结构。 ---------- */
.legal-modal-overlay {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(15, 40, 40, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.legal-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  max-width: 640px;
  width: 100%;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.legal-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  flex: none;
}
.legal-modal-header h3 { margin: 0; font-size: 16px; color: var(--text); }
.legal-modal-close-btn {
  background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--text-dim); padding: 4px 8px;
}
.legal-modal-body { padding: 18px 22px; overflow-y: auto; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.legal-modal-body h4 { font-size: 14px; margin: 18px 0 6px; color: var(--text); }
.legal-modal-body h4:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 10px; }
.legal-modal-body .legal-placeholder { background: var(--gold-bg, #FBF3DF); color: var(--orange); padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.legal-modal-updated { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }

/* ---------- 试用期倒计时横幅：临近到期时从"提示色"升级为"警示色" ---------- */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: var(--orange-bg);
  border-bottom: 1px solid var(--orange);
  font-size: 13.5px;
  color: var(--text);
}
.trial-banner.urgent { background: var(--red-bg); border-bottom-color: var(--red); }
.trial-banner span#trial-banner-text { flex: 1; font-weight: 600; }
.trial-banner.urgent span#trial-banner-text { color: var(--red); }
.trial-banner-dismiss {
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--text-dim); padding: 0 4px;
}
.trial-banner-dismiss:hover { color: var(--text); }

/* ---------- 打卡页："忘记打卡下班，工时已自动归零"提醒卡片 ---------- */
.auto-reset-alert-card {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--orange-bg);
  border: 1px solid var(--orange);
  border-radius: 12px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
}
.auto-reset-alert-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.auto-reset-alert-item + .auto-reset-alert-item { border-top: 1px solid var(--orange); }
.auto-reset-alert-text { flex: 1; line-height: 1.5; }
.auto-reset-alert-ack {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--orange);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.auto-reset-alert-ack:hover { background: var(--orange); color: #fff; }

/* ---------- 预算与固定成本追踪卡片：老板没设预算时整张隐藏 ---------- */
.budget-card {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.budget-card-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14.5px; color: var(--wine); margin-bottom: 10px;
}
.budget-progress-track {
  width: 100%; height: 10px; border-radius: 6px;
  background: var(--border); overflow: hidden;
}
.budget-progress-fill {
  height: 100%; border-radius: 6px;
  background: var(--green);
  transition: width .3s ease, background-color .3s ease;
}
.budget-card-detail {
  margin-top: 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.7;
}

/* ---------- 人工成本计算器：老板需要时才手动打开的独立工具，不是自动展示的卡片 ---------- */
.labor-calc-disclaimer {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  color: var(--text);
}
.labor-calc-disclaimer strong { display: block; color: var(--red); font-size: 13.5px; margin-bottom: 6px; }
.labor-calc-disclaimer p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.labor-calc-facts {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.labor-calc-fact {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border);
}
.labor-calc-fact:last-child { border-bottom: none; }
.labor-calc-fact span { color: var(--text-dim); }
.labor-calc-fact strong { color: var(--text); font-weight: 700; }
.labor-calc-result {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-sm);
  padding: 14px 18px;
  margin-top: 16px;
}
.labor-calc-result .labor-calc-fact strong { color: var(--wine); font-size: 15px; }

/* ---------- 新公司注册后的空状态引导：快速上手清单 ---------- */
.onboarding-checklist {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.onboarding-checklist-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14.5px; color: var(--wine); margin-bottom: 10px;
}
.onboarding-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.onboarding-item:last-child { border-bottom: none; }
.onboarding-item-check {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); font-size: 12px; color: transparent;
}
.onboarding-item.done .onboarding-item-check { background: var(--green); border-color: var(--green); color: #fff; }
.onboarding-item.done .onboarding-item-label { color: var(--text-dim); text-decoration: line-through; }
.onboarding-item-label { flex: 1; }
.onboarding-item-action { color: var(--wine); font-weight: 600; cursor: pointer; font-size: 13px; }

/* ---------- 平台广告位：固定嵌入首页，不是弹窗，不能被公司管理员关闭 ---------- */
.ad-slot { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.ad-card {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
}
.ad-card a.ad-card-link { text-decoration: none; color: inherit; display: flex; gap: 16px; align-items: center; flex: 1; min-width: 0; }
.ad-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ad-media img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex-shrink: 0; box-shadow: var(--shadow-card-sm); }
.ad-media video { width: 220px; max-width: 40vw; border-radius: 10px; flex-shrink: 0; box-shadow: var(--shadow-card-sm); display: block; }
.ad-text { min-width: 0; }
.ad-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ad-body { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* ---------- AI report ---------- */
/* "✨ AI" 徽章：贴在每个AI功能区块的标题旁边，纯视觉强调——这几个板块（AI日报/AI利润
   分析/AI老板助手/AI采购预测）是这个产品相对于普通排班打卡工具最大的差异化卖点，
   不应该长得和旁边的普通数据表格一模一样，容易被老板刷过去没注意到。不翻译"AI"这个词
   本身（9种语言里都是通用缩写，硬翻译成"人工智能"反而更长更不像徽章）。 */
.ai-powered-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--wine-grad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  vertical-align: middle;
  box-shadow: 0 2px 5px rgba(139, 41, 66, 0.3);
}
.ai-report {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.ai-report .headline {
  font-weight: 700;
  font-size: 15px;
  color: var(--wine);
  margin-bottom: 12px;
}
.ai-report ul { margin: 0; padding-left: 18px; }
.ai-report li { margin-bottom: 8px; line-height: 1.6; font-size: 14.5px; color: var(--text); }
.ai-report .empty { color: var(--text-dim); font-size: 14.5px; }
.profit-drivers { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.profit-driver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13.5px;
  box-shadow: var(--shadow-card-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.profit-driver-row:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.profit-driver-row .driver-label { color: var(--text); font-weight: 600; }
.profit-driver-row .driver-delta { color: var(--text-dim); font-size: 12.5px; margin-left: 8px; }
.profit-driver-row .driver-impact {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: var(--shadow-inset);
}
.profit-driver-row .driver-impact.positive { color: var(--green); background: var(--green-bg); }
.profit-driver-row .driver-impact.negative { color: var(--red); background: var(--red-bg); }
.profit-headline-up { color: var(--green); }
.profit-headline-down { color: var(--red); }

/* ---------- 通知中心 ---------- */
.notif-wrap { position: relative; }
.notif-wrap .btn-small { position: relative; }
.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.4);
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card-hover);
  z-index: 20;
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
}
.notif-dropdown-actions { display: flex; gap: 6px; }
.notif-dropdown-actions .btn-small { padding: 5px 9px; font-size: 11.5px; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  cursor: pointer;
  transition: background .12s ease;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--surface-2); }
.notif-row.unread { background: var(--surface-2); font-weight: 500; }
.notif-row .notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.notif-row .notif-dot.critical { background: var(--red); }
.notif-row .notif-dot.warning { background: var(--orange); }
.notif-row .notif-dot.info { background: var(--green); }
.notif-row .notif-time { color: var(--text-dim); font-size: 11px; margin-top: 2px; }
.notif-row .notif-body { flex: 1; min-width: 0; }
.notif-delete-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.notif-delete-btn:hover { background: var(--red-bg); color: var(--red); }
/* 通知里的"一键呼叫"按钮：只在配送异常/脱岗预警且该员工留了手机号时出现（见 app.js
   renderNotifications），tel: 链接本身就是浏览器/系统原生行为，不需要额外的JS弹窗逻辑。 */
.notif-call-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
  color: var(--green);
}
.notif-call-btn:hover { background: var(--green-bg, rgba(16,185,129,0.12)); }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* ---------- AI 老板助手（对话式问答） ---------- */
.assistant-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
}
/* AI生成内容的卡片本身也加一点"这不是普通表格"的视觉区分：左侧一条酒红色的强调条。
   这条规则必须排在 .ai-report / .assistant-box 的 border 简写属性之后，
   不然会被那两条规则的 `border: 1px solid ...` 简写覆盖掉（简写会重置全部四条边）。 */
.ai-powered-card {
  border-left: 3px solid var(--wine);
}
.assistant-messages {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
  margin-bottom: 14px;
}
.assistant-empty { color: var(--text-dim); font-size: 14px; line-height: 1.7; padding: 4px 2px; }
.assistant-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.assistant-msg.user {
  align-self: flex-end;
  background: var(--wine-grad);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 6px rgba(139, 41, 66, 0.22);
}
.assistant-msg.assistant {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.assistant-msg.assistant .source-tag {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  font-weight: 500;
}

/* AI 是否真的接了 Claude API、还是规则引擎兜底——诚实标注在每个AI区块标题旁边，
   不让老板误以为看到的都是"AI算的"，实际很可能是没配key时的规则引擎结果。 */
.ai-source-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.ai-source-badge.is-ai { background: var(--green-bg); color: var(--green); }
.ai-source-badge.is-rule { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.assistant-msg.pending { color: var(--text-dim); font-style: italic; }
.assistant-input-row { display: flex; gap: 10px; }
.assistant-input-row input { flex: 1; }
.assistant-input-row button { flex-shrink: 0; }

/* ---------- Tables ---------- */
/* 表格的立体感放在 .table-scroll 外层容器上（而不是 table 本身），这样横向滚动条
   不会把阴影和圆角切掉——桌面/移动端都保持和卡片一致的悬浮质感。 */
.table-scroll {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.table-scroll:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
th { color: var(--text-dim); font-weight: 600; background: var(--surface-2); font-size: 13.5px; }
tr:last-child td { border-bottom: none; }

/* 表格行内编辑用的紧凑输入框（库存/排班/员工的"编辑"模式）：比表单里的大输入框更贴合表格行高 */
.edit-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13.5px;
  border-radius: 7px;
}

/* ===================== 智能库存：卡片式列表（手机优先改版） =====================
   老板反馈手机上表格"看不清、都是遮挡、方框看不出是什么"。表格换成卡片：每个品项一张卡，
   桌面端一行三栏（名称/数字/操作），手机上自动叠成一列，不需要横向滚动。 */
.inv-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.inv-actions-row .inv-add-btn { margin: 0 0 0 auto; width: auto; padding: 10px 18px; }

.inv-list { display: flex; flex-direction: column; gap: 8px; }
.inv-list-empty { color: var(--text-dim); font-size: 13.5px; padding: 18px 4px; }

/* 分类组标题：可点击折叠/展开同分类下的所有卡片 */
.inv-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-top: 8px;
  font-weight: 600; font-size: 13.5px; color: var(--text);
  background: var(--surface-2); border-radius: 10px;
  cursor: pointer; user-select: none;
}
.inv-group-header:first-child { margin-top: 0; }
.inv-group-header:hover { background: var(--surface-3, var(--surface-2)); }
.inv-group-caret { display: inline-block; transition: transform 0.15s ease; font-size: 11px; color: var(--text-dim); }
.inv-group-header.inv-group-collapsed .inv-group-caret { transform: rotate(-90deg); }
.inv-group-count {
  margin-left: auto; font-weight: 500; color: var(--text-dim); font-size: 12px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}

.inv-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 18px;
  align-items: center;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-card-sm);
}
.inv-item-card.is-low { border-left-color: var(--red); }
.inv-item-card.is-expiring { border-left-color: var(--orange); }
.inv-item-main { min-width: 0; }
.inv-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-item-name { font-weight: 700; font-size: 15px; color: var(--text); word-break: break-word; }
.inv-item-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.inv-item-figures { display: flex; gap: 22px; }
.inv-item-figure-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; white-space: nowrap; }
.inv-item-qty-value { font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; }
.inv-item-qty-sub { font-size: 11.5px; color: var(--text-dim); }
.inv-item-recommend { font-size: 15px; font-weight: 600; color: var(--wine); white-space: nowrap; }
.inv-item-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inv-item-actions .btn-small { min-width: 40px; }
.btn-small.btn-small-primary { background: var(--wine-grad); color: #fff; border-color: var(--wine-dark); }
.btn-small.btn-small-danger { color: var(--red); border-color: var(--red-bg); }

/* 库存提醒：折叠成一行摘要，点开才展开逐条 */
.inv-alerts-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 12px; padding: 11px 14px;
  background: var(--red-bg); color: var(--red);
  border: 1px solid rgba(180, 40, 60, 0.18); border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none;
}
.inv-alerts-toggle .collapse-arrow { transition: transform 0.15s ease; }
.inv-alerts-toggle.collapsed .collapse-arrow { transform: rotate(-90deg); }
.inv-alerts-list { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 14px; }
.inv-alert-row {
  padding: 10px 14px; font-size: 13px; line-height: 1.55; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 10px;
}
.inv-alert-row.is-expiring { border-left-color: var(--orange); }

/* 库存商品新增/编辑弹出面板：字段有标签有说明，手机上一列排开 */
.inv-item-modal { max-width: 560px; }
.inv-form-field { margin-bottom: 12px; }
.inv-form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.inv-form-field input { width: 100%; box-sizing: border-box; }
.inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-form-hint { margin: -4px 0 12px; font-size: 12px; line-height: 1.55; color: var(--text-dim); }
.inv-form-field .inv-form-hint { margin: 6px 0 0; }

@media (max-width: 720px) {
  .inv-item-card { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .inv-item-figures { justify-content: space-between; }
  .inv-item-actions { justify-content: stretch; }
  .inv-item-actions .btn-small { flex: 1; padding: 9px 6px; }
  .inv-actions-row .inv-add-btn { width: 100%; margin-left: 0; }
  .inv-form-grid { grid-template-columns: 1fr 1fr; }
  .legal-modal.inv-item-modal { max-height: 92vh; }
}

/* 库存页顶部：搜索框 + 状态快筛按钮（全部/库存不足/正常）同一行，两者是叠加过滤关系 */
.inv-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.inv-status-filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-filter-pill {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  cursor: pointer;
}
.btn-filter-pill:hover { box-shadow: var(--shadow-card-sm); }
.btn-filter-pill.active {
  background: var(--wine-grad);
  color: #fff;
  border-color: var(--wine-dark);
  font-weight: 600;
}

/* 分类管理/单位管理弹窗：每一行 = 改名输入框 + 在用数量徽章 + 保存/删除按钮 */
#inv-manage-modal-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.inv-manage-row { display: flex; align-items: center; gap: 8px; }
.inv-manage-row .edit-input { flex: 1; }
.inv-manage-row .btn-small[disabled] { opacity: 0.45; cursor: not-allowed; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-dim { background: var(--surface-2); color: var(--text-dim); }

/* 温度记录超标行：整行浅红底，比单个状态徽章更容易被扫到——检查食安记录的人通常是快速
   扫一遍找有没有异常行，而不是逐行读状态列。 */
tr.temp-row-alert td { background: var(--red-bg); }

.form-inline {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.form-inline .field { min-width: 130px; }
.form-inline label { margin: 0 0 6px; }

/* ---------- Employee clock view ---------- */
.clock-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.clock-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-align: center;
}
.clock-buttons { display: flex; gap: 12px; margin-top: 22px; }
.clock-buttons button { flex: 1; padding: 16px; font-size: 15.5px; }
.btn-in {
  background: linear-gradient(180deg, #1B9350 0%, #15803D 100%);
  color: #fff;
  border: 1px solid #0F6631;
  box-shadow: 0 1px 1px rgba(21, 128, 61, 0.2), 0 4px 10px rgba(21, 128, 61, 0.28);
}
.btn-in:hover { filter: brightness(1.06); box-shadow: 0 2px 2px rgba(21, 128, 61, 0.22), 0 6px 16px rgba(21, 128, 61, 0.32); }
.btn-out {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card-sm);
}
.clock-status { margin-top: 18px; font-size: 14px; min-height: 20px; font-weight: 500; }
.clock-status.ok { color: var(--green); }
.clock-status.fail { color: var(--red); }

/* 打卡页的"今天已工作 X 小时 · 今天工资 €Y"——只读展示，不参与打卡操作本身，保持打卡按钮流程简单 */
.clock-hours-card {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
}
.clock-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-dim);
  padding: 4px 0;
}
.clock-hours-row span:last-child { color: var(--text); font-weight: 600; font-size: 15px; }
/* 累计工时是补充信息，不该和"今天已工作"抢视觉重量——加一条分隔线、数字字号缩小一档 */
.clock-hours-row-cumulative { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.clock-hours-row-cumulative span:last-child { font-size: 13.5px; font-weight: 600; }
/* 上月、前月：比本月小一号、颜色淡一些 */
.clock-hours-row-prev { padding-top: 4px; font-size: 12.5px; }
.clock-hours-row-prev span:last-child { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.clock-hours-row span.clock-hours-month-name { color: var(--text-dim); font-weight: 400; font-size: inherit; }

/* 打卡页"智能仓库"：员工按子类+1(取用)/-1(归还)，极简，不放分类/单价等管理字段 */
.wh-card { margin-top: 18px; text-align: left; }
.wh-title { font-size: 13.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; letter-spacing: .3px; }
.wh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.wh-row-info { font-size: 13.5px; color: var(--text); }
.wh-row-info .wh-qty { color: var(--text-dim); font-size: 12px; display: block; margin-top: 1px; }
.wh-stepper { display: flex; align-items: center; gap: 6px; }
/* 之前是纯符号（−/+）的圆形按钮，光看图标不容易一眼确认"这就是出库按钮"——
   改成带文字的胶囊按钮（符号+"出库"/"入库"字样），含义不用猜。 */
.wh-stepper button {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--wine); font-size: 12.5px; font-weight: 700; line-height: 1; cursor: pointer;
}
.wh-stepper button:hover { box-shadow: var(--shadow-card-sm); }
.wh-stepper button.wh-minus { color: var(--red); }
.wh-stepper button .wh-stepper-sym { font-size: 15px; }
.wh-empty { font-size: 12.5px; color: var(--text-dim); padding: 6px 2px; }
.wh-category-group { margin-bottom: 8px; }
.wh-category-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; text-align: left; font: inherit;
}
.wh-category-header:hover { box-shadow: var(--shadow-card-sm); }
.wh-category-caret { color: var(--text-dim); font-size: 12px; width: 10px; flex-shrink: 0; }
.wh-category-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--text); }
.wh-category-count {
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; line-height: 1.6;
}
.wh-category-body { padding-top: 6px; }
.wh-category-body.hidden { display: none; }
.wh-search-wrap { position: relative; margin-bottom: 10px; }
.wh-search-wrap .wh-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-dim); pointer-events: none; }
.wh-search-wrap input { padding-left: 36px !important; -webkit-appearance: none; appearance: none; }
/* iOS Safari 给 type=search 自带一套内边距，会把放大镜压在文字上——上面已关掉原生外观；再保险一层：
   一旦开始输入（或聚焦），放大镜直接淡出，字永远不会和图标重叠。 */
.wh-search-wrap .wh-search-icon { transition: opacity .15s; }
.wh-search-wrap:has(input:focus) .wh-search-icon,
.wh-search-wrap:has(input:not(:placeholder-shown)) .wh-search-icon,
.wh-search-wrap.typing .wh-search-icon { opacity: 0; }
.wh-search-wrap input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* 密码框"显示/隐藏"小眼睛：打字时容易看不清自己有没有打错，尤其是手机小键盘。
   两个 SVG（睁眼/闭眼）叠在同一个按钮里，JS 只切换哪个可见 + 切换 input 的 type。 */
.pw-field-wrap { position: relative; }
.pw-field-wrap input { padding-right: 40px; }
.pw-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-dim);
  padding: 0;
}
.pw-toggle-btn:hover { color: var(--text); }
.pw-toggle-btn:active { transform: translateY(-50%); }
.pw-eye-icon { width: 19px; height: 19px; }
.wh-board { margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.wh-board-title { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.wh-board-line { font-size: 13px; color: var(--text); padding: 3px 0; }
/* "浏览全部品项"按钮：和分类标题同样的样式，平时把整个分类列表收在后面 */
.wh-browse-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; margin-bottom: 8px; border: 1px dashed var(--border); border-radius: 12px; background: var(--card-bg); cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text); text-align: left; }
.wh-browse-toggle.hidden { display: none; }
.wh-browse-toggle #wh-browse-label { flex: 1; }
/* 今日出库明细：时间 · 谁 · 品名 · 数量 */
.wh-today-board { margin-top: 4px; margin-bottom: 4px; }
.wh-today-board .wh-board-title { font-size: 14px; color: var(--text); }
#wh-board-count { font-weight: 500; color: var(--text-dim); font-size: 12.5px; }
.wh-today-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 4px 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.wh-today-row:first-child { border-top: none; }
.wh-today-time { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.wh-today-who { font-weight: 600; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-today-item { min-width: 0; overflow-wrap: anywhere; }
.wh-today-qty { font-weight: 700; white-space: nowrap; }
.wh-board-more { margin-top: 6px; padding: 4px 0; border: none; background: none; color: var(--text-dim); text-decoration: underline; font-size: 12.5px; cursor: pointer; }
/* 品项行上的"今日已出 X"：出库前一眼看到别人是不是已经拿过 */
.wh-today-taken { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--orange); background: var(--orange-bg); white-space: nowrap; }
.wh-board-empty { font-size: 12.5px; color: var(--text-dim); }

/* 出入库流水行（员工端"我最近的操作"+老板端流水表共用的撤销按钮样式）：
   撤销是一个有实际后果的操作（会改动库存数量），用红色文字按钮而不是普通灰按钮，
   让它在视觉上和"删除/危险操作"归为一类，但又不像整块红底按钮那么抢眼——
   这类操作大多数时候不会被点，不需要占据视觉重心。 */
.tx-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border); }
.tx-row:last-child { border-bottom: none; }
.tx-row-info { flex: 1; min-width: 0; }
.tx-row-meta { color: var(--text-dim); font-size: 11.5px; margin-top: 1px; }
.btn-undo { flex-shrink: 0; padding: 4px 10px; font-size: 12px; background: var(--red-bg); color: var(--red); border: none; border-radius: 8px; cursor: pointer; }
.btn-undo:hover { opacity: 0.85; }

/* 厨房小票打印：平时 #kitchen-ticket-print 是空的、display:none，不占地方。只有触发打印
   （body 被加上 printing-ticket 类）时才会显示，并且把页面上其它所有内容藏起来——这样
   打印出来的纸上只有小票内容，不会把整个网页界面也打印进去。80mm 是常见热敏打印纸宽度，
   等宽字体（monospace）在窄纸上对齐数字/金额更整齐。 */
#kitchen-ticket-print { display: none; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  /* 2026-09-29 老板反馈"二维码显示不全、第三列被遮住"：手机上 html/body 有 overflow-x:hidden，
     打印时 body 仍按手机屏宽（约 390px）裁切，三列标签超出的部分被切掉、露出米色底。
     打印标签时把裁切全部放开、宽度交给纸张，列数按纸宽自动排（每列至少 46mm，A4 约 4 列，手机纸也不会溢出）。 */
  html.printing-labels, body.printing-labels { overflow: visible !important; width: auto !important; height: auto !important; max-width: none !important; background: #fff !important; margin: 0 !important; padding: 0 !important; position: static !important; }
  body.printing-labels > *:not(#qr-label-print) { display: none !important; }
  body.printing-labels::before, body.printing-labels::after { display: none !important; }
  #qr-label-print { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(46mm, 1fr)); gap: 5mm; padding: 4mm; color: #000; background: #fff; width: 100%; box-sizing: border-box; position: static !important; overflow: visible !important; }
  #qr-label-print .qr-label { break-inside: avoid; border: 1px dashed #999; border-radius: 4mm; padding: 4mm; text-align: center; font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
  #qr-label-print .qr-code { display: flex; justify-content: center; margin-bottom: 2mm; }
  #qr-label-print .qr-code img, #qr-label-print .qr-code canvas { width: 34mm !important; height: 34mm !important; max-width: 100% !important; }
  #qr-label-print .qr-label { min-width: 0; overflow: hidden; }
  #qr-label-print .qr-emoji { font-size: 22px; }
  #qr-label-print .qr-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
  #qr-label-print .qr-raw { font-size: 10px; color: #555; margin-top: 1mm; }
  #qr-label-print .qr-hint { font-size: 9px; color: #777; margin-top: 2mm; }
  body.printing-ticket > *:not(#kitchen-ticket-print) { display: none !important; }
  #kitchen-ticket-print {
    display: block !important;
    width: 76mm;
    margin: 0 auto;
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #000;
    padding: 2mm 0;
  }
  #kitchen-ticket-print .kt-header { text-align: center; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
  #kitchen-ticket-print .kt-line { border-top: 1px dashed #000; margin: 6px 0; }
  #kitchen-ticket-print .kt-row { display: flex; justify-content: space-between; padding: 2px 0; }
  #kitchen-ticket-print .kt-total { font-weight: 700; font-size: 13px; }
}

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text);
  z-index: 50;
  animation: toast-in .25s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90vw;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
/* toast 里可选的"撤销"按钮：出库/入库操作成功后立刻给一个原地撤销的入口，
   不用再跑去下面"我最近的操作"列表里找那一条——刚做完的操作，撤销应该伸手就能点到。 */
.toast-action-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--red-bg);
  color: var(--red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.toast-action-btn:hover { opacity: 0.85; }

/* ---------- 精修：整体细节打磨 ---------- */

/* 页面切换时轻微淡入，避免生硬闪现 */
#app-screen, #clock-screen:not(.hidden), #login-screen:not(.hidden) {
  animation: screen-in .28s ease;
}
@keyframes screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 小标题前加一个圆点强调色块，呼应品牌色，增加视觉节奏感 */
.section-title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wine);
  flex-shrink: 0;
}

/* 卡片顶部细色条，配合accent颜色做出更丰富的层次 */
.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border-strong);
}
.card.accent-green::before { background: var(--green); }
.card.accent-red::before { background: var(--red); }
.card.accent-orange::before { background: var(--orange); }

/* 表格行 hover 高亮，提升可读性和交互反馈 */
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: var(--surface-2); }

/* 输入框聚焦时的柔和光晕，比单纯描边更有质感 */
input:focus, select:focus {
  box-shadow: var(--shadow-inset), 0 0 0 3px rgba(139, 41, 66, 0.12);
}

/* 自定义滚动条，匹配整体配色，避免默认灰色滚动条显得突兀 */
.assistant-messages::-webkit-scrollbar { width: 7px; }
.assistant-messages::-webkit-scrollbar-track { background: transparent; }
.assistant-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
.assistant-messages::-webkit-scrollbar-thumb:hover { background: var(--wine); }

/* 表格在窄屏下允许横向滚动，避免挤压变形 */
.table-scroll { overflow-x: auto; border-radius: var(--radius); }

/* ---------- 响应式：平板/手机宽度适配 ---------- */
@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-start; }
  .topbar-right select { flex: 1; min-width: 120px; }
  main { padding: 18px 14px 48px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .form-inline { padding: 14px; }
  .form-inline .field { min-width: 100%; }
  table { font-size: 13.5px; }
  th, td { padding: 10px; }
  .assistant-msg { max-width: 92%; }
  .assistant-box { padding: 14px; }
  .profit-driver-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  #replacement-panel .card { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- 更窄的手机屏幕（≤480px）：进一步收紧间距和字号 ---------- */
@media (max-width: 480px) {
  .login-card { padding: 28px 20px; }
  .clock-card { padding: 24px 18px; }
  .brand h1 { font-size: 23px; }
  .topbar .brand-inline h2 { font-size: 17px; }
  main { padding: 14px 10px 40px; }
  .section-title { font-size: 14.5px; margin: 26px 0 12px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 14px 15px; }
  .card .value { font-size: 22px; }
  .assistant-input-row { flex-direction: column; align-items: stretch; }
  .assistant-input-row button { width: 100%; padding: 11px; }
  .clock-buttons { flex-direction: column; }
  table { font-size: 12.5px; }
  th, td { padding: 8px 9px; }
}

/* =====================================================================
   平台管理台重新设计：深靛蓝 + 金色主题，和公司驾驶舱的酒红色主题彻底区分开。
   核心技巧：只在 #platform-screen 这个容器范围内，把 --wine / --wine-dark /
   --wine-grad 这三个 CSS 变量重新赋值成靛蓝色系。整个项目里几乎所有组件
  （按钮、侧边栏高亮、卡片强调色、输入框聚焦边框……）原本就是引用 var(--wine)
   而不是写死的十六进制颜色，所以这一处变量覆盖能让"平台管理台"里复用的所有
   现成组件自动换肤，不需要给每一个组件类名单独重新定义一遍颜色。
   ===================================================================== */
#platform-screen {
  --wine: var(--navy);
  --wine-dark: var(--navy-dark);
  --wine-grad: var(--navy-grad);
}
/* 少数几个组件当初用的是写死的 rgba() 阴影色（不是 var(--wine)），变量覆盖对它们
   不生效，这里单独把这几处也换成靛蓝色系的阴影，保证换肤没有遗漏的死角。 */
#platform-screen .btn-primary {
  box-shadow: 0 1px 1px rgba(27, 42, 74, 0.22), 0 4px 10px rgba(27, 42, 74, 0.3);
}
#platform-screen .btn-primary:hover {
  box-shadow: 0 2px 2px rgba(27, 42, 74, 0.26), 0 6px 16px rgba(27, 42, 74, 0.36);
}
#platform-screen .btn-primary:active { box-shadow: 0 1px 1px rgba(27, 42, 74, 0.22); }

/* 顶部条改成实心深靛蓝底，一进平台管理台就能一眼看出"这不是公司驾驶舱"，
   不需要读文字才能分辨当前在哪个界面。 */
#platform-screen .topbar {
  background: var(--navy-grad);
  border-bottom: 1px solid var(--navy-dark);
}
#platform-screen .topbar .brand-inline h2 { color: #fff; }
#platform-screen .topbar .brand-inline span { color: rgba(255, 255, 255, 0.72); }
#platform-screen .topbar-right .pill {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
#platform-screen .topbar-right select,
#platform-screen .topbar-right .btn-small {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}
#platform-screen .topbar-right select option { color: var(--text); }
#platform-screen .topbar-right .btn-small:hover { background: rgba(255, 255, 255, 0.2); }

/* 侧边栏也是深靛蓝底（而不是公司驾驶舱那种白底+悬浮高亮），当前选中的模块用金色
   左边框标出来——靛蓝+金色是很经典的"管理室/后台"配色组合，视觉上明确传达
   "这里是管理其它公司的地方，不是某一家公司自己的经营界面"。 */
#platform-screen .sidebar {
  background: var(--navy-dark);
  border-radius: var(--radius);
  padding: 18px 12px;
}
#platform-screen .nav-item { color: rgba(255, 255, 255, 0.62); border-left: 3px solid transparent; border-radius: 8px; }
#platform-screen .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
#platform-screen .nav-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-left: 3px solid var(--gold);
  box-shadow: none;
}

/* 总览仪表盘卡片强调色起一个中性的别名，语义上不再叫"accent-wine"（那个名字是
   公司驾驶舱那边先起的），效果完全一样（都是读同一个被覆盖过的 var(--wine)）。 */
.card.accent-navy .value { color: var(--wine); }
.card.accent-navy::before { background: var(--wine); }
.card.accent-gold .value { color: var(--gold-dark); }
.card.accent-gold::before { background: var(--gold); }
.card.accent-dim .value { color: var(--text-dim); }
.card.accent-dim::before { background: var(--border-strong); }

/* 订阅与续费管理表格：状态徽章复用全局 badge-* 类（green=已订阅/orange=即将到期/
   dim=试用中/red=已过期），这里只补一个"不受限"的中性徽章样式——平台管理员老流程
   手动开通、从没设过试用期的公司，不应该被误判成任何一种"到期风险"状态。 */
.badge-navy { background: rgba(27, 42, 74, 0.08); color: var(--navy); }
.subscription-days-cell { font-variant-numeric: tabular-nums; }
.subscription-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* 广告与商业化：卡片式布局，比原来的表格更贴近这条广告实际展示出来的样子。 */
.ads-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.ad-mgmt-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-mgmt-card-head { display: flex; justify-content: space-between; align-items: center; }
.ad-mgmt-card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.ad-mgmt-card-body { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.ad-mgmt-card-media { width: 100%; border-radius: 8px; max-height: 140px; object-fit: cover; }
.ad-mgmt-card-actions { display: flex; gap: 6px; margin-top: 4px; }

/* 首页公告条：平台管理员在"平台设置"里临时插播的一句话（限时活动/维护通知），
   金色渐变条，放在语言切换下拉框和主卡片之间，足够醒目但不遮挡任何操作入口，
   为空时整个条完全不占位（display:none 由 .hidden 控制，不是靠高度塌陷）。 */
/* #landing-screen 默认（见文件靠前的共享规则）是 flex-direction:row，对只有一个子元素
   的登录/注册/试用锁定页没有影响；这里单独覆盖成 column，让公告条能正常"叠在"角色选择
   卡片上方，而不是和它并排在一条水平线上挤在一起。只加在 #landing-screen 自己身上，
   不动其它几个共享同一条基础规则的屏幕。 */
#landing-screen { flex-direction: column; gap: 16px; }
.homepage-announcement-banner {
  background: linear-gradient(90deg, #E8B84B 0%, #C9972B 100%);
  color: #3A2A0A;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  letter-spacing: 0.1px;
  border-radius: 10px;
  max-width: 640px;
}

@media (max-width: 900px) {
  #platform-screen .sidebar { border-radius: 0; }
}

/* 编辑商品面板里"预警线/建议采购量"标题后回显当前单位 */
.inv-unit-echo { font-weight: 500; color: var(--text-dim); }


/* 发票记录表：手机上（≤720px）由表格切换成卡片——每行一张卡，单元格左侧显示字段名（td 的 data-label），
   编辑状态下每个输入框前面自然就有了标签，不再是 8 列横向挤在一起看不清、点不准。电脑上仍是普通表格。 */
@media (max-width: 720px) {
  #receipts-table thead { display: none; }
  #receipts-table, #receipts-table tbody, #receipts-table tr.rcpt-row, #receipts-table tr.rcpt-row td { display: block; width: 100%; box-sizing: border-box; }
  #receipts-table tr.rcpt-row {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 6px 12px; margin: 0 0 10px; box-shadow: var(--shadow-card-sm);
  }
  #receipts-table tr.rcpt-row td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--border); text-align: right;
  }
  #receipts-table tr.rcpt-row td:last-child { border-bottom: none; }
  #receipts-table tr.rcpt-row td::before {
    content: attr(data-label); flex: 0 0 auto; min-width: 72px;
    font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: left;
  }
  #receipts-table tr.rcpt-row td .edit-input { flex: 1; max-width: 62%; }
  #receipts-table tr.rcpt-row td.rcpt-actions { justify-content: flex-end; flex-wrap: wrap; }
  #receipts-table tr.rcpt-row td.rcpt-actions .btn-small { flex: 1; }
  /* 空表占位那一行（colspan 的“—”）不套卡片样式 */
  #receipts-table tr:not(.rcpt-row) td { display: block; padding: 12px; }
}

/* 编辑发票时的"税额"格子里有三个输入框（21% / 9% / 不含税），上下排列，每个框前面一个小标签 */
#receipts-table td.rcpt-vat-edit .rcpt-vat-field { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
#receipts-table td.rcpt-vat-edit .rcpt-vat-field span { flex: 0 0 auto; min-width: 42px; font-size: 12px; color: var(--text-dim); text-align: left; }
#receipts-table td.rcpt-vat-edit .rcpt-vat-field .edit-input { flex: 1; min-width: 80px; max-width: none; }
@media (max-width: 720px) {
  #receipts-table tr.rcpt-row td.rcpt-vat-edit { flex-wrap: wrap; }
  #receipts-table tr.rcpt-row td.rcpt-vat-edit .rcpt-vat-field { flex: 0 0 62%; max-width: 62%; margin-left: auto; }
}

/* 缺报税信息（发票号码/含税金额/税额/到期日）的发票：供应商名下面一行黄色小提示 */
#receipts-table .rcpt-missing { display: block; width: fit-content; margin-top: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; line-height: 1.5; color: var(--orange); background: var(--orange-bg); white-space: normal; }
#receipts-table .rcpt-amount-issue { display: block; width: fit-content; margin-top: 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--red); background: var(--red-bg); white-space: normal; }
@media (max-width: 720px) {
  #receipts-table tr.rcpt-row td:has(.rcpt-missing), #receipts-table tr.rcpt-row td:has(.rcpt-amount-issue) { flex-wrap: wrap; }
  #receipts-table tr.rcpt-row td .rcpt-missing, #receipts-table tr.rcpt-row td .rcpt-amount-issue { flex: 0 0 100%; width: auto; margin-left: auto; max-width: fit-content; }
}

/* 疑似重复发票：每组一个红框，组里每张发票一行（复用到期预警的行样式），右下角"不是重复" */
.rcpt-dup-group { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin-bottom: 10px; border: 1px solid rgba(200, 40, 40, 0.35); border-radius: 12px; background: rgba(200, 40, 40, 0.04); }
.rcpt-dup-group .rcpt-due-row { flex-wrap: wrap; }
.rcpt-dup-actions { display: flex; justify-content: flex-end; }
#receipts-table .rcpt-dup-badge { display: block; width: fit-content; margin-top: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--red); background: var(--red-bg); }
@media (max-width: 720px) {
  #receipts-table tr.rcpt-row td:has(.rcpt-dup-badge) { flex-wrap: wrap; }
  #receipts-table tr.rcpt-row td .rcpt-dup-badge { flex: 0 0 100%; width: auto; margin-left: auto; max-width: fit-content; }
}

/* 发票列表空状态：一句完整的说明文字，允许换行 */
#receipts-table td.rcpt-empty { white-space: normal; line-height: 1.5; font-size: 13px; padding: 14px 12px; }

/* 到期发票预警：一行一张，紧凑；手机上金额/日期换到第二行 */
.rcpt-due-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.rcpt-due-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); font-size: 13px; }
.rcpt-due-row.overdue { border-color: rgba(200, 40, 40, 0.35); background: rgba(200, 40, 40, 0.05); }
.rcpt-due-row.soon { border-color: rgba(230, 140, 20, 0.4); background: rgba(230, 140, 20, 0.06); }
.rcpt-due-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rcpt-due-vendor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rcpt-due-meta { color: var(--text-dim); }
.rcpt-due-row .btn-small { flex: 0 0 auto; }
.rcpt-due-empty, .rcpt-due-more { font-size: 13px; color: var(--text-dim); padding: 6px 2px; }
.rcpt-due-more { cursor: pointer; text-decoration: underline; }
.inv-group-count-alert { color: #B3261E; border-color: rgba(179, 38, 30, 0.4); background: rgba(179, 38, 30, 0.06); font-weight: 600; }

/* 疑似重复品项清理条 */
.inv-dup-box { margin: 0 0 12px; border: 1px solid rgba(230, 140, 20, 0.45); background: rgba(230, 140, 20, 0.07); border-radius: 12px; padding: 4px 12px 8px; font-size: 13px; }
.inv-dup-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; cursor: pointer; font-weight: 600; }
.inv-dup-explain { color: var(--text-dim); font-size: 12px; margin: 0 0 8px; line-height: 1.5; }
.inv-dup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px dashed var(--border); }
.inv-dup-names { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.inv-dup-name { font-weight: 600; }
.inv-dup-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-dup-actions select { max-width: 220px; }
/* OCR 预览"匹配到"列的提示 */
.ocr-match-hint { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.ocr-match-hint.warn { color: #B26A00; }

/* 商品显示名：图标大一点、原始外文名作小字（给不懂外语的用户看） */
.item-emoji { font-size: 1.25em; margin-right: 6px; vertical-align: -2px; }
.item-raw-name { font-size: 11px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-row .item-raw-name { margin-top: 0; }
.inv-item-name .item-emoji { font-size: 1.35em; }

/* 员工端多件出/入库面板 */
.wh-more { font-size: 13px; padding: 0 10px; }
.wh-sheet { position: relative; background: var(--card-bg); border-radius: 18px; padding: 22px 18px 18px; width: min(420px, 94vw); box-shadow: var(--shadow-card); }
.wh-sheet-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 20px; color: var(--text-dim); cursor: pointer; }
.wh-sheet-head { text-align: center; margin-bottom: 14px; }
.wh-sheet-emoji { font-size: 56px; line-height: 1; }
.wh-sheet-name { font-size: 24px; font-weight: 700; margin-top: 6px; }
.wh-sheet-raw { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.wh-sheet-stock { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.wh-sheet-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.wh-sheet-chips button { min-width: 52px; height: 48px; font-size: 20px; font-weight: 700; border-radius: 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
.wh-sheet-chips button.active { background: var(--wine); color: #fff; border-color: var(--wine); }
.wh-sheet-chips input { width: 110px; height: 48px; font-size: 18px; text-align: center; }
.wh-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-sheet-actions button { height: 58px; font-size: 18px; font-weight: 700; border-radius: 14px; border: none; cursor: pointer; }
.wh-sheet-take { background: #B3261E; color: #fff; }
.wh-sheet-return { background: var(--green); color: #fff; }

/* ===== 菜单经营：配方 / 每日出品 / 销售曲线 ===== */
.recipe-lines { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.recipe-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto 70px auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.recipe-line-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-line-cost { text-align: right; color: var(--text-dim); font-size: 13px; }
.recipe-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto; gap: 8px; align-items: center; margin-top: 8px; }
.recipe-summary { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.text-danger { color: #B3261E; }
.menu-output-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.menu-output-toolbar .btn-small.active { background: var(--wine); color: #fff; border-color: var(--wine); }
.menu-output-list { display: flex; flex-direction: column; gap: 8px; }
.menu-output-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(70px, 1fr)) minmax(0, 1.6fr); gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.menu-output-row.recorded { border-left: 4px solid var(--green); }
.menu-output-row.invalid { border-color: #B3261E; }
.menu-output-name { font-weight: 700; font-size: 15px; }
.menu-output-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-dim); }
.menu-output-field input { width: 100%; font-size: 18px; font-weight: 700; text-align: center; padding: 6px 4px; }
.menu-output-calc { font-size: 12px; color: var(--text-dim); text-align: right; }
@media (max-width: 720px) {
  .menu-output-row { grid-template-columns: repeat(3, 1fr); }
  .menu-output-name, .menu-output-calc { grid-column: 1 / -1; text-align: left; }
  .recipe-line { grid-template-columns: minmax(0, 1fr) 80px auto; }
  .recipe-add-row { grid-template-columns: 1fr 80px; }
}
.menu-sales-chart { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px 4px; }
.menu-sales-chart svg { display: block; height: 220px; }
.menu-chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); padding: 6px 8px 4px; }
.menu-chart-legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.menu-rank-title { font-weight: 700; margin: 14px 0 6px; }
.menu-rank-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(80px, 2fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.menu-rank-pos { font-weight: 700; color: var(--text-dim); }
.menu-rank-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-rank-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.menu-rank-bar span { display: block; height: 100%; background: var(--wine); border-radius: 4px; }
.menu-rank-meta { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) { .menu-rank-row { grid-template-columns: 24px minmax(0, 1fr); } .menu-rank-bar { grid-column: 2; } .menu-rank-meta { grid-column: 2; white-space: normal; } }
.wh-output { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* OCR 预览表：电脑上品项列加宽；手机上每行一张卡片，发票原文品名大字在最上面 */
#ocr-preview-table .ocr-name-input { min-width: 180px; width: 100%; }
#ocr-preview-table .ocr-num { width: 84px; }
#ocr-preview-table .ocr-unit { width: 64px; }
#ocr-preview-table .ocr-cat { width: 110px; }
#ocr-preview-table .ocr-cell-match select { max-width: 200px; }
.ocr-raw-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; word-break: break-word; }
@media (max-width: 720px) {
  #ocr-preview-table thead { display: none; }
  #ocr-preview-table, #ocr-preview-table tbody, #ocr-preview-table tr.ocr-row, #ocr-preview-table tr.ocr-row td { display: block; width: 100%; box-sizing: border-box; }
  #ocr-preview-table tr.ocr-row { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; box-shadow: var(--shadow-card-sm); position: relative; }
  #ocr-preview-table tr.ocr-row td { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
  #ocr-preview-table tr.ocr-row td:last-child { border-bottom: none; }
  #ocr-preview-table tr.ocr-row td::before { content: attr(data-label); flex: 0 0 auto; min-width: 64px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
  #ocr-preview-table tr.ocr-row td input, #ocr-preview-table tr.ocr-row td select { flex: 1; max-width: 62%; width: auto; min-width: 0; }
  /* 品项格：原文大字独占一行放最上面 */
  #ocr-preview-table tr.ocr-row td.ocr-cell-name { display: block; order: -1; padding-top: 2px; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-name::before { display: block; margin-bottom: 2px; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-name .ocr-raw-name { font-size: 17px; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-name input { max-width: 100%; width: 100%; }
  #ocr-preview-table tr.ocr-row { display: flex; flex-direction: column; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-include { position: absolute; top: 10px; right: 12px; width: auto; border: none; padding: 0; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-include::before { content: ""; min-width: 0; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-match { flex-direction: column; align-items: stretch; }
  #ocr-preview-table tr.ocr-row td.ocr-cell-match select { max-width: 100%; }
}

/* ===== 通用：宽表格在手机上变卡片（td[data-label] 由 annotateTablesForMobile 自动加） ===== */
@media (max-width: 720px) {
  .table-scroll { overflow-x: visible; background: transparent; border: none; box-shadow: none; }
  table.mobile-cards { display: block; width: 100%; border-collapse: separate; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards tbody { display: block; width: 100%; }
  table.mobile-cards tbody tr { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px; margin: 0 0 10px; box-shadow: var(--shadow-card-sm); }
  table.mobile-cards tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right; width: 100%; box-sizing: border-box; white-space: normal; word-break: break-word; }
  table.mobile-cards tbody tr td:last-child { border-bottom: none; }
  table.mobile-cards tbody tr td::before { content: attr(data-label); flex: 0 0 auto; min-width: 68px; max-width: 42%; font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: left; }
  table.mobile-cards tbody tr td:first-child { font-weight: 700; font-size: 15px; }
  table.mobile-cards tbody tr td input, table.mobile-cards tbody tr td select, table.mobile-cards tbody tr td textarea { flex: 1; max-width: 62%; min-width: 0; width: auto; }
  table.mobile-cards tbody tr td.mt-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  table.mobile-cards tbody tr td.mt-actions::before { display: none; }
  table.mobile-cards tbody tr td.mt-actions .btn-small { flex: 1 1 auto; min-height: 38px; }
  table.mobile-cards tbody tr.mt-full { padding: 10px 12px; }
  table.mobile-cards tbody tr.mt-full td { display: block; text-align: left; border: none; padding: 0; }
  table.mobile-cards tbody tr.mt-full td::before { display: none; }
  /* 展开的详情行（员工详情/留言板等）：占满卡片、不加字段名 */
  table.mobile-cards tbody tr.emp-detail-row { background: var(--surface-2); }
}

/* 员工端库存取用：手机上按钮单独占一行、三等分、不换行——375px 下"出库/入库"两个字曾被挤成上下两行 */
@media (max-width: 720px) {
  .wh-row { flex-wrap: wrap; }
  .wh-row-info { flex: 1 1 100%; }
  .wh-stepper { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 6px; }
  .wh-stepper button { white-space: nowrap; min-height: 42px; font-size: 14px; padding: 0 6px; justify-content: center; }
}

/* 订阅发票列表（公司管理 → 订阅计费）：每行 发票号+状态 / 日期+账期 / 金额+PDF 按钮，手机上同样一行一张 */
.billing-invoices { display:flex; flex-direction:column; gap:8px; }
.billing-invoice-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg, transparent); }
.billing-invoice-row.unpaid { border-color:#f59e0b; }
.billing-invoice-main { min-width:0; flex:1; }
.billing-invoice-no { font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.billing-invoice-meta { font-size:12px; color:var(--text-dim); margin-top:2px; line-height:1.5; }
.billing-invoice-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.billing-invoice-amt { font-weight:700; font-size:15px; }
.billing-invoice-dl { width:auto; padding:6px 12px; font-size:12.5px; text-decoration:none; display:inline-block; }

#qr-label-print { display: none; }

/* 疑似漏记出库横幅（老板端库存页） */
.inv-silent-box { border: 1px solid #f59e0b; background: #fffbeb; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.inv-silent-head { font-weight: 700; font-size: 14px; color: #92400e; }
.inv-silent-explain { font-size: 12px; color: #78350f; margin: 4px 0 8px; line-height: 1.5; }
.inv-silent-list { display: flex; flex-direction: column; gap: 6px; }
.inv-silent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 8px; padding: 8px 10px; }
.inv-silent-name { font-weight: 600; font-size: 14px; }
.inv-silent-meta { font-size: 12px; color: var(--text-dim); flex: 1; min-width: 160px; }
.inv-silent-fix { width: auto; padding: 6px 12px; font-size: 12.5px; }

/* 盘点记录（老板端） */
.stk-session { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.stk-session-head { font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.stk-line { font-size: 13.5px; padding: 3px 0; }
.stk-line.short .stk-diff { color: #dc2626; font-weight: 700; }
.stk-line.over .stk-diff { color: #16a34a; font-weight: 700; }
.stk-line.ok { color: #16a34a; }

/* 员工端盘点"数一数" */
.wh-stocktake { border: 2px solid #f59e0b; background: #fffbeb; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.wh-stocktake-title { font-size: 18px; font-weight: 700; }
.wh-stocktake-sub { font-size: 13px; color: #78350f; margin: 4px 0 10px; line-height: 1.5; }
.wh-stk-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.wh-stk-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.wh-stk-emoji { font-size: 24px; }
.wh-stk-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-stk-unit { font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
.wh-stk-row .wh-stk-input { width: 84px !important; max-width: 84px; flex: 0 0 84px; margin: 0; font-size: 22px; font-weight: 700; text-align: center; padding: 8px 6px; border: 2px solid var(--border); border-radius: 10px; }
.wh-stk-input.is-bad { border-color: #dc2626; }

/* 下班追问"今天拿了什么货" */
.wh-recall-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wh-recall-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 12px; background: #fff; font-size: 16px; text-align: left; cursor: pointer; }
.wh-recall-item .wh-recall-emoji { font-size: 26px; }
.wh-recall-item .wh-recall-name { flex: 1; font-weight: 600; }
.wh-recall-item .wh-recall-cta { font-size: 13px; color: var(--text-dim); }
.wh-recall-item .wh-recall-count { font-weight: 700; color: #16a34a; min-width: 36px; text-align: right; }
.wh-recall-item.done { border-color: #16a34a; background: #f0fdf4; }

/* 底部固定操作条：返回 / 首页 / 退出。所有登录后的页面都显示（body.has-action-bar），
   内容区加底部留白避免被挡住。桌面老板端已有侧边栏+顶栏，但老板要求每页都有，所以也显示。 */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); }
.action-bar.hidden { display: none; }
.action-bar-btn { flex: 1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; font-size: 14.5px; font-weight: 600; color: var(--text); background: var(--surface-2, #f3f4f6); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.action-bar-btn:active { transform: scale(0.98); }
.action-bar-ico { font-size: 17px; line-height: 1; }
.action-bar-logout { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
body.has-action-bar #clock-screen .clock-card, body.has-action-bar #app-screen main, body.has-action-bar #platform-screen main { padding-bottom: 92px; }
body.has-action-bar .toast { bottom: 84px; }
@media (min-width: 901px) { .action-bar { max-width: 520px; left: auto; right: 24px; bottom: 16px; border-radius: 16px; border: 1px solid var(--border); padding: 8px 10px; } }
@media print { .action-bar { display: none !important; } }

/* 离线状态条 */
.offline-banner { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; border: 1px solid #fdba74; font-size: 13.5px; text-align: left; line-height: 1.5; }
.offline-banner .offline-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offline-banner .offline-line + .offline-line { margin-top: 6px; }
.offline-banner .offline-failed { display: block; color: #9a3412; }
.offline-banner .offline-failed ul { margin: 4px 0 6px 18px; padding: 0; font-size: 12.5px; }
.offline-banner .btn-small { width: auto; padding: 4px 10px; }

/* 品项面板：进货包装 1 [箱] = [10] 袋 */
.inv-pack-row { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.inv-pack-row input { width: 110px !important; max-width: 110px; margin: 0; }
.inv-item-pack-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
/* OCR 预览：箱→袋换算行 */
.ocr-pack-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); }
.ocr-pack-row input[type="checkbox"] { width: 18px !important; height: 18px; margin: 0; }
@media (max-width: 720px) {
  /* 手机卡片布局里数量格变成 flex 行，换算行要独占一行、靠右对齐 */
  #ocr-preview-table tr.ocr-row td:has(.ocr-pack-row) { flex-wrap: wrap; }
  #ocr-preview-table tr.ocr-row td .ocr-pack-row { flex-basis: 100%; justify-content: flex-end; margin-top: 2px; }
}
.ocr-pack-row input.ocr-pack-size { width: 64px !important; max-width: 64px; margin: 0; padding: 4px 6px; font-size: 13px; }
.ocr-pack-row input.ocr-stock-unit { width: 64px !important; max-width: 64px; margin: 0; padding: 4px 6px; font-size: 13px; }
.ocr-pack-row .ocr-pack-result { font-weight: 700; color: var(--text); }

/* ---------------------------------------------------------------------------
   出入库流水页（老板："出入库流水是非常重要的信息栏目"）。五种类型固定颜色：
   入库=绿(+) / 出库=红(−) / 报损=橙(−) / 库存修正=黄(±) / 品项合并=灰。一眼分清"真的进货/拿货"和"改数字"。
   --------------------------------------------------------------------------- */
.ledger-explain { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: -4px 0 14px; }
.ledger-filters { padding: 12px 14px; margin-bottom: 14px; }
.ledger-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ledger-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); min-width: 120px; flex: 1 1 140px; }
.ledger-filter input, .ledger-filter select { width: 100%; min-width: 0; padding: 8px 10px; font-size: 13.5px; }
.ledger-filter-search { flex: 2 1 200px; }
.ledger-summary { margin-bottom: 14px; }
.ledger-sum-card { padding: 12px 14px; }
.ledger-sum-card .card-label { font-size: 12px; color: var(--text-dim); }
.ledger-sum-card .card-value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.tx-type-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tx-type-in { background: var(--green-bg); color: var(--green); }
.tx-type-out { background: var(--red-bg); color: var(--red); }
.tx-type-waste { background: var(--orange-bg); color: var(--orange); }
.tx-type-adjust { background: #FFF8D6; color: #8A6D00; }
.tx-type-merge { background: var(--surface-2); color: var(--text-dim); }
.tx-delta-pos { color: var(--green); font-weight: 700; }
.tx-delta-neg { color: var(--red); font-weight: 700; }
.ledger-delta-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger-note-cell { max-width: 320px; font-size: 12.5px; color: var(--text-dim); word-break: break-word; }
tr.ledger-row.tx-type-merge td { color: var(--text-dim); }
.ledger-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; margin-bottom: 12px; }
.btn-ledger-jump { font-weight: 600; }
@media (max-width: 720px) {
  .ledger-filter { flex-basis: 45%; }
  .ledger-filter-search { flex-basis: 100%; }
  .ledger-note-cell { max-width: none; }
}

/* 入库规则（发票预览）：单位不一致 → 换算行必填高亮；被后端拦下的行标红并写原因；"相似"行的"确认是新商品"勾选 */
.ocr-pack-row.ocr-pack-required { border: 1.5px dashed var(--orange); background: var(--orange-bg); border-radius: 8px; padding: 6px 8px; flex-wrap: wrap; }
.ocr-pack-row.ocr-pack-required .ocr-pack-size:placeholder-shown { border-color: var(--orange); }
.ocr-pack-row.ocr-pack-required .ocr-match-hint { flex-basis: 100%; margin-top: 4px; }
.ocr-force-new { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
tr.ocr-row-blocked td { background: var(--red-bg); }
table.mobile-cards tr.ocr-row-blocked { border: 1.5px solid var(--red); }
.ocr-block-reason { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--red); line-height: 1.5; }
.inv-dup-row.inv-dup-mismatch { border-left: 3px solid var(--orange); padding-left: 10px; }

/* 发票管理：PDF 发票的预览标签/缩略图 */
.receipt-pdf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); font-size: 13px; font-weight: 600; max-width: 100%; }
.receipt-pdf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-pdf-thumb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; background: var(--surface-2); font-size: 10px; font-weight: 700; color: var(--text-dim); text-align: center; line-height: 1.2; }

/* 库存卡片：按最近用量算的"还够几天"。快用完（自动线触发）红字 */
.inv-item-cover { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.inv-item-cover.is-low { color: var(--red); font-weight: 600; }

/* 进价记忆：发票预览的价格提示 + 编辑面板的进价记录 + 供应商输入行 */
.ocr-vendor-row { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-width: 360px; font-size: 12.5px; color: var(--text-dim); }
.ocr-price-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
.ocr-price-hint.up { color: #8A6D00; background: #FFF8D6; border-radius: 6px; padding: 3px 6px; font-weight: 600; }
.inv-price-history { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.inv-price-row { display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.inv-price-vendors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

.ai-todo-list { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }

/* 请假工资（事假/病假，老板逐条填写） */
.leave-pay-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.leave-pay-cell .badge { white-space: nowrap; }
@media (max-width: 720px) { .leave-pay-cell { align-items: flex-end; text-align: right; } }
.leave-pay-note { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; white-space: normal; }
.leave-pay-editor { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 6px 0; }
.leave-pay-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); flex: 1 1 140px; min-width: 140px; }
.leave-pay-editor label select, .leave-pay-editor label input { width: 100%; box-sizing: border-box; }
.leave-pay-editor label.hidden { display: none; }
.leave-pay-editor .leave-pay-note-field { flex: 1 1 200px; }
.leave-pay-editor-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* 员工语音留言 */
.staff-voice-btn { width: 100%; margin-top: 8px; }
.staff-voice-recording { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--red-bg); color: var(--red); font-weight: 600; font-size: 14px; }
.staff-voice-recording.hidden { display: none; }
.staff-voice-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: staff-voice-pulse 1s infinite; }
@keyframes staff-voice-pulse { 50% { opacity: 0.3; } }
.staff-voice-timer { font-variant-numeric: tabular-nums; }
.staff-voice-max { color: var(--text-dim); font-weight: 400; }
.staff-voice-actions { flex-basis: 100%; display: flex; gap: 8px; }
.staff-voice-actions button { flex: 1; }
.staff-voice-actions #staff-voice-send { flex: 2; }
.staff-voice-play { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--green-bg); color: var(--green); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.staff-voice-play.playing { background: var(--green); color: #fff; }
.staff-voice-expired { font-size: 12.5px; color: var(--text-dim); margin: 2px 0 4px; }

/* 今日出品：两步（① 早上剩余 ② 制作完成），都先拍照 */
.wh-output-step { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.wh-output-step-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.wh-photo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.wh-photo-btn { margin-top: 0; width: auto; }
.wh-photo-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wh-photo-count { font-size: 12px; color: var(--green); font-weight: 600; }
.wh-photo-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; background: var(--surface-2); }
.wh-photo-thumb.expired { display: inline-flex; align-items: center; justify-content: center; cursor: default; font-size: 16px; }
.menu-output-carried { font-size: 11.5px; font-weight: 500; color: var(--text-dim); margin-top: 2px; }
.menu-output-loss { font-size: 11.5px; font-weight: 600; color: var(--red); margin-top: 2px; }
.menu-morning-row { grid-template-columns: minmax(0, 1.4fr) minmax(70px, 1fr) minmax(0, 1.6fr); }
.menu-morning-row.invalid { border-color: #B3261E; }
.menu-morning-actions { display: flex; gap: 6px; }
.menu-morning-choice { flex: 1; display: flex; }
.menu-morning-choice input { position: absolute; opacity: 0; pointer-events: none; }
.menu-morning-choice span { flex: 1; text-align: center; padding: 9px 4px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.menu-morning-choice.keep input:checked + span { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.menu-morning-choice.discard input:checked + span { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.menu-output-photos { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.menu-output-photos-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .menu-morning-row { grid-template-columns: 1fr 1fr; }
  .menu-morning-row .menu-output-name { grid-column: 1 / -1; }
}

/* 员工端看不到进货价：拍发票入库核对表的「单价」列整列隐藏 */
#ocr-preview-table.ocr-no-prices th:nth-child(6), #ocr-preview-table.ocr-no-prices td.ocr-cost-cell { display: none !important; }
/* 发票入库记录 */
.ocr-imports-block { margin-top: 16px; }
.ocr-imports-title { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.ocr-import-card { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.ocr-import-card.dup { border-color: rgba(200, 40, 40, 0.45); background: rgba(200, 40, 40, 0.04); }
.ocr-import-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ocr-import-title { font-weight: 700; font-size: 13.5px; }
.ocr-import-card .rcpt-dup-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--red); background: var(--red-bg); }
.ocr-import-meta { font-size: 12px; color: var(--text-dim); margin: 2px 0 6px; }
.ocr-import-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.ocr-import-item { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ocr-import-qty { width: 72px; text-align: center; padding: 4px 6px; }
.ocr-import-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
.ocr-import-actions .ocr-import-save { margin-top: 0; width: auto; padding: 7px 16px; }

/* 员工未读留言提示：菜单红色数字、员工名字旁的 💬 N */
.nav-item .nav-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle; }
.nav-item .nav-badge.hidden { display: none; }
.emp-msg-badge { display: inline-block; margin: 0 2px; padding: 2px 8px; border: none; border-radius: 10px; background: var(--red-bg); color: var(--red); font-size: 12px; font-weight: 700; cursor: pointer; }

/* 员工打卡页的功能标题（配送 / 库存取用 / 今日出库 / 今日出品 / 留言板 / 拍发票入库 / 拍照登记出库 / 温度记录 / 请假中心…）：
   老板反馈"标题太淡、看不到"——统一改成大号、黑色、加粗，左边一条颜色竖条，一眼能找到每个功能在哪 */
.wh-title,
.wh-board-title,
.wh-today-board .wh-board-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
  line-height: 1.35;
  padding-left: 10px;
  border-left: 4px solid var(--green);
  margin-bottom: 10px;
}
.wh-output-step-title { font-size: 15px; font-weight: 800; color: var(--text); }

/* 营收趋势：横轴三个日期（开始 / 中间 / 今天），数据太少时的提示 */
.trend-x-labels { display: flex; justify-content: space-between; }
.trend-hint { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* 请假表单：开始 / 结束日期上下排开、带文字说明，下面显示一共几天 */
.leave-date-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.leave-date-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.leave-date-field input { width: 100%; box-sizing: border-box; }
.leave-days-total { font-size: 12.5px; color: var(--green); font-weight: 600; }
.leave-days-total.warn { color: var(--red); }
/* 连排多天：休息日选择 */
.shift-rest-days { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shift-rest-days.hidden { display: none; }
.shift-rest-label { font-size: 13px; color: var(--text-dim); }
.shift-rest-chip.active { background: var(--red-bg); color: var(--red); border-color: var(--red); text-decoration: line-through; }

/* 请假审批表的日期列：「10月5日 – 10月9日 · 共 5 天」不要被挤成好几行 */
#leave-requests-table td.leave-range-cell { white-space: nowrap; font-weight: 600; }

/* 帮员工登记请假：下面一行显示「10月5日 – 10月9日 · 一共 5 天」 */
.leave-register-form .leave-days-total { flex-basis: 100%; }

/* 温度类型 / 位置管理（老板端） */
.temp-manage { margin-bottom: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.temp-manage-title { font-size: 14px; font-weight: 700; margin: 4px 0 8px; }
.temp-manage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.temp-manage-row input, .temp-manage-row select { flex: 1 1 120px; min-width: 0; }
.temp-manage-row .btn-small { flex: 0 0 auto; }
.temp-manage-add { padding-top: 6px; border-top: 1px dashed var(--border); margin-bottom: 12px; }

/* 员工端首页：一格一格的功能按钮（和老板端首页同一套 .app-tile 样式），每行 3 个，手指好点 */
#clock-screen .emp-app-grid { margin-top: 18px; }
#clock-screen .emp-app-grid > .app-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px 8px; justify-items: center; }
#clock-screen .emp-app-grid .app-tile-label { font-size: 13.5px; }
/* 老板回复提醒条 */
.emp-reply-banner { display: block; width: 100%; margin: 12px 0 0; padding: 12px 14px; border: none; border-radius: 12px; background: var(--red-bg); color: var(--red); font-size: 15px; font-weight: 800; text-align: left; cursor: pointer; }
.emp-reply-banner.hidden { display: none; }
/* 功能页：上面留一点空，标题醒目 */
#clock-screen .emp-page.wh-card { margin-top: 12px; }
/* 扫码 */
.emp-scan-hint, .emp-scan-fallback { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 12px; }
.emp-scan-fallback { padding: 10px 12px; border-radius: 10px; background: var(--orange-bg); color: var(--orange); font-weight: 600; }
.emp-scan-fallback.hidden, .emp-scan-box.hidden { display: none; }
.emp-scan-start { width: 100%; font-size: 17px; padding: 14px; }
.emp-scan-box video { width: 100%; max-height: 60vh; border-radius: 12px; background: #000; margin-bottom: 8px; object-fit: cover; }
.emp-scan-box button { width: 100%; }
.staff-msg-keep-hint { font-size: 12px; color: var(--text-dim); margin: 8px 0 4px; }

.emp-scan-aim { text-align: center; font-size: 13px; color: var(--text-dim); margin: -2px 0 8px; }
.emp-scan-photo-btn { width: 100%; }
.emp-scan-photo-btn.hidden { display: none; }

/* App 内相机（openInAppCamera）：全屏取景 + 底部圆形快门 */
.inapp-cam { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; flex-direction: column; }
.inapp-cam video { flex: 1; width: 100%; min-height: 0; object-fit: cover; background: #000; }
.inapp-cam-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: #000; }
.inapp-cam-side { flex: 1; background: none; border: none; color: #fff; font-size: 16px; padding: 12px 4px; cursor: pointer; }
.inapp-cam-shutter { width: 74px; height: 74px; flex: none; border-radius: 50%; background: #fff;
  border: 5px solid rgba(255,255,255,0.45); background-clip: padding-box; cursor: pointer; }
.inapp-cam-shutter:active { transform: scale(0.92); }


/* 平台管理台订阅表：公司名下面的地址小字 */
.subscription-company-address { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.35; max-width: 340px; }
.subscription-company-address a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.25); }

/* 新留言强提醒弹窗（showMessageAlert） */
.msg-alert-overlay { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 24, 18, 0.62); animation: msgAlertFade 0.2s ease-out; }
.msg-alert { width: 100%; max-width: 380px; background: var(--card-bg, #fff); border-radius: 22px; padding: 24px 20px 18px; text-align: center;
  border: 3px solid #C0392B; box-shadow: 0 20px 50px rgba(0,0,0,0.35); animation: msgAlertPop 0.35s cubic-bezier(.2,1.4,.4,1); }
.msg-alert-icon { font-size: 54px; line-height: 1; animation: msgAlertShake 0.9s ease-in-out infinite; display: inline-block; }
.msg-alert-title { margin: 12px 0 8px; font-size: 22px; font-weight: 800; color: #B03A2E; }
.msg-alert-preview { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #FBF3E8; color: var(--text); font-size: 16px;
  line-height: 1.45; text-align: left; max-height: 9em; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.msg-alert .msg-alert-view { width: 100%; margin: 0 0 8px; font-size: 18px; padding: 14px; }
.msg-alert .msg-alert-later { width: 100%; margin: 0; }
@keyframes msgAlertFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes msgAlertPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes msgAlertShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* 员工端功能页：字大一点、标题前有图标（2026-10 老板："字体太小，醒目一些，有明显的标识，不要太夸张"） */
#clock-screen .emp-page:not([data-emp-page="home"]) { font-size: 16px; }
#clock-screen .emp-page .wh-title { font-size: 21px; padding-left: 12px; border-left-width: 5px; margin-bottom: 14px; }
#clock-screen .emp-page .wh-title[data-icon]::before { content: attr(data-icon); margin-right: 8px; }
#clock-screen .emp-page .wh-board-title { font-size: 18px; }
#clock-screen .emp-page input:not([type="checkbox"]):not([type="radio"]),
#clock-screen .emp-page select,
#clock-screen .emp-page textarea { font-size: 17px; }
#clock-screen .emp-page .btn-primary, #clock-screen .emp-page .btn-secondary { font-size: 17px; }
#clock-screen .emp-page .btn-small { font-size: 15px; }
#clock-screen .wh-browse-toggle, #clock-screen .wh-category-header { font-size: 17px; }

/* 「📷 拍照」直接开相机的按钮（addCameraButton / setupOcrCameraButtons） */
.cam-btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cam-btn-row > button { margin-top: 0 !important; flex: 1 1 140px; }
.cam-direct-btn { margin-top: 0 !important; margin-bottom: 8px; }
.cam-btn-row .cam-direct-btn { margin-bottom: 0; }
#leave-proof-panel .cam-direct-btn { width: 100%; }
.cam-file-name { flex-basis: 100%; font-size: 14px; color: var(--text); }
.cam-file-name.hidden { display: none; }

/* 电脑上点「拍照」：用手机扫码在手机上拍（showPhoneHandoff） */
.phone-handoff-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,24,18,0.55); }
.phone-handoff { width: 100%; max-width: 360px; background: var(--card-bg, #fff); border-radius: 20px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 10px; }
.phone-handoff-title { font-size: 20px; font-weight: 800; color: var(--text); }
.phone-handoff-qr { display: flex; justify-content: center; padding: 8px; background: #fff; border-radius: 12px; min-height: 200px; word-break: break-all; font-size: 12px; }
.phone-handoff-hint { font-size: 14.5px; color: var(--text-dim); line-height: 1.45; }
.phone-handoff button { width: 100%; margin: 0 !important; }

/* 发票列表精简模式底部：说明 + 「显示本月全部」按钮 */
.rcpt-more-row td { text-align: center; padding: 12px 8px !important; }
.rcpt-compact-note { font-size: 13.5px; color: var(--text-dim); margin-bottom: 8px; }
.rcpt-more-btn { width: auto !important; margin: 0 auto !important; padding: 10px 22px; }

/* 配送中：醒目提醒配送员不要离开页面（网页版 App 离开后无法定位） */
.delivery-keep-open-warning { margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; background: #FDF0E6; border: 1px solid #F0C9A8; color: #8A4B1F; font-size: 14.5px; font-weight: 700; line-height: 1.45; }

/* 2026-10 配送：地址/电话必填 + 拍小票自动填写 + 顾客信息卡 + 发追踪链接 + 定位中断大红条 */
.dlv-ticket-btn { width: 100%; margin: 0 0 10px; font-size: 15px; padding: 12px; }
.dlv-ticket-status { font-size: 13px; padding: 8px 10px; border-radius: 10px; margin: -2px 0 10px; background: var(--card-bg); border: 1px solid var(--border); }
.dlv-ticket-status.busy { color: var(--text-dim); }
.dlv-ticket-status.ok { background: var(--green-bg); border-color: #A7DCC2; color: var(--green); }
.dlv-ticket-status.warn { background: #FDF0E6; border-color: #F0C9A8; color: #8A4B1F; }
.dlv-ticket-summary { font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: 10px; background: #F6F3EE; margin: 0 0 10px; overflow-wrap: anywhere; }
.dlv-field-label { display: block; font-size: 13px; font-weight: 600; margin: 6px 0 4px; }
.dlv-required { color: var(--red); }
.dlv-field-input { width: 100%; box-sizing: border-box; font-size: 16px; } /* 16px：iPhone 上点输入框不会自动放大页面 */
/* 带 #id 前缀：要压过 theme-mondrian.css 里 input:not(...):not(...) 的 !important 边框 */
#delivery-start-form .dlv-field-input.dlv-field-invalid { border: 2px solid var(--red) !important; background: var(--red-bg) !important; }
#delivery-start-form .dlv-field-input.dlv-autofilled { border: 2px solid #E8A33D !important; background: #FFF6E0 !important; }
.dlv-field-error { color: var(--red); font-size: 12.5px; font-weight: 600; margin: 4px 0 2px; }
.dlv-customer-card { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-bg); }
.dlv-customer-line { font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; margin-bottom: 4px; }
.dlv-customer-actions { display: flex; gap: 8px; margin-top: 8px; }
.dlv-action-link { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; margin: 0; padding: 11px 8px; font-size: 15px; box-sizing: border-box; min-height: 44px; white-space: nowrap; }
.dlv-send-box { margin: 0 0 10px; }
.dlv-send-main { width: 100%; margin: 0; padding: 14px; font-size: 16px; }
.dlv-send-sent { font-size: 12.5px; color: var(--green); margin-top: 6px; text-align: center; }
.dlv-send-options { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dlv-send-options .dlv-wa { background: #1FA855 !important; border-color: #1FA855 !important; color: #fff !important; }
.dlv-gps-banner { margin: 6px 0 10px; padding: 14px 12px; border-radius: 12px; background: #C62828; color: #fff; font-size: 17px; font-weight: 800; text-align: center; line-height: 1.35; animation: dlv-gps-pulse 1.2s ease-in-out 3; }
.dlv-gps-banner-sub { margin-top: 4px; font-size: 13px; font-weight: 500; opacity: .95; }
@keyframes dlv-gps-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* 打卡需要定位的说明弹窗：和新留言提醒同一套样式，边框换成柔和的橙色，步骤分行显示 */
.msg-alert.loc-required { border-color: #E0A060; }
.msg-alert.loc-required .msg-alert-title { color: var(--text); }
.msg-alert.loc-required .msg-alert-icon { animation: none; }
.msg-alert.loc-required .msg-alert-preview { font-size: 15px; max-height: 50vh; }

/* 配送监控：已送达记录折叠栏 */
.dlv-archive-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; background: transparent; cursor: pointer; text-align: left; font-size: 15px; font-weight: 700; color: var(--text); }
.dlv-archive-toggle:hover { background: rgba(0,0,0,0.03); }
.dlv-archive-caret { width: 14px; color: var(--text-dim); }
.dlv-archive-note { flex-basis: 100%; font-size: 12.5px; font-weight: 500; color: var(--text-dim); padding-left: 22px; }
.dlv-no-active { text-align: center; padding: 12px !important; }

/* 配送异常「已处理」 */
.dlv-resolve-btn { margin-top: 6px; }
.dlv-resolved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.dlv-anomalies-resolved { opacity: 0.55; text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.25); }

/* 行车里程 */
.mileage-hint { font-size: 14px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.mileage-trip-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); margin-bottom: 16px; max-width: 520px; }
.mileage-trip-box .mileage-purpose, .mileage-trip-box .mileage-note { width: 100%; }
.mileage-big-btn { width: 100%; margin: 0 !important; padding: 16px !important; font-size: 19px !important; }
.mileage-driving-title { font-size: 19px; font-weight: 800; color: #3F5230; }
.mileage-driving-meta { font-size: 14px; color: var(--text-dim); margin-top: 2px; }
.mileage-month-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.mileage-total { font-weight: 800; font-size: 16px; }
.mileage-day { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; background: var(--card-bg); }
.mileage-day-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 15px; }
.mileage-trip { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-top: 1px dashed var(--border); }
.mileage-trip-route { font-size: 14px; line-height: 1.45; }
.mileage-trip-km { font-size: 18px; font-weight: 800; text-align: right; white-space: nowrap; }
.mileage-trip-km small { display: block; font-size: 11.5px; font-weight: 600; color: #B07A2A; }
.mileage-trip-meta { font-size: 13px; color: var(--text-dim); }
.mileage-trip-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mileage-edit { grid-template-columns: 1fr 1fr; }
.mileage-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-dim); }
.mileage-edit .mileage-trip-actions { grid-column: 1 / -1; }
@media (max-width: 560px) { .mileage-edit { grid-template-columns: 1fr; } }

/* 行车里程：管理员面板（手动添加 / 常用地址 / 车牌号），默认收起 */
#mileage-admin { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-width: 720px; }
.mileage-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); overflow: hidden; }
.mileage-panel-head { width: 100%; text-align: left; padding: 12px 14px; border: none; background: transparent; font-size: 16px; font-weight: 700; color: var(--text); cursor: pointer; }
.mileage-panel-body { display: none; padding: 0 14px 14px; }
.mileage-panel.open .mileage-panel-body { display: block; }
.mileage-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mileage-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); }
.mileage-form-grid label select + input { margin-top: 2px; }
.mileage-inline { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 14px !important; color: var(--text) !important; align-self: end; }
.mileage-km-row { display: flex; gap: 6px; }
.mileage-km-row input { flex: 1; min-width: 0; }
.mileage-weekdays { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; }
.mileage-weekdays label { display: flex; align-items: center; gap: 4px; }
.mileage-hint-small { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.45; }
.mileage-place-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--border); }
.mileage-place-row .mp-name, #mp-new-name { flex: 0 1 150px; min-width: 110px; }
.mileage-place-row .mp-address, #mp-new-address { flex: 1 1 220px; min-width: 160px; }
.mileage-trip-km small.mileage-retour { color: #3F5230; }
@media (max-width: 560px) { .mileage-form-grid { grid-template-columns: 1fr; } }

/* 行车里程：途经点 / 自动定位 */
.mileage-wp-btn { width: 100%; margin: 0 !important; font-size: 17px !important; padding: 12px !important; }
.mileage-auto-toggle { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); }
.mileage-wp-row { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; }
.mileage-wp-del { margin-left: auto; border: none; background: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 2px 6px; }
.mileage-trip-via { grid-column: 1 / -1; font-size: 13px; color: #3F5230; }

/* 发票：供应商付款期限 */
.rcpt-term-hint { margin-top: 4px; font-size: 12.5px; color: #3F5230; line-height: 1.35; }
.rcpt-term-hint.hidden, .rcpt-term-editor.hidden { display: none; }
.rcpt-term-link { margin-top: 4px; padding: 0; border: none; background: none; color: var(--text-dim); font-size: 12.5px; text-decoration: underline; cursor: pointer; align-self: flex-start; }
.rcpt-term-editor { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.rcpt-term-editor input { width: 64px; }

/* 测试网站标记（只在 staging 显示） */
#env-ribbon { position: sticky; top: 0; z-index: 10002; background: #C0392B; color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 5px 8px; letter-spacing: 0.3px; }


/* 表单字段下的红色错误提示（如：改邮箱需要输入当前密码） */
.field-error { margin-top: 4px; font-size: 13px; font-weight: 600; color: #B03A2E; line-height: 1.4; }

/* 金额待核对：发票记录上方的红色提醒块 */
.rcpt-amount-issues { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--red); background: var(--red-bg); }
.rcpt-amount-issues-title { font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 6px; }
.rcpt-amount-issues .rcpt-amount-issue { display: block; font-size: 12.5px; font-weight: 600; color: var(--red); white-space: normal; }

/* 出入库流水：按天翻 */
.ledger-day-step { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.ledger-day-step .pill { min-width: 90px; text-align: center; }

/* 行车里程：出发按钮下面的「忘了记？手动补一段」 */
.mileage-manual-quick { margin-top: 10px !important; font-size: 16px !important; padding: 13px !important; }

/* 盘点：清单来源说明、展开其它品项 */
.wh-stk-why { font-size: 12.5px; color: var(--text-dim); margin: 0 0 8px; }
.wh-stk-more-btn { width: 100%; margin-top: 8px !important; }
.wh-stk-cat { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 14px 0 6px; }

/* 盘点结果卡片 */
.stk-result-head { font-weight: 700; margin: 6px 0; }

/* 盘点待确认：智能库存最上面 + 卡片里第二个数字 */
.inv-stk-pending { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--orange); background: var(--orange-bg); }
.inv-stk-pending-title { font-weight: 700; font-size: 15px; }
.inv-stk-pending-hint { font-size: 12.5px; color: var(--text-dim); margin: 2px 0 8px; }
.inv-stk-row { padding: 8px 0; border-top: 1px solid var(--border); }
.inv-stk-name { font-weight: 600; }
.inv-stk-nums { margin: 2px 0; }
.inv-stk-meta { font-size: 12px; color: var(--text-dim); }
.inv-stk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.stk-diff-short { color: var(--red); font-weight: 700; }
.stk-diff-over { color: var(--green, #3c7a3c); font-weight: 700; }
.inv-item-figure-stk { border-left: 2px dashed var(--orange); padding-left: 10px; }
.stk-res { font-size: 11.5px; color: var(--text-dim); }

/* ---------- 2026-10 智能库存改版（老板在 iPhone 上盘点："看不到全部商品"、"按筛选没变化"、"搜中文搜不到"） ---------- */
/* 四个统计格是按钮：右上角 ›，选中的那个描边 */
button.card.inv-stat-tile { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.inv-stat-tile .label { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.inv-stat-go { font-size: 20px; line-height: 1; color: var(--text-dim); font-weight: 400; }
.inv-stat-tile.is-active { outline: 2px solid var(--wine); outline-offset: -2px; }
.inv-stat-tile:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
/* 搜索框：里面一个 ✕；不用浏览器自带的清除按钮（有的有有的没有，统一用自己的） */
.inv-search-wrap { margin-bottom: 8px; }
.inv-search-wrap input { width: 100%; box-sizing: border-box; padding-right: 44px !important; font-size: 16px; }
.inv-search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.inv-search-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.inv-search-x:hover { background: var(--surface-2); color: var(--text); }
.inv-search-info { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text); }
.inv-search-info-clear { border: none; background: none; padding: 0 2px; font: inherit; font-weight: 600; color: var(--wine); text-decoration: underline; cursor: pointer; }
/* 缺货提醒：每行一个按钮（点了跳到总表里那一项） */
button.inv-alert-row { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.inv-alerts-list { margin-top: -6px; }
/* 库存总表 */
.inv-catalog { margin-top: 18px; scroll-margin-top: 12px; }
.inv-catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.inv-list-count { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.inv-catalog .inv-status-filter-group { margin-bottom: 12px; }
.inv-catalog .btn-filter-pill { padding: 9px 16px; font-size: 14px; }
.inv-catalog .btn-filter-pill.active { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--wine); }
button.inv-group-header { width: 100%; border: none; text-align: left; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--text); }
.inv-item-plan { margin-top: 5px; font-size: 13px; color: var(--text); line-height: 1.5; display: flex; flex-wrap: wrap; column-gap: 6px; }
.inv-plan-dot { color: var(--text-dim); }
.inv-plan-cover.is-low { color: var(--red); font-weight: 600; }
.inv-plan-reorder { font-weight: 600; }
.inv-plan-reorder.is-now { color: var(--red); background: var(--red-bg); padding: 0 6px; border-radius: 6px; } /* 主题里橙=红时也能分出「今天就要进」 */
.inv-plan-reorder.is-soon { color: var(--orange); }
.inv-plan-reorder.is-ok, .inv-plan-reorder.is-unknown { color: var(--text-dim); font-weight: 500; }
.inv-item-card.qr-focus { box-shadow: 0 0 0 3px var(--wine); transition: box-shadow .3s ease; }
/* 盘点差异：两个大按钮紧跟品名，按钮上写结果；手机上各占一整行 */
.inv-stk-actions { margin: 6px 0 4px; }
.inv-stk-btn { padding: 10px 14px; font-size: 14px; font-weight: 600; min-height: 44px; }
.inv-stk-why { font-size: 12.5px; color: var(--orange); margin: 2px 0; }
@media (max-width: 720px) {
  .inv-stk-actions { flex-direction: column; }
  .inv-stk-btn { width: 100%; }
  .inv-item-plan { font-size: 12.5px; }
}

/* 扫码：对准框、识别状态、扫不出来的提示 */
.emp-scan-view { position: relative; margin-bottom: 8px; }
.emp-scan-view video { margin-bottom: 0 !important; display: block; }
.emp-scan-frame { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; max-height: 85%; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,0.9); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.25); pointer-events: none; transition: border-color .15s; }
.emp-scan-box.is-found .emp-scan-frame { border-color: #4CAF50; box-shadow: 0 0 0 9999px rgba(0,80,0,0.25); }
.emp-scan-status { text-align: center; font-size: 15px; font-weight: 700; margin: 4px 0; min-height: 22px; }
.emp-scan-box.is-found .emp-scan-status { color: #2e7d32; }
.emp-scan-help { padding: 10px 12px; border-radius: 10px; background: var(--orange-bg); color: var(--text); font-size: 14px; line-height: 1.6; margin: 6px 0 10px; }
.emp-scan-help.hidden { display: none; }
.emp-scan-help button { width: 100%; margin-top: 8px; }

/* 今日入库：和今日出库同样式，数量绿色带 + */
.wh-today-in-board { margin-top: 12px; }
.wh-today-qty.is-in { color: var(--green, #3c7a3c); }

/* App 内表格查看器（手机导出 Excel 直接在 App 里看，不依赖手机装没装 Excel） */
body.table-viewer-open { overflow: hidden; }
.table-viewer { position: fixed; inset: 0; z-index: 2000; background: var(--bg, #faf8f4); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.table-viewer-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table-viewer-title { flex: 1; font-weight: 700; font-size: 15px; word-break: break-all; }
.table-viewer-x { border: none; background: none; font-size: 22px; padding: 4px 8px; cursor: pointer; color: var(--text); }
.table-viewer-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.table-viewer-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.table-viewer-table th { position: sticky; top: 0; background: #E8EEF0; font-weight: 700; text-align: left; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); z-index: 1; }
.table-viewer-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-viewer-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.table-viewer-table tr.is-bold td { font-weight: 700; background: rgba(0,0,0,0.03); }
.table-viewer-actions { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.table-viewer-actions button { flex: 1; margin: 0 !important; }

/* 手机卡片显示时，空的栏目不占位置 */
.table-viewer-table td:empty { display: none; }

/* ---------- 应用内联系客服（2026-10）：老板端对话面板 + 平台管理台「客服消息」页共用的消息气泡 ----------
   手机上全屏（老板多半在店里用手机）；电脑上靠右的侧边面板，不挡住后台主内容。z-index 和其它弹层同级。 */
.support-chat-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(15, 40, 40, 0.35); display: flex; justify-content: flex-end; }
.support-chat-overlay.hidden { display: none; }
.support-chat-panel { background: var(--surface); width: 420px; max-width: 100%; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-card-hover); }
@media (max-width: 720px) { .support-chat-panel { width: 100%; } }
.support-msg-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.support-msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.55; word-break: break-word; border: 1px solid var(--border); background: var(--surface); color: var(--text); align-self: flex-start; }
.support-msg.mine { align-self: flex-end; background: #F7E9EE; border-color: #E8C9D3; }
.support-msg-text { white-space: pre-wrap; }
.support-msg-meta { font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; white-space: normal; }
.support-msg-note { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; white-space: normal; }
.support-msg-note button { background: none; border: none; padding: 0; color: var(--wine); font-size: 11.5px; cursor: pointer; text-decoration: underline; }
.support-msg-original { white-space: pre-wrap; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-strong); font-size: 13px; color: var(--text-dim); }
.support-msg-empty { color: var(--text-dim); font-size: 13.5px; text-align: center; margin: 30px 10px; }
.support-compose { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--border); background: var(--surface); align-items: flex-end; }
.support-compose textarea { flex: 1; resize: none; font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 10px; min-height: 42px; max-height: 140px; }
.support-compose .support-send-btn { width: auto; margin-top: 0; padding: 10px 16px; }
.support-compose-note { font-size: 11.5px; color: var(--text-dim); padding: 2px 14px 10px; background: var(--surface); min-height: 14px; }
.support-unread-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.support-unread-badge.hidden { display: none; }
#trial-locked-support-btn { margin-top: 10px; }

/* 平台管理台：左边公司列表，右边对话；手机上一次只显示一边（选了公司就只看对话，‹ 返回列表） */
.psupport-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; min-height: 480px; }
.psupport-threads { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow-y: auto; max-height: 70vh; }
.psupport-thread { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text); }
.psupport-thread:hover, .psupport-thread.active { background: var(--surface-2); }
.psupport-thread-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.psupport-thread-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psupport-thread-time { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.psupport-thread-preview { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psupport-conv { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.psupport-conv > #psupport-conv-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.psupport-conv > #psupport-conv-body.hidden { display: none; }
.psupport-conv-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.psupport-back-btn { display: none; }
.psupport-msg-list { max-height: 55vh; min-height: 260px; }
.psupport-placeholder { color: var(--text-dim); font-size: 13.5px; padding: 40px 20px; text-align: center; }
@media (max-width: 720px) {
  .psupport-layout { grid-template-columns: 1fr; }
  .psupport-layout.conv-open .psupport-threads { display: none; }
  .psupport-layout:not(.conv-open) .psupport-conv { display: none; }
  .psupport-back-btn { display: inline-block; }
}

/* 2026-10 老板截图：出入库流水 / 菜品页"什么都没显示"其实是搜索框里留着字。有搜索/筛选时的提示条 + 一键清除 */
.ledger-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--orange-bg); color: var(--orange); font-size: 13px; font-weight: 600; }
.ledger-active-filters.hidden { display: none; }
.ledger-active-filters .btn-small { margin: 0; }
.ledger-empty-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 8px; vertical-align: middle; }
.menu-edit-btn { border-color: var(--wine); color: var(--wine); font-weight: 600; }

/* 菜品下面的食材组成 + 配方编辑里可换食材的下拉框 */
.menu-ingredients { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; white-space: normal; }
.recipe-line .recipe-line-item { flex: 1 1 160px; min-width: 0; max-width: 100%; }

/* 库存总表：每行的盘点状态 + 盘点模式 */
.inv-catalog-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-count-toggle { margin-left: auto; }
.inv-stk-line { font-size: 12.5px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--text-dim); line-height: 1.5; }
.inv-stk-line.is-pending { background: var(--orange-bg); color: var(--text); }
.inv-stk-line.is-match { color: var(--green, #3c7a3c); }
.inv-stk-line-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.inv-count-input-wrap { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.inv-count-input { width: 110px; font-size: 18px; padding: 8px 10px; text-align: center; }
.inv-count-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0; border-radius: 12px; background: var(--card-bg, #fff); border: 2px solid var(--green, #596B42); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.inv-count-bar-text { flex: 1 1 100%; font-weight: 700; }
.inv-count-bar button { flex: 1; margin: 0 !important; }
.inv-count-input-wrap { white-space: nowrap; }
.inv-count-input-wrap .inv-count-input { width: 110px !important; flex: 0 0 110px; margin: 0; }

/* 📋 盘点页：对照表（账上 | 盘点 | 差额） */
.stk-page-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.stk-page-tools input { flex: 1 1 180px; }
.stk-page-cat { font-weight: 700; color: var(--text-dim); margin: 16px 0 6px; }
.stk-page-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg, #fff); margin-bottom: 8px; }
.stk-page-row.is-pending { border-color: var(--orange); background: var(--orange-bg); }
.stk-page-name { font-weight: 700; margin-bottom: 6px; }
.stk-page-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; }
.stk-page-lbl { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; }
.stk-page-num { font-size: 20px; font-weight: 700; }
.stk-page-num small { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.stk-page-input { width: 100%; font-size: 18px; padding: 8px 6px; text-align: center; margin: 0; }
.stk-diff-match { color: var(--green, #3c7a3c); }

/* 「去盘点」按钮在库存总表最下面，整行宽 */
#inv-count-toggle.inv-count-toggle { display: block; width: 100%; margin: 14px 0 0 !important; font-size: 17px; padding: 14px; }
#inv-count-toggle.inv-count-toggle.hidden { display: none; }

/* 盘亏：期间谁当班 */
.stk-onduty-btn { margin-top: 8px; }
.stk-onduty-head { font-size: 12.5px; color: var(--text-dim); margin: 8px 0 4px; }
.stk-onduty-row { font-size: 13px; padding: 4px 0; border-top: 1px dashed var(--border); }
.stk-onduty-row.is-flag { color: var(--red); }

/* ---------- 出库纪律（2026-10 老板："如何不让员工忘记出库？如何查出是谁忘记了出库？"）---------- */
.wh-basket-toggle { width: 100%; margin: 4px 0 10px; font-weight: 700; }
.wh-basket-toggle.is-on { background: var(--red-bg, #fdecec); }
.wh-basket-hint { font-size: 13px; color: var(--text-dim); margin: -4px 0 10px; }
.wh-basket-bar { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--card-bg, #fff); border-top: 1px solid var(--border); }
.wh-basket-confirm { flex: 1; margin: 0; font-size: 16px; padding: 13px; }
.wh-basket-clear { width: auto; margin: 0; padding: 0 14px; }
.wh-basket-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wh-basket-stepper button { min-width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--border); background: #fff; font-size: 20px; font-weight: 800; cursor: pointer; }
.wh-basket-stepper .wh-basket-qty { min-width: 52px; font-size: 16px; }
.wh-row.in-basket { background: #f0fdf4; border-radius: 10px; }
.wh-row.in-basket .wh-basket-qty { border-color: #16a34a; color: #16a34a; }
.co-ask-sheet { max-height: 92vh; overflow-y: auto; }
.co-ask-search-wrap { margin: 10px 0 6px; }
.co-ask-search-wrap input { padding-left: 12px; }
.co-ask-results { display: flex; flex-direction: column; gap: 4px; }
.co-ask-result { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px dashed var(--border); border-radius: 10px; background: #fff; text-align: left; font-size: 15px; cursor: pointer; }
.co-ask-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.co-ask-group { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }
.co-ask-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--border); border-radius: 12px; }
.co-ask-row.has-qty { border-color: #16a34a; background: #f0fdf4; }
.co-ask-row .co-ask-name { flex: 1; min-width: 64px; font-weight: 600; overflow-wrap: anywhere; }
.co-ask-row .co-ask-unit { font-size: 12px; color: var(--text-dim); }
.co-ask-row input { width: 54px; text-align: center; font-size: 16px; padding: 8px 4px; }
.co-ask-row button { min-width: 34px; height: 38px; border-radius: 10px; border: 2px solid var(--border); background: #fff; font-size: 18px; font-weight: 800; cursor: pointer; }
.emp-stockout-remind { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff7e6; color: #9a5b00; font-weight: 700; font-size: 14.5px; }
.emp-stockout-remind.hidden { display: none; }
.emp-stockout-remind span { flex: 1; }
.emp-stockout-remind-x { border: none; background: transparent; font-size: 16px; cursor: pointer; color: inherit; }
.ledger-shift-card { margin-bottom: 14px; }
.ledger-shift-card:empty { display: none; }
.ssum-title { font-weight: 800; margin-bottom: 4px; }
.ssum-hint { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
.ssum-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.ssum-row .ssum-name { font-weight: 700; min-width: 90px; }
.ssum-row.is-flag { background: var(--red-bg, #fdecec); color: var(--red, #c0392b); border-radius: 8px; padding: 8px; }
.inv-plan-basis { color: var(--text-dim); font-size: 12px; }
.inv-plan-often-short { color: #b45309; font-size: 12px; font-weight: 700; }
.inv-alerts-count-btn { width: 100%; margin: 0 0 8px; }

/* 智能库存搜索中（2026-11-03）：只留搜索框 + 结果，其余块藏起来，结果紧挨着搜索框 */
.nav-page[data-page="inventory"].inv-searching #inv-summary-cards,
.nav-page[data-page="inventory"].inv-searching #inv-alerts-toggle,
.nav-page[data-page="inventory"].inv-searching #inv-alerts-list,
.nav-page[data-page="inventory"].inv-searching #inv-stk-pending-box,
.nav-page[data-page="inventory"].inv-searching #inv-silent-box,
.nav-page[data-page="inventory"].inv-searching #inv-duplicates-box,
.nav-page[data-page="inventory"].inv-searching #inv-status-filter-group,
.nav-page[data-page="inventory"].inv-searching .inv-actions-row,
.nav-page[data-page="inventory"].inv-searching .inv-catalog-head,
.nav-page[data-page="inventory"].inv-searching #inv-count-toggle { display: none !important; }