/* 【2026-10-26】禁止系统「字体大小 / 显示大小」放大网页文字。
   现象：手机把系统字体调大后，App 内所有页面一起变大、右侧被裁、顶栏图标压住文字。
   原因：Android WebView 把系统 fontScale 应用到页面文字（textZoom），而布局按 100% 字宽设计。
   原生侧同时用 setTextZoom(100) 兜底（MainActivity.onStart），这里再做一层 CSS 兜底。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #f5f7fa;
}


/* 全部页面顶栏：APK 下避开系统状态栏/刘海。
   之前每个视图 .page-header 没考虑 safe-area，APK 顶部按钮被遮。
   【2026-10-23】原来只有 `max(env(...), 12px)` 一条 —— **`max()` 里套 `env()` 要 Chrome 111+ 才认**，
   车机浏览器是 Chrome 99 → 整条声明作废 → 标题和按钮被状态栏压住。
   现在拆成两条：先给老浏览器一条它认得的 calc()，新浏览器再用 max() 覆盖。*/
.page-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
}
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* 汉堡按钮：所有断点常显，置于最顶层避免被顶栏/遮罩覆盖 */
.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1100;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #1e293b;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}

/* 遮罩层 */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

/* 【2026-10-25 修复】侧边栏改用 **transform 滑出**，不再用 `display:none/flex` 切换。
   原因：实测在手机窄屏上打开侧边栏时，遮罩显示了、但 220px 的白色面板没有渲染出来
        （只看到灰色遮罩 + 浮在上面的汉堡按钮，内容被压住）→ display 切换这条路径不可靠。
   现在：面板**始终存在**，靠 translateX 移出/移入（translateX(0) 的层叠顺序在 1050 > 遮罩 999），
   不会再出现"只显示遮罩、面板不见"的情况。 */
.sidebar {
  width: 220px;
  background: #ffffff;
  color: #1e293b;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  will-change: transform;
  z-index: 1050;
  border-right: 1px solid #e5e7eb;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04);
}
.sidebar.sidebar-open {
  transform: translateX(0);
}
.logo {
  padding: 22px 20px 22px 64px;  /* 左 padding 64px 避开左上角 hamburger 按钮（40px+12px 边距） */
  border-bottom: 1px solid #f1f5f9;
}
.logo h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.2px;
}
.logo .version-tag {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  font-weight: 400;
}
.nav-menu {
  padding: 12px 0;
  flex: 1;
  overflow-y: auto;
}
.nav-item {
  display: block;
  padding: 12px 20px;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
}
.nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nav-item.active {
  background: #fdf2f8;
  color: #be185d;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #ec4899;
}

/* 【2026-10-27】使用教程：与业务菜单拉开距离，让人一眼看见"这里能求助" */
.nav-guide {
  margin: 10px 12px 4px;
  padding: 12px 14px;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: #f0f7ff;
  color: #1976d2;
  font-weight: 600;
}
.nav-guide:hover {
  background: #e0efff;
  color: #1565c0;
}
.nav-guide.active {
  background: #1976d2;
  color: #fff;
  border-style: solid;
  box-shadow: none;
}
.nav-group {
  user-select: none;
}
.nav-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  color: #475569;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.nav-parent:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nav-parent.group-active {
  color: #0f172a;
  font-weight: 600;
}

/* 【2026-10-15】「任务报销单」父项：左侧文字可点击进原页，右侧箭头展开子菜单 */
.nav-parent.nav-parent-link { padding: 0;
}
.nav-parent-label {
  flex: 1;
  display: block;
  padding: 12px 0 12px 20px;
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}
.nav-parent-label:hover { color: #0f172a;
}
.nav-parent-link .expand-arrow { padding: 12px 18px; cursor: pointer;
}
/* 停在「任务报销单」原页时整行粉色高亮（与其它一级菜单 active 视觉一致） */
.nav-parent-link.row-active { background: #fdf2f8; box-shadow: inset 3px 0 0 #ec4899;
}
.nav-parent-link.row-active .nav-parent-label { color: #be185d; font-weight: 600;
}
.expand-arrow {
  font-size: 10px;
  color: #94a3b8;
}
.nav-children {
  background: #fafbfc;
}
.nav-child {
  display: block;
  padding: 10px 20px 10px 36px;
  color: #64748b;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s;
}
.nav-child:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nav-child.active {
  background: #fdf2f8;
  color: #be185d;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #ec4899;
}

/* 二级折叠菜单 */
.nav-sub-group {
  user-select: none;
}
.nav-sub-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px 9px 36px;
  color: #64748b;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.nav-sub-parent:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.nav-sub-parent.group-active {
  color: #0f172a;
  font-weight: 600;
}
.nav-sub-children {
  background: #f8fafc;
}
.nav-sub-children .nav-child {
  padding-left: 52px;
}

/* 顶部用户信息栏 */
.top-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* 【2026-10-23】max() 里套 env() 要 Chrome 111+；车机是 Chrome 99 → 整条作废 → 顶栏被状态栏压住。
     拆两条：先给老浏览器一条它认得的 calc()，新浏览器再用 max() 覆盖。 */
  padding: calc(env(safe-area-inset-top, 0px) + 36px) 20px 12px 20px;
  padding: max(env(safe-area-inset-top, 0px), 36px) 20px 12px 20px;
  margin: -20px -20px 20px -20px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
.user-dropdown {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.user-dropdown .user-name {
  color: #333;
  font-weight: 500;
}
.user-dropdown .user-role {
  color: #666;
  font-size: 12px;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
}
.logout-btn-small {
  padding: 6px 14px;
  background: #e94560;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.logout-btn-small:hover {
  background: #d63a54;
}
.upgrade-btn-small {
  padding: 6px 12px;
  background: #fff;
  color: #1976d2;
  border: 1px solid #1976d2;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.upgrade-btn-small:hover:not(:disabled) {
  background: #e3f2fd;
}
.upgrade-btn-small:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 有新版本时高亮 */
.upgrade-btn-small.has-update {
  background: #fef3c7;
  color: #b45309;
  border-color: #f59e0b;
  font-weight: 600;
  animation: pulse-upgrade 1.6s ease-in-out infinite;
}
.upgrade-btn-small.has-update:hover:not(:disabled) {
  background: #fde68a;
}
.new-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  background: #dc2626;
  border-radius: 50%;
  vertical-align: middle;
  animation: blink-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-upgrade {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
}
50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
}
}
@keyframes blink-dot {
0%, 100% { opacity: 1;
}
50% { opacity: 0.3;
}
}
.upgrade-hint {
  color: #1976d2;
  font-size: 12px;
  margin-right: 12px;
}
.main-content {
  flex: 1;
  /* 【2026-10-23 修横向溢出】flex 子项默认 min-width:auto，
     内容里的宽表格（如加油记录的 table{min-width:1200px}）会把 flex 项撑到内容宽度，
     整个页面于是出现横向滚动条（实测撑到 1316px，视口 1080px）。
     min-width:0 让 flex 项可以被压缩，宽表格改由 .table-wrap 的 overflow-x:auto 内部滚动。 */
  min-width: 0;
  margin-left: 220px;
  padding: 20px;
  min-height: 100vh;
}

/* ICP 备案页脚：低调居中，不干扰业务界面
   【2026-10-25 修复】`.app-layout` 是 `display:flex`（横向排列）→ 本元素作为它的**直接子元素**
   会被当成一个**并列的 flex item**，宽度=内容宽度（约 220px）→ **把主内容整个挤到右边**
   （现场表现：主界面"偏了"，左侧露出一条灰带，右侧内容被裁掉一半）。
   修复：让它**独占一整行**（flex: 0 0 100% + width:100%），不再与主内容并排。 */
.icp-footer {
  width: 100%;
  box-sizing: border-box;
  margin-top: 32px;
  padding: 12px 0 4px;
  text-align: center;
  border-top: 1px solid #e8e8e8;
}
.icp-footer a {
  color: #999;
  font-size: 12px;
  text-decoration: none;
}
.icp-footer a:hover {
  color: #666;
  text-decoration: underline;
}

/* 移动端软键盘补偿（--vk-h 由 main.ts 写入，键盘弹出时≈键盘高度）：
   弹窗遮罩在键盘上方区域居中，弹窗表单高度随之收缩，内部滚动即可见全部内容。
   body 前缀提高优先级，覆盖各页面自己的 .modal-form 定义（17 个页面通用）。*/
body .modal { padding-bottom: var(--vk-h, 0px);
}
body .modal-form { max-height: calc(90vh - var(--vk-h, 0px));
}

/* PC端：侧边栏默认隐藏，点击 hamburger 才展开 */
@media screen and (min-width: 769px) {
.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.main-content {
    margin-left: 0;
}
}

/* ===== 手机端适配（≤768px）===== */
@media screen and (max-width: 768px) {
  /* 【2026-10-23】兜底：任何页面都不允许把页面横向撑破（内部该滚的区域自己滚）。
     之前"多个页面超出屏幕"的根因就是顶栏/页头这类全局元素太宽。 */
html, body { max-width: 100%; overflow-x: hidden;
}
.main-content, .page, .top-header { max-width: 100%;
}
.main-content { overflow-x: hidden;
}
img, video, canvas, iframe { max-width: 100%;
}


  /* 【2026-10-23】全局顶栏在手机上太宽（检查更新/退出/用户名/角色徽章 4 项）→ 每个页面都被撑出屏幕。
     收法：角色徽章收起（侧边栏里有完整信息）、按钮缩小、间距压缩、允许换行。 */
.user-dropdown { gap: 6px;
}
.user-dropdown .user-role { display: none;
}
.upgrade-btn-small { padding: 4px 8px; font-size: 12px;
}
.logout-btn-small { padding: 4px 8px; font-size: 12px;
}
.user-dropdown .user-name { font-size: 13px;
}
  /* 顶栏右侧留出汉堡按钮的位置 */
.header-spacer { min-width: 0;
}
.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    top: calc(env(safe-area-inset-top, 0px) + 28px);
    top: max(env(safe-area-inset-top, 0px), 28px);
    left: 8px;
}
.sidebar-overlay {
    display: block;
}
.main-content {
    margin-left: 0;
    /* 【2026-10-23】内容铺满屏幕：原来左右各 12px 内边距 → 右侧看起来"有留白、没铺满"。
       现在左右不留白，由各页面自己的 padding 负责内容边距（页头/tab 栏才能真正顶到屏幕两边）。 */
    padding: 60px 0 20px 0;
}
.top-header {
    /* 【2026-10-23】贴边铺满（去掉 -12px 负边距）＋ 右侧 52px 让开汉堡按钮 */
    margin: -60px 0 12px 0;
    padding: calc(env(safe-area-inset-top, 0px) + 36px) 10px 8px 52px;
    padding: max(env(safe-area-inset-top, 0px), 36px) 10px 8px 52px;
}
}

/* ===== 【2026-10-25 恢复】以下样式来自 1.0.176 产物（App.vue 重建时丢了配套规则） ===== */
.notif-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.notif-item-body {
  margin-top: 2px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
  word-break: break-all;
}
.meal-popup-countdown { font-size: 14px; color: #475569; margin-bottom: 16px;
}
.meal-popup-menu {
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 8px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-all;
  text-align: left;
}

/* ===== APK 强制升级遮罩 ===== */
/* ===== 管理端通知 ===== */
.notice-bell {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  z-index: 1100;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: #1e293b;
  color: #fbbf24;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.notice-bell-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 2px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 9px;
  background: #e94560;
  color: #fff;
}
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px 20px 20px;
}
.notif-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.notif-head h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  color: #1e293b;
}
.notif-icon {
  font-size: 20px;
}
.notif-close {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
}
.notif-list {
  overflow-y: auto;
  flex: 1;
  max-height: 46vh;
}
.notif-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: #f8fafc;
  border-left: 3px solid #f59e0b;
  cursor: pointer;
}
.notif-item:hover {
  background: #f1f5f9;
}
.notif-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.notif-item-body {
  margin-top: 2px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
  word-break: break-all;
}
.notif-item-time {
  margin-top: 4px;
  font-size: 11px;
  color: #94a3b8;
}
.notif-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.notif-btn,
.notif-btn-secondary {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}
.notif-btn {
  background: #1976d2;
  color: #fff;
}
.notif-btn-secondary {
  background: #eef2f7;
  color: #475569;
}
.upgrade-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.upgrade-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.upgrade-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.upgrade-card h2 {
  font-size: 19px;
  color: #0f172a;
  margin-bottom: 12px;
}
.upgrade-card .changelog {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.upgrade-card .hint {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 20px;
}
.upgrade-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: #1976d2;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.upgrade-btn:active {
  background: #1565c0;
}
.upgrade-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.upgrade-btn-secondary {
  flex: 0 0 auto;
  padding: 14px 18px;
  border: 1px solid #cfd8dc;
  border-radius: 10px;
  background: #fff;
  color: #607d8b;
  font-size: 16px;
  cursor: pointer;
}
.upgrade-btn-secondary:active {
  background: #eceff1;
}

/* 静默安装进度文案 */
.upgrade-status {
  margin: 0 0 12px;
  font-size: 13px;
  color: #1976d2;
  line-height: 1.5;
}

/* 非 Device Owner 的引导区（开启无障碍 / 允许未知来源） */
.upgrade-setup {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eceff1;
}
.upgrade-setup .upgrade-actions {
  flex-wrap: wrap;
}
.upgrade-setup .upgrade-btn-secondary {
  flex: 1 1 45%;
  padding: 12px 10px;
  font-size: 14px;
}
.upgrade-btn:disabled,
.upgrade-btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 驾驶员定位权限提示条 */
.loc-perm-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fff4e5;
  border-bottom: 1px solid #ffd591;
  color: #ad6800;
  font-size: 13px;
  line-height: 1.4;
}
.loc-perm-text {
  flex: 1;
}
.loc-perm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.loc-perm-btn {
  border: none;
  background: #fa8c16;
  color: #fff;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
}
.loc-perm-btn:active {
  background: #d46b08;
}
.loc-perm-close {
  border: none;
  background: transparent;
  color: #ad6800;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 4px;
}

/* ===== 报餐弹窗 & 轻提示 ===== */
.meal-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.meal-popup-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: meal-pop-in 0.25s ease;
}
@keyframes meal-pop-in {
from { transform: scale(0.9); opacity: 0;
}
to { transform: scale(1); opacity: 1;
}
}
.meal-popup-icon { font-size: 44px; margin-bottom: 8px;
}
.meal-popup-card h3 { font-size: 18px; color: #0f172a; margin-bottom: 4px;
}
.meal-popup-menu {
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 8px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-all;
  text-align: left;
}
.meal-popup-hint { font-size: 12px; color: #94a3b8; margin-bottom: 12px;
}
.meal-popup-countdown { font-size: 14px; color: #475569; margin-bottom: 16px;
}
.meal-popup-countdown strong { font-size: 20px; color: #dc2626; font-variant-numeric: tabular-nums;
}
.meal-popup-actions { display: flex; gap: 10px; justify-content: center; align-items: center;
}
.meal-btn-primary {
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: #1976d2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.meal-btn-primary:hover { background: #1565c0;
}
.meal-btn-ghost {
  padding: 10px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
}
.meal-reg-ok { color: #059669; font-weight: 600; font-size: 14px;
}
.meal-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2300;
  padding: 10px 18px;
  border-radius: 10px;
  background: #1e293b;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35);
  max-width: 90vw;
}
.meal-toast-fade-enter-active, .meal-toast-fade-leave-active { transition: opacity 0.3s ease;
}
.meal-toast-fade-enter-from, .meal-toast-fade-leave-to { opacity: 0;
}

/* ===== 【2026-10-21】地图标记样式（必须放在**全局**，不能放组件的 scoped 块）=====
   原因：高德 AMap.Marker 的 content 与 Leaflet divIcon 都是**运行时动态创建的 HTML 字符串**，
   这些节点**不在组件模板里** → `\3c style scoped>` 编译出的 `.xxx[data-v-hash]` 属性选择器
   **匹配不上** → 样式全部失效。
   实际症状：① 地点图钉 div 宽高为 0 → 地图上完全看不见定位点
             ② 车标没有 flex 布局、车牌文字样式失效
             ③ 轮子滚动动画（keyframes 挂在 .car-svg.is-moving 下）不生效
   结论：凡是给动态标记用的样式，必须放在**非 scoped** 的全局样式块里。 */

/* ---- 车标（高德/Leaflet 通用） ---- */
.car-divicon { background: transparent; border: none;
}
.car-marker { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; pointer-events: auto; user-select: none;
}
/* 【2026-10-30】车号标签原来**没有任何样式**（就是一行裸黑字），底图上一压就看不清、多车还叠成一团。
   现在：白底半透明胶囊 + 细描边，底图上始终可读；translateY 由 JS 按重合情况错开（见 TaskList computeLabelOffsets）。 */
.car-plate {
  display: inline-block;
  margin-top: 1px;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  color: #1f2937;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .2px;
  transition: transform .15s ease-out;
}
.car-marker.is-sel .car-plate { background: #ecfdf5; border-color: #52c41a; color: #166534;
}
.car-marker.is-stale .car-plate { background: rgba(245, 245, 245, .9); color: #6b7280;
}
.car-ico { display: block; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); transform-origin: 50% 50%;
}
.car-svg { display: block; transition: transform .18s ease-out;
}
.car-marker.is-sel .car-svg { transform: scale(1.24);
}
.car-marker.is-sel .car-ico { filter: drop-shadow(0 0 5px #52c41a) drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.car-marker.is-stale { opacity: .55;
}

/* ---- 地点图钉（高德分支用内联样式，这里留一份给 Leaflet 分支） ---- */
.place-pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: #722ed1; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); transform: rotate(-45deg);
}

/* ---- 【2026-10-21】运动中 / 静止 两种状态区分 ----
   静止：轮子不动，无排气。运动：轮子持续滚动 + 车尾排气。 */
@keyframes car-wheel-spin {
0%   { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
@keyframes car-exhaust-puff {
0%   { transform: translate(0, 0) scale(0.5); opacity: .75;
}
70%  { transform: translate(0, 3.5px) scale(1.5); opacity: 0;
}
100% { transform: translate(0, 3.5px) scale(1.5); opacity: 0;
}
}
.car-svg.is-moving .car-wheels {
  /* 轮子滚动：加白色辐条条纹，滚动时看得出在转 */
  transform-box: fill-box;
  transform-origin: center;
  animation: car-wheel-spin .55s linear infinite;
}
.car-svg.is-moving .car-wheels rect {
  fill: #2b2b2b;
  stroke: #9ca3af;
  stroke-width: .5;
  stroke-dasharray: 1.4 1.1;
}
.car-svg.is-moving .car-exhaust circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: car-exhaust-puff 1.1s ease-out infinite;
}
.car-svg.is-moving .car-exhaust circle:nth-child(2) { animation-delay: .35s;
}
.car-svg.is-moving .car-exhaust circle:nth-child(3) { animation-delay: .7s;
}
/* 运动中整体轻微光晕，强化"在跑"的观感 */
.car-marker.is-moving .car-ico { filter: drop-shadow(0 0 3px rgba(24,144,255,.35));
}