/* 首页（控制台内页，app/home.py）。颜色只用 tokens.css 已定义变量、不写裸 hex（UI 门禁）。
   原则上一屏装下（老板 2026-09-29）：1366×768 的笔记本上左栏最多自己滚一点，右栏通知自己滚。 */
/* display:flex / grid 的块会盖掉 hidden 属性（工厂待办 9-27 踩过），全页兜底 */
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); }
.hm-app { max-width: 1500px; margin: 0 auto; padding: 14px 18px 24px; box-sizing: border-box; }

/* 顶上一行：问候 + 全站搜索（2026-10-02 首页改版：和顶栏同一个 shared/global-search，这里放大、放显眼；首页时顶栏那个藏起来） */
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.hm-hi { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.hm-hello p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.hm-head .gs { flex: 1 1 420px; max-width: 680px; min-width: 260px; margin: 0; }
.hm-head #gs #gs-q { height: 42px; font-size: 15px; }
.hm-head #gs:focus-within #gs-q { width: 100%; max-width: none; }   /* 首页地方够：不用像顶栏那样往右盖出去 */
.hm-head .gs-drop { width: 100%; }

.hm-msg { color: var(--muted); font-size: 14px; padding: 16px 4px; }
.hm-msg.err { color: var(--danger-fg); }

/* 两栏：左 = 我的工作 / 全部功能 / 昨天；右 = 今天要做 / 公司通知 */
.hm-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.hm-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.hm-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.hm-sec-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.hm-hint { font-size: 12px; color: var(--muted); }
.hm-how { margin-left: auto; border: 0; background: none; padding: 0; font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hm-how-box { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-sunken); font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.hm-how-box b { color: var(--ink); }
.hm-foot { margin: 0 2px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* 昨天 / 今天要做（老板 9-30：每样 3~5 点，用图别全是字）：左右两块，窄屏上下 */
.hm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.hm-stat { position: relative; display: block; min-height: 78px; padding: 8px 10px 8px 12px; border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.hm-stat:hover { border-color: var(--accent); background: var(--surface-hover); }
.hm-stat .l { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.hm-stat .v { margin-top: 2px; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.25; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hm-stat .s { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 近 7 天小柱：单独一行铺满卡片宽，最后一根（昨天）用主色 */
.hm-spark { display: block; width: 100%; height: 20px; margin-top: 5px; }
.hm-spark rect { fill: var(--border-strong); }
.hm-spark rect.last { fill: var(--accent); }
.hm-delta { font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: 999px; line-height: 1.7; background: var(--surface-sunken); color: var(--muted); }
.hm-delta.good { background: var(--success-bg); color: var(--success-fg); }
.hm-delta.bad { background: var(--danger-bg); color: var(--danger-fg); }
.hm-daytag { font-size: 11px; padding: 0 5px; border-radius: 5px; background: var(--warning-bg); color: var(--warning-fg); cursor: help; }

.hm-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hm-todo-i { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 6px;
  border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; }
.hm-todo-i:hover { border-color: var(--accent); background: var(--surface-hover); }
.hm-todo-i .num { display: grid; place-items: center; height: 32px; min-width: 32px; padding: 0 4px; border-radius: 9px; font-size: 15px; font-weight: 700;
  background: var(--info-bg); color: var(--info-fg); }
.hm-todo-i.danger .num { background: var(--danger-solid); color: var(--text-on-accent); }
.hm-todo-i.warn .num { background: var(--warning-bg); color: var(--warning-fg); }
.hm-todo-i .t { display: flex; flex-direction: column; min-width: 0; }
.hm-todo-i .t b { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-todo-i .t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-todo-i .arr { font-size: 20px; color: var(--muted); }
.hm-todo-none { padding: 14px 10px; font-size: 14px; color: var(--success-fg); }
.hm-daily { margin-top: 10px; }
.hm-daily h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.hm-daily ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.hm-daily a { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none; background: var(--surface); }
.hm-daily a:hover { border-color: var(--accent); }
.hm-daily a small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-daily a.warn small { color: var(--warning-fg); }
.hm-daily a.danger { border-color: var(--danger-solid); }
.hm-daily a.danger small { color: var(--danger-solid); }

/* 我的工作：8 格，一行 4 个——图标 + 名字 + 一个数（说明在悬停） */
.hm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-tile { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.hm-tile:hover { border-color: var(--accent); background: var(--surface-hover); }
.hm-tile .hm-ico { flex: 0 0 auto; width: 30px; height: 30px; }
.hm-tile b { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-step { position: absolute; top: 2px; left: 5px; font-size: 10px; font-weight: 700; color: var(--muted); }
.hm-pill { flex: 0 0 auto; min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: 13px; font-weight: 700; font-style: normal; line-height: 22px; text-align: center;
  background: var(--surface-sunken); color: var(--muted); cursor: help; }
.hm-pill.danger { background: var(--danger-solid); color: var(--text-on-accent); }
.hm-pill.warn { background: var(--warning-bg); color: var(--warning-fg); }
.hm-pill.zero { background: none; color: var(--text-disabled); }
.hm-pill.wait { visibility: hidden; }

/* 全部功能：按订单先后分行（老板 2026-10-01「按我们的交付流程分一下类」）——一行一步，左边 ① 接询盘，右边这一步的图标格子；
   各行右边一样宽，图标列上下对齐。不属于订单哪一步的（看数据 / 沟通与工具 / 管系统）在虚线下面 */
.hm-groups { display: grid; }
.hm-grp { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 8px; padding: 1px 0; border-top: 1px solid var(--border-subtle); }
.hm-grp:first-child { border-top: 0; }
.hm-grp.after-steps { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-strong); }
.hm-grp-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hm-grp-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hm-grp-name .no { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: var(--n-0); background: color-mix(in srgb, var(--n-500) 82%, transparent); }
.hm-grp-name .no.blank { width: 22px; height: 22px; border-radius: 0; background: none; position: relative; }
.hm-grp-name .no.blank::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--n-500) 82%, transparent); }
.hm-grp[data-hue="amber"] .no:not(.blank), .hm-grp[data-hue="amber"] .no.blank::after { background: color-mix(in srgb, var(--a-600) 82%, transparent); }
.hm-grp[data-hue="blue"] .no:not(.blank), .hm-grp[data-hue="blue"] .no.blank::after { background: color-mix(in srgb, var(--b-600) 82%, transparent); }
.hm-grp[data-hue="teal"] .no:not(.blank), .hm-grp[data-hue="teal"] .no.blank::after { background: color-mix(in srgb, var(--chart-6) 82%, transparent); }
.hm-grp[data-hue="red"] .no:not(.blank), .hm-grp[data-hue="red"] .no.blank::after { background: color-mix(in srgb, var(--r-600) 82%, transparent); }
.hm-grp[data-hue="violet"] .no:not(.blank), .hm-grp[data-hue="violet"] .no.blank::after { background: color-mix(in srgb, var(--v-600) 82%, transparent); }
.hm-grp[data-hue="gray"] .no:not(.blank), .hm-grp[data-hue="gray"] .no.blank::after { background: color-mix(in srgb, var(--n-500) 82%, transparent); }

/* 一步一行（2026-10-02）：小图标 + 名字，一行排不下就折到下一行；常用的带星 */
.hm-links { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 2px 0; }
.hm-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 4px; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-size: 13px; white-space: nowrap; }
.hm-link:hover { background: var(--surface-hover); color: var(--ink); }
.hm-link .nm { line-height: 1.3; }
/* 上面「我的工作」格子里已有的：照样列在这一步里，淡一档（10-17 老板「很多内容重复出现」） */
.hm-link.in-work { opacity: .5; }
.hm-link.in-work:hover { opacity: 1; }
.hm-star { font-size: 11px; font-style: normal; color: var(--warning-fg); margin-left: -2px; }

/* ①–⑧ 每一步三格（10-17 侧栏整理第 1 步）：B2B 外贸单 | 两边都用 | B2C 平台单，各行列宽一样、上下对齐；页里的某一块写「› 国际快递」 */
/* 左栏在 1280 的笔记本上只有 ~640 宽：步骤名放在这一步上面一行，三格占满整宽（左边留出编号圆点那么宽，和步骤名的字对齐） */
.hm-grp.step, .hm-lane-head { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 5px 0 3px; }
.hm-grp.step .hm-grp-name { min-height: 22px; }
.hm-lane-head .hm-grp-name { display: none; }
.hm-grp.step .hm-lanes, .hm-lane-head .hm-lanes { padding-left: 30px; }
.hm-lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1.05fr); gap: 0 8px; min-width: 0; }
.hm-lane { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1px 2px; padding: 1px 0; min-width: 0; }
.hm-lane + .hm-lane { padding-left: 8px; border-left: 1px dashed var(--border-subtle); }
.hm-lane .hm-link { max-width: 100%; min-width: 0; height: 26px; gap: 4px; padding: 0 5px 0 2px; font-size: 12.5px; }   /* 小一号：短名字两个并一行，整块矮一半 */
.hm-lane .hm-ico.xs { width: 18px; height: 18px; border-radius: 5px; }
.hm-lane .hm-ico.xs svg { width: 11px; height: 11px; }
.hm-lane .hm-link .nm { overflow: hidden; text-overflow: ellipsis; }
.hm-link.deep .nm { color: var(--ink-2); }
.hm-lane-hint { font-size: 12px; line-height: 28px; color: var(--text-disabled); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-lane-head { border-top: 0; padding-bottom: 2px; }
.hm-lane-head + .hm-grp { border-top: 0; }
.hm-lane-h { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: help; }
.hm-lane-h + .hm-lane-h { padding-left: 8px; }
.hm-more { height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.hm-more:hover { background: var(--surface-hover); }

/* 图标：和侧栏同一套图形、同组同色（侧栏入口上的 data-hue） */
.hm-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 700;
  color: var(--n-0); background: color-mix(in srgb, var(--n-500) 82%, transparent); }
.hm-ico.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.hm-ico.sm svg { width: 14px; height: 14px; }
.hm-ico.xs { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.hm-ico.xs svg { width: 12px; height: 12px; }
[data-hue="amber"] > .hm-ico { background: color-mix(in srgb, var(--a-600) 82%, transparent); }
[data-hue="blue"] > .hm-ico { background: color-mix(in srgb, var(--b-600) 82%, transparent); }
[data-hue="teal"] > .hm-ico { background: color-mix(in srgb, var(--chart-6) 82%, transparent); }
[data-hue="red"] > .hm-ico { background: color-mix(in srgb, var(--r-600) 82%, transparent); }
[data-hue="violet"] > .hm-ico { background: color-mix(in srgb, var(--v-600) 82%, transparent); }
[data-hue="gray"] > .hm-ico { background: color-mix(in srgb, var(--n-500) 82%, transparent); }
/* 首页图标不再是大格子：.hm-link 里的小图标照样按组上色 */

/* 右栏：今天要做 + 公司通知（sticky；通知自己滚） */
.hm-right { position: sticky; top: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 16px); overflow-y: auto; }
.hm-today-sec { flex: 0 0 auto; min-height: 96px; }
.hm-todo-none.wait { color: var(--muted); }
.hm-notices { margin-bottom: 0; flex: 1 1 auto; min-height: 160px; overflow: auto; }
.hm-notices .hm-sec-head a { margin-left: auto; font-size: 12px; color: var(--accent); }
.hm-block { margin-top: 10px; }
.hm-block:first-of-type { margin-top: 0; }
.hm-block h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.hm-block.must h3 { color: var(--danger-fg); }
.hm-post { display: block; width: 100%; box-sizing: border-box; text-align: left; margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--border-subtle);
  border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.hm-post:hover { border-color: var(--accent); background: var(--surface-hover); }
.hm-post .t { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.5; }
.hm-post .t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-post.unread .t b { font-weight: 700; }
.hm-post .m { margin-top: 2px; font-size: 12px; color: var(--muted); }
.hm-post ul { margin: 5px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.hm-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.hm-tag { flex: 0 0 auto; padding: 0 6px; border-radius: 5px; font-size: 11px; line-height: 1.7; background: var(--surface-sunken); color: var(--muted); }
.hm-tag.must { background: var(--danger-bg); color: var(--danger-fg); font-weight: 600; }
.hm-tag.pin { background: var(--warning-bg); color: var(--warning-fg); }
.hm-tag.imp { background: var(--warning-bg); color: var(--warning-fg); font-weight: 600; }
.hm-tag.new { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.hm-block.must .hm-post { border-color: var(--danger-fg); background: var(--danger-bg); }
.hm-go { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger-fg); }
.hm-empty { font-size: 13px; color: var(--muted); padding: 4px 0 2px; line-height: 1.6; }
.hm-track { padding: 7px 10px; margin-bottom: 6px; border-radius: 9px; background: var(--surface-sunken); font-size: 12px; line-height: 1.6; cursor: pointer; }
.hm-track b { font-size: 13px; color: var(--ink); }
.hm-track .bar { height: 5px; margin: 5px 0 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.hm-track .bar i { display: block; height: 100%; background: var(--success-fg); }
.hm-tip { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-sunken); font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.hm-tip a { color: var(--accent); }

/* 看全文的弹窗 */
.hm-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px;
  background: var(--overlay); overflow: auto; }
.hm-dialog { width: min(760px, 100%); background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-2); }
.hm-dialog-top { position: sticky; top: -28px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface); border-radius: 14px 14px 0 0; font-size: 15px; font-weight: 700; }
.hm-dialog-top > div { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.hm-x:hover { color: var(--ink); }
.hm-dialog-body { padding: 14px 18px 18px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.hm-dialog-body .meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.hm-dialog-body .pts { margin: 0 0 12px; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--accent-soft-bg); color: var(--ink); }
.hm-body img { max-width: 100%; height: auto; border-radius: 6px; }
.hm-body table { border-collapse: collapse; max-width: 100%; }
.hm-body td, .hm-body th { border: 1px solid var(--border); padding: 4px 8px; }
.hm-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hm-files a { font-size: 13px; color: var(--accent); }
.hm-ack { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.hm-ack button { border: 0; border-radius: 9px; padding: 8px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--accent); color: var(--text-on-accent); }
.hm-ack button:disabled { background: var(--surface-sunken); color: var(--success-fg); cursor: default; }
.hm-ack small { font-size: 12px; color: var(--muted); }
.hm-receipt { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-sunken); font-size: 13px; }
.hm-receipt details { margin-top: 4px; }
.hm-receipt summary { cursor: pointer; color: var(--ink); }
.hm-receipt .names { margin-top: 4px; color: var(--ink-2); line-height: 1.7; }

/* 10-18「等我的」（老板首页第一块）：左边一张单（编号 · 标签 · 一句话 · 去点），右边两块小卡（今天哪里卡住 / 还在外面做的） */
.hm-qcards { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.hm-qcard { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 10px; background: var(--surface); min-width: 0; }
.hm-qcard.wait { border-left: 4px solid var(--warning-border); }
.hm-qhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; white-space: nowrap; }
.hm-qhead b { font-size: 14px; color: var(--ink); }
.hm-qhead small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.hm-qhead .big { margin-left: auto; font-size: 22px; font-weight: 700; color: var(--warning-fg); line-height: 1; }
.hm-qhead .big small { font-size: 12px; margin-left: 2px; color: var(--muted); font-weight: 400; }
.hm-qlist, .hm-qrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-qlist a, .hm-qrows a { display: grid; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.hm-qlist a { grid-template-columns: 18px minmax(0, 1fr) auto; }
.hm-qlist a:hover, .hm-qrows a:hover { background: var(--surface-hover); }
.hm-qlist .no { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.hm-qlist .tx, .hm-qrows .t { min-width: 0; font-size: 13px; color: var(--ink); line-height: 1.45; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-qlist .tx small, .hm-qrows .t small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-qlist .go { font-size: 12px; color: var(--accent); white-space: nowrap; }
.hm-qtag { font-style: normal; font-size: 11px; padding: 0 5px; margin-right: 5px; border-radius: 5px; background: var(--info-bg); color: var(--info-fg); white-space: nowrap; }
.hm-qtag.bad { background: var(--danger-bg); color: var(--danger-fg); }
.hm-qtag.warn { background: var(--warning-bg); color: var(--warning-fg); }
.hm-qrows a { grid-template-columns: 40px minmax(0, 1fr); }
.hm-qrows .n { font-size: 17px; font-weight: 700; color: var(--danger-fg); text-align: right; font-variant-numeric: tabular-nums; }
.hm-qrows .st { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.hm-qcard.out .hm-qrows .t small { color: var(--ink-2); }
.hm-qfoot { margin-top: 6px; font-size: 12px; }
.hm-qfoot a { color: var(--accent); text-decoration: none; }
/* 同事版第一块「今天要我做的」（和原来右栏「今天要做」同一套样子），后面一行 ↗ 还在外面做的、新·试试 */
.hm-qcards:has(.hm-qstaff) { display: block; }
.hm-qstaff .hm-todo { margin: 0; }
.hm-qextra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hm-qout { display: inline-flex; flex-direction: column; padding: 6px 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.hm-qout small { font-size: 11px; color: var(--muted); }
.hm-qtry { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 5px; border: 1px solid var(--success-border); border-radius: 999px;
  background: var(--success-bg); color: var(--success-fg); text-decoration: none; font-size: 13px; }
.hm-qtry i { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--success-fg); color: var(--text-on-accent); }
@media (max-width: 1100px) {
  .hm-qcards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-qcard.wait { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hm-qcards { grid-template-columns: minmax(0, 1fr); }
  .hm-qcard.out { display: none; }      /* 手机只露重点（老板 10-01）：「还在外面做的」在电脑上看 */
}

/* 1280 的笔记本（首页内嵌宽约 1000）也保持两栏，右栏窄一点；以前 1100 以下就变一栏、通知压在最上面 */
@media (max-width: 1200px) {
  .hm-main { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 再窄才一栏：我的工作 → 今天要做 → 全部功能 → 昨天 → 通知；有「必读要你确认」的通知照旧放最上面 */
@media (max-width: 960px) {
  .hm-main { grid-template-columns: minmax(0, 1fr); }
  .hm-left, .hm-right { display: contents; }
  .hm-work-sec { order: 1; }
  .hm-today-sec { order: 2; }
  #hm-all-sec { order: 3; }
  .hm-yday-sec { order: 4; }
  .hm-notices { order: 5; max-height: none; }
  .hm-right.has-must .hm-notices { order: 0; }
  .hm-foot { order: 6; }
}
@media (max-width: 760px) {
  .hm-app { padding: 10px 12px 20px; }
  .hm-grp { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0 2px; }
  /* 窄了三格上下排，每格前面写 B2B / 两边 / B2C；空的那格不占地方 */
  .hm-lane-head { display: none; }
  .hm-lanes { grid-template-columns: minmax(0, 1fr); }
  .hm-lane + .hm-lane { border-left: 0; }
  .hm-lane.empty { display: none; }
  .hm-lane, .hm-lane + .hm-lane { position: relative; padding-left: 36px; }      /* 折到第二行的也缩进，和第一行对齐 */
  .hm-lane::before { content: attr(data-l); position: absolute; left: 0; top: 1px; font-size: 11px; font-weight: 700; line-height: 26px; color: var(--muted); }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 手机上（2026-10-01 老板：手机只看重点、临时查一下）：先「今天要做」和「我的工作」（带数），再「昨天」，通知往后放；
   有「必读要你确认」的通知照旧放最上面。找功能、全部功能交给底部那排的「全部」（外壳 phone.js），这里不再摆一遍。 */
@media (max-width: 640px) {
  .hm-app { padding: 10px 10px 18px; }
  .hm-head { margin-bottom: 8px; }
  .hm-hi { font-size: 17px; }
  .hm-find, #hm-all-sec, .hm-tip { display: none !important; }
  .hm-main { display: flex; flex-direction: column; gap: 0; }
  .hm-left, .hm-right { display: contents; }
  .hm-today-sec { order: 1; }
  .hm-work-sec { order: 2; }
  .hm-yday-sec { order: 3; }
  .hm-notices { order: 4; }
  .hm-right.has-must .hm-notices { order: 0; }
  .hm-foot { order: 5; }
  .hm-sec { padding: 10px 12px; margin-bottom: 10px; }
  .hm-notices { max-height: none; }
}

/* 10-21 B2B 备货确认（首页弹窗，home.js openB2B）：业务员照建议备 / 少备 / 不用备；老板同意下；跟单已下单 */
.hm-b2b-sec { margin-bottom: 14px; }
.hm-b2b-sec h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.hm-b2b-sec h4 i { font-style: normal; font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-fg); }
.hm-b2b-hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.hm-b2b-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.hm-b2b-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hm-b2b-head b { color: var(--ink); font-size: 14px; }
.hm-b2b-head small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hm-b2b-ask { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.hm-b2b-ask b { font-size: 16px; color: var(--ink); }
.hm-b2b-money { margin-left: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.hm-b2b-ok { display: block; font-size: 12px; color: var(--success-fg); }
.hm-b2b-facts { font-size: 12px; color: var(--muted); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-b2b-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.hm-b2b-btns button { border: 1px solid var(--border-control); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.hm-b2b-btns button.pri { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.hm-b2b-btns button.no { color: var(--muted); }
.hm-b2b-btns button:disabled { opacity: .5; cursor: default; }
.hm-b2b-less { display: inline-flex; gap: 4px; align-items: center; }
.hm-b2b-less input { width: 64px; height: 30px; border: 1px solid var(--border-control); border-radius: 8px; padding: 0 8px; font-size: 16px; }
.hm-b2b-why { width: 100%; box-sizing: border-box; margin-top: 6px; height: 30px; border: 1px solid var(--border-control); border-radius: 8px; padding: 0 8px; font-size: 13px; }
.hm-b2b-err { margin: 6px 0 0; font-size: 12px; color: var(--danger-fg); }
.hm-b2b-more { margin: 6px 0; font-size: 13px; color: var(--ink-2); }
.hm-b2b-more summary { cursor: pointer; color: var(--ink); }
.hm-b2b-more ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.7; }
.hm-b2b-rule { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
@media (max-width: 640px) { .hm-b2b-why { font-size: 16px; } }