/* 工作台样式：和设计稿同一套 token。>= 760px 电脑版（顶部页签），< 760px 手机版（底部页签） */
:root {
  --bg: #f4f3ef; --card: #fdfdfb; --ink: #1a1917; --ink2: #5b5955; --muted: #8a8780;
  --line: rgba(26,25,23,0.08); --line2: rgba(26,25,23,0.06); --grid: #e6e4de; --axis: #c3c2b7;
  --accent: #2a78d6; --accent-soft: #cde2fb; --accent-light: #86b6ef; --accent-text: #1c5cab;
  --live: #2a78d6; --group: #eb6834; --other: #c3c2b7;
  --good-text: #006300; --critical: #d03b3b;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: var(--accent); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; width: 220px; }
.brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.brand .name { font-size: 16px; font-weight: 600; }
.brand .sub { font-size: 12px; color: var(--muted); margin-left: 2px; }
.tabs { display: flex; gap: 4px; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px; font-size: 13.5px; color: var(--ink2); background: none; border: 0; }
.tab.active { background: #e6f0fc; color: var(--accent-text); font-weight: 600; }
.topright { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 13px; color: var(--ink2); width: 360px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.content { padding: 24px 32px 28px; max-width: 1440px; margin: 0 auto; }
.view { display: flex; flex-direction: column; gap: 20px; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.span8 { grid-column: span 8; } .span7 { grid-column: span 7; } .span5 { grid-column: span 5; } .span4 { grid-column: span 4; } .span12 { grid-column: span 12; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.sample { background: #fff3d6; color: #8a5a00; border: 1px solid #f4dfa6; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; min-width: 0; }
.card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kpi .label { font-size: 13px; color: var(--ink2); font-weight: 500; }
.kpi .value { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin-top: 6px; line-height: 1.1; white-space: nowrap; }
.kpi .value small { font-size: 15px; font-weight: 500; color: var(--ink2); margin-right: 4px; letter-spacing: 0; }
.kpi .value small.unit { margin: 0 10px 0 4px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.delta.up { color: var(--good-text); } .delta.dn { color: #9a3d15; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag.hot { background: #fde3e3; color: #8f1f1f; } .tag.serious { background: #fde9df; color: #9a3d15; } .tag.warn { background: #fff3d6; color: #8a5a00; }
.tag.info { background: #e6f0fc; color: var(--accent-text); } .tag.good { background: #e3f5e3; color: var(--good-text); } .tag.muted { background: #eeede8; color: var(--ink2); }
.tag.ghost { background: transparent; color: var(--muted); border: 1px dashed var(--axis); }
.meter { height: 6px; border-radius: 3px; background: var(--accent-soft); margin-top: 10px; margin-bottom: 12px; position: relative; }
.meter .fill { height: 6px; border-radius: 3px; background: var(--accent); }
.meter .tick { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--ink); border-radius: 1px; }
.meter .ticklabel { position: absolute; top: 12px; font-size: 10px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.insight { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.5; }
.insight .k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--accent-text); background: #e6f0fc; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff8e6; border: 1px solid #f4dfa6; border-radius: 10px; font-size: 13px; color: #6b4600; line-height: 1.5; }
.banner.err { background: #fde9df; border-color: #f5c9b5; color: #7a2e10; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink2); flex-shrink: 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.badge { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--critical); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11.5px; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.tblwrap { overflow-x: auto; }
.row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line2); font-size: 13px; }
.row:first-child { border-top: 0; padding-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.row.op { padding: 10px 0; }
.row.op .av { width: 28px; height: 28px; border-radius: 50%; background: #e6e4de; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row.op .who { font-size: 13px; font-weight: 600; }
.row.op .who span { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 12px; }
.mini { height: 5px; border-radius: 3px; background: var(--accent-soft); margin-top: 6px; max-width: 220px; }
.mini i { display: block; height: 5px; border-radius: 3px; background: var(--accent); }
.chat { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); cursor: pointer; }
.chat:first-child { border-top: 0; padding-top: 0; }
.chat.active { background: #f2f7fe; margin: 0 -20px; padding: 12px 20px; border-top-color: transparent; border-radius: 8px; }
.chat.handled { opacity: 0.5; }
.chat .ic { width: 34px; height: 34px; border-radius: 9px; background: #e6e4de; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat .cbody { flex: 1; min-width: 0; }
.chat .cname { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; flex-wrap: wrap; }
.chat .cname .unread { font-size: 11px; color: var(--muted); font-weight: 400; }
.chat .why { font-size: 12.5px; color: var(--ink2); line-height: 1.5; margin-top: 3px; }
.chat .act { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; padding: 3px 9px; border: 1px solid var(--accent-soft); border-radius: 6px; background: #f2f7fe; flex-shrink: 0; margin-top: 2px; }
.skip { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--muted); line-height: 1.5; }
.msg { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line2); font-size: 12.5px; line-height: 1.5; }
.msg .who { color: var(--muted); width: 96px; flex-shrink: 0; font-size: 12px; }
.msg .who b { display: block; color: var(--ink); font-weight: 600; }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid transparent; text-decoration: none; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.day { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line2); }
.day:first-child { border-top: 0; padding-top: 0; }
.day .d { width: 48px; flex-shrink: 0; font-size: 11px; color: var(--muted); line-height: 1.3; }
.day .d b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
.day .evs { flex: 1; min-width: 0; }
.ev { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; padding: 2px 0; }
.ev .t { color: var(--ink2); font-variant-numeric: tabular-nums; width: 38px; flex-shrink: 0; }
.ev .n { flex: 1; }
.ev.suggest .n { color: var(--ink2); }
.ev .add { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--accent); border: 1px dashed var(--accent-light); border-radius: 5px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.ev.empty { color: var(--muted); font-size: 12.5px; }
.person { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line2); }
.person:first-child { border-top: 0; padding-top: 0; }
.person .av { width: 28px; height: 28px; border-radius: 50%; background: #e6e4de; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.person .pbody { flex: 1; min-width: 0; }
.person .who { font-size: 13px; font-weight: 600; }
.person .who span { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 12px; }
.person .what { font-size: 12.5px; color: var(--ink2); line-height: 1.45; margin-top: 2px; }
.status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; padding-top: 3px; }
.empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
.chart { width: 100%; display: block; }

/* 手机版 */
.tabbar { display: none; }
@media (max-width: 759px) {
  .topbar { height: auto; padding: 12px 16px 8px; }
  .brand { width: auto; }
  .brand .name { font-size: 20px; }
  .tabs, .brand .mark, .brand .sub, .topright #clock { display: none; }
  .topright { width: auto; gap: 10px; }
  .content { padding: 4px 16px 96px; }
  .view { gap: 12px; }
  .card { padding: 14px 16px; }
  .kpis, .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid12 { display: flex; flex-direction: column; gap: 12px; }
  .kpi .label { font-size: 12px; }
  .kpi .value { font-size: 22px; margin-top: 4px; }
  .kpi .value small { font-size: 12px; margin-right: 3px; }
  .kpi .value small.unit { margin: 0 8px 0 3px; }
  .kpi .sub { font-size: 11px; margin-top: 6px; gap: 6px; }
  .insight, .banner { padding: 10px 12px; font-size: 12.5px; align-items: flex-start; }
  .cardhead { margin-bottom: 10px; flex-wrap: wrap; }
  .chat { gap: 10px; padding: 11px 0; }
  .chat.active { margin: 0 -16px; padding: 11px 16px; }
  .chat .ic { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
  .chat .cname { font-size: 13px; gap: 6px; }
  .chat .why { font-size: 12px; }
  .chat .act { display: none; }
  .msg .who { width: 72px; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 5; }
  .tabbar .t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; color: var(--muted); position: relative; background: none; border: 0; }
  .tabbar .t.active { color: var(--accent-text); font-weight: 600; }
  .tabbar .t .badge { position: absolute; top: 8px; left: 50%; margin-left: 6px; }
}