/* 产品语言组件库 pl.css（2026-10-18）
   两套主题用 [data-theme] 切：dark 取 工厂驾驶舱-20261013/index.html :root（07 方案 A），
   light 取 沙龙量身定制-20261015/稿/_底座/tokens.css（07 方案 C）。
   变量都带 --pl- 前缀，和页面自己的 --c1、--ink 等不撞。组件里的颜色只用这里的变量。
   字号下限：正文 ≥ 16px，大数 ≥ 40px（类型与组件.md 通则）。 */

[data-theme="dark"] {
  --pl-bg: #050B1A;           /* 页面 */
  --pl-surface: #0B1730;      /* 卡片：组件默认坐在这一层上 */
  --pl-lift: #12254A;         /* 抬起层：轨道、气泡、按钮底 */
  --pl-line: rgba(76,148,236,.16);
  --pl-line-2: rgba(76,148,236,.32);
  --pl-ink: #E8F1FF;          /* 文字 1 */
  --pl-ink-2: #A3B8D8;        /* 文字 2：标签 */
  --pl-muted: #6F88B3;        /* 文字 3：注脚，对卡片 4.96 */
  --pl-ok: #2FD6A0;           /* 正常：只做小点 */
  --pl-warn: #FFB545;         /* 快到线 */
  --pl-warn-text: #FFB545;
  --pl-bad: #FF6670;          /* 过线：逾期、卡住、缺口；对卡片 6.26 */
  --pl-on-bad: #050B1A;
  --pl-done: #2F7675;         /* 已完成 */
  --pl-accent: #3FD8FF;       /* 主角：全屏一处发光色 */
  --pl-on-accent: #050B1A;
  --pl-glow: 0 0 18px rgba(63,216,255,.45);
  --pl-nd-1: #2B3F63;         /* 中性：没数据、未到期、highlight 以外的块 */
  --pl-nd-2: #3A5482;
  /* 占比分类色（07 方案 A 前五个，按 蓝 橙 青 紫 绿 次序取） */
  --pl-cat-1: #4C94EC; --pl-cat-2: #DC7533; --pl-cat-3: #11A19B; --pl-cat-4: #956ED2; --pl-cat-5: #68A63F;
  /* 逾期红阶（驾驶舱 --r1…--r4，越亮越久） */
  --pl-bad-1: #86323E; --pl-bad-2: #A8384A; --pl-bad-3: #D84B58; --pl-bad-4: #FF6670;
  --pl-radius: 4px;
  --pl-fs-hero: 96px;         /* size l 的大数 */
  --pl-fs-big: 48px;          /* size m 的大数 */
  color-scheme: dark;
}

[data-theme="light"] {
  --pl-bg: #F5F7FA;
  --pl-surface: #FFFFFF;
  --pl-lift: #EEF2F7;
  --pl-line: #E3E8EF;
  --pl-line-2: #B8C3D3;
  --pl-ink: #14213D;
  --pl-ink-2: #4A5772;
  --pl-muted: #66718A;        /* 对白卡 4.89 */
  --pl-ok: #187A4C;
  --pl-warn: #C48A00;         /* 对白卡只有 3.01：只做填充和标记 */
  --pl-warn-text: #14213D;    /* 快到线的字用文字 1（tokens.css 原注） */
  --pl-bad: #C93A3A;
  --pl-on-bad: #FFFFFF;
  --pl-done: #5B9FA3;
  --pl-accent: #1F5FBF;       /* 强调蓝（抓眼与看懂 第六节 方案 C）；tokens.css 的 --accent 只给墨卡，白底不够 */
  --pl-on-accent: #FFFFFF;
  --pl-glow: none;            /* 浅底不发光，靠强调色加粗 */
  --pl-nd-1: #C9D3E0;
  --pl-nd-2: #DDE4ED;
  --pl-cat-1: #3970C2; --pl-cat-2: #C7692C; --pl-cat-3: #0D9FA6; --pl-cat-4: #7652AC; --pl-cat-5: #599234;
  /* 逾期红阶（tokens.css --r1…--r4，越深越久） */
  --pl-bad-1: #EE9C93; --pl-bad-2: #DD6055; --pl-bad-3: #C2362B; --pl-bad-4: #8E1F17;
  --pl-radius: 4px;
  --pl-fs-hero: 64px;
  --pl-fs-big: 44px;
  color-scheme: light;
}

/* ---------- 通用 ---------- */
.pl {
  --pl-num-font: "DIN Alternate", "Helvetica Neue", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --pl-txt-font: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-family: var(--pl-txt-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--pl-ink);
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
.pl-size-l { font-size: 18px; }
.pl a { color: inherit; text-decoration: none; }
a.pl { color: var(--pl-ink); text-decoration: none; }
.pl button { font: inherit; color: inherit; }
.pl-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.pl-label { font-size: 16px; color: var(--pl-ink-2); letter-spacing: .02em; }
.pl-size-l .pl-label { font-size: 20px; }
.pl-field { font-size: 16px; color: var(--pl-ink-2); }
.pl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 16px; color: var(--pl-muted); }
.pl-sep { color: var(--pl-muted); }
.pl-num { font-family: var(--pl-num-font); font-weight: 700; letter-spacing: -.01em; }
.pl-val { display: inline-flex; align-items: baseline; gap: .12em; white-space: nowrap; }
.pl-unit { font-size: max(16px, .45em); font-weight: 600; color: var(--pl-ink-2); margin-left: .08em; }  /* 单位是数字的 40–50% */
.pl-sub { font-size: 18px; color: var(--pl-ink-2); font-family: var(--pl-num-font); }
.pl-more { color: var(--pl-ink-2); font-size: 22px; line-height: 1; margin-left: auto; padding-left: 8px; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--pl-lift); color: var(--pl-ink); font-size: 16px; white-space: nowrap; }
.pl-chip .pl-icon { color: var(--pl-ink-2); }
.pl-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--pl-radius); border: 1px solid var(--pl-line-2); color: var(--pl-ink-2); font-size: 16px; }
.pl-tag-draft { border-style: dashed; }
.pl-bubble { position: relative; background: var(--pl-lift); border-radius: 12px; padding: 12px 16px; font-size: 16px; line-height: 1.55; color: var(--pl-ink); }
.pl-click { cursor: pointer; }
.pl-click:hover, .pl-click:focus-visible { background: var(--pl-lift); outline: none; }

/* 空态：虚线圈加「无数据」，组件骨架照画 */
.pl-empty { display: inline-flex; align-items: center; gap: 8px; color: var(--pl-muted); font-size: 16px; }
.pl-empty .pl-icon { width: 20px; height: 20px; }
.pl[data-empty] .pl-num { color: var(--pl-muted); }

/* 状态记号：● 正常 · ◆ 快到线 · ▲ 过线 · ✓ 已完成 · ○ 等别人（不只靠颜色，第 39 条） */
.pl-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; }
.pl-mark[data-tone="ok"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pl-ok); }
.pl-mark[data-tone="warn"]::before { content: ""; width: 9px; height: 9px; background: var(--pl-warn); transform: rotate(45deg); }
.pl-mark[data-tone="bad"]::before { content: ""; width: 13px; height: 12px; background: var(--pl-bad); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pl-mark[data-tone="wait"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--pl-ink-2); }
.pl-mark[data-tone="none"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--pl-muted); }
.pl-mark[data-tone="done"] { color: var(--pl-done); }
.pl-mark[data-tone="done"] .pl-icon { width: 15px; height: 15px; stroke-width: 3; }

/* ---------- 1 数字牌 ---------- */
.pl-stat { display: flex; flex-direction: column; gap: 4px; }
.pl-stat-head { display: flex; align-items: center; gap: 8px; }
.pl-stat .pl-val { font-size: var(--pl-fs-big); line-height: 1.05; }
.pl-stat.pl-size-l .pl-val { font-size: var(--pl-fs-hero); }
.pl-stat.pl-size-l .pl-val { text-shadow: var(--pl-glow); }
.pl-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; color: var(--pl-ink-2); font-family: var(--pl-num-font); }
.pl-delta .pl-unit { font-size: 16px; }
.pl-delta .pl-icon { stroke-width: 2.5; }
a.pl-stat { border-radius: var(--pl-radius); padding: 6px 8px; margin: -6px -8px; }
a.pl-stat:hover { background: var(--pl-lift); }
.pl-stat.pl-size-s { flex-direction: row; align-items: baseline; gap: 10px; }
.pl-stat.pl-size-s .pl-val { font-size: 20px; }

/* ---------- 2 状态签 ---------- */
.pl-status { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.pl-status .pl-word { color: var(--pl-ink); font-weight: 600; }
.pl-status.pl-size-l { font-size: 20px; }

/* ---------- 3 原因格 ---------- */
.pl-reason { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: var(--pl-radius); background: var(--pl-lift); border-left: 3px solid var(--pl-line-2); }
.pl-reason-val { font-size: 20px; font-weight: 700; }
.pl-reason .pl-chip { background: var(--pl-surface); }

/* ---------- 4 文件卡 ---------- */
.pl-attachment { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--pl-radius); border: 1px solid var(--pl-line); max-width: 460px; }
.pl-file { position: relative; width: 56px; height: 64px; flex: none; color: var(--pl-ink-2); }
.pl-file .pl-icon { width: 64px; height: 64px; stroke-width: 1.4; position: absolute; left: -4px; top: 0; }
.pl-kind { position: absolute; left: 4px; bottom: 6px; padding: 1px 4px; border-radius: 3px; background: var(--pl-ink-2); color: var(--pl-surface); font: 700 16px/1.1 var(--pl-num-font); letter-spacing: .02em; }
.pl-attach-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-attach-name { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-attachment.pl-size-l .pl-file { width: 72px; height: 84px; }
.pl-attachment.pl-size-l .pl-file .pl-icon { width: 84px; height: 84px; }

/* ---------- 5 消息气泡 ---------- */
.pl-message { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.pl-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-message[data-state="draft"] .pl-bubble { background: transparent; border: 1.5px dashed var(--pl-line-2); padding-right: 64px; min-height: 64px; }
.pl-draft[data-blur] { filter: blur(4px); user-select: none; }
.pl-send { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--pl-accent); color: var(--pl-on-accent) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--pl-glow); }
.pl-send .pl-icon { width: 20px; height: 20px; }
/* 已发：气泡变实底（草稿是虚线空心），安静下来，强调色只留给还要动手的草稿 */
.pl-message[data-state="sent"] .pl-bubble { background: var(--pl-lift); border: 1.5px solid var(--pl-line-2); border-bottom-right-radius: 4px; }
.pl-msg-foot { color: var(--pl-ink-2); }
.pl-msg-foot .pl-icon { color: var(--pl-done); stroke-width: 3; }
[data-theme="dark"] .pl-msg-foot .pl-icon, [data-theme="dark"].pl-message .pl-msg-foot .pl-icon { color: var(--pl-ok); }

/* ---------- 6 对话卡 ---------- */
.pl-suggestion { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pl-sug-msg { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; min-width: 0; }
.pl-sug-msg .pl-bubble { border-top-left-radius: 4px; }
.pl-avatar { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pl-lift); color: var(--pl-ink-2); flex: none; }
.pl-avatar .pl-icon { width: 22px; height: 22px; }
.pl-avatar-ai { color: var(--pl-accent); border: 1.5px solid var(--pl-accent); position: relative; }
.pl-avatar-name { position: absolute; top: 44px; font: 700 16px/1 var(--pl-num-font); color: var(--pl-ink-2); }
.pl-sug-opts { display: flex; gap: 8px; flex-wrap: wrap; align-self: center; }
.pl-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--pl-radius); border: 1.5px solid var(--pl-line-2); background: transparent; cursor: pointer; font-size: 16px; font-weight: 600; }
.pl-opt[data-primary] { border-color: var(--pl-accent); color: var(--pl-accent); }
.pl-opt:not(:disabled):hover { background: var(--pl-lift); }
.pl-opt[data-chosen="1"] { background: var(--pl-accent); border-color: var(--pl-accent); color: var(--pl-on-accent); cursor: default; }
.pl-opt[data-chosen="0"] { color: var(--pl-muted); border-color: var(--pl-line); cursor: default; opacity: .7; }

/* ---------- 7 勾选框 ---------- */
.pl-checklist { display: flex; flex-direction: column; gap: 10px; }
.pl-check-head { display: flex; align-items: center; gap: 8px; }
.pl-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--pl-lift); color: var(--pl-ink); font: 700 16px/1 var(--pl-num-font); }
.pl-check-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pl-check-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 18px; }
.pl-box { width: 24px; height: 24px; padding: 0; border-radius: 4px; border: 2px solid var(--pl-ink-2); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-box .pl-icon { width: 16px; height: 16px; stroke-width: 3.2; opacity: 0; }
.pl-check-row[data-checked="1"] .pl-box { background: var(--pl-accent); border-color: var(--pl-accent); color: var(--pl-on-accent); }
.pl-check-row[data-checked="1"] .pl-box .pl-icon { opacity: 1; }
.pl-check-row[data-checked="1"] > span { color: var(--pl-ink-2); }

/* ---------- 8 工序条 ---------- */
.pl-progress { display: flex; align-items: flex-end; gap: 14px; }
.pl-row-label { flex: none; min-width: 64px; font-size: 16px; font-weight: 600; color: var(--pl-ink); padding-bottom: 10px; }
.pl-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(64px, 1fr)); gap: 4px; flex: 1; }
.pl-steps-empty { display: flex; align-items: center; justify-content: center; height: 44px; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-step-name { font-size: 16px; color: var(--pl-ink-2); text-align: center; white-space: nowrap; }
.pl-step-cell { height: 40px; border-radius: var(--pl-radius); background: var(--pl-lift); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; white-space: nowrap; }
.pl-step[data-state="done"] .pl-step-cell { background: var(--pl-done); color: var(--pl-on-accent); }
[data-theme="dark"] .pl-step[data-state="done"] .pl-step-cell, [data-theme="dark"].pl-progress .pl-step[data-state="done"] .pl-step-cell { color: var(--pl-ink); }
.pl-step[data-state="done"] .pl-icon { stroke-width: 3; }
.pl-step[data-state="doing"] .pl-step-cell { background: linear-gradient(90deg, var(--pl-accent) 0 50%, var(--pl-lift) 50% 100%); box-shadow: inset 0 0 0 2px var(--pl-accent); }
.pl-step[data-state="doing"] .pl-step-name { color: var(--pl-accent); font-weight: 700; }
.pl-step[data-state="stuck"] .pl-step-cell { background: var(--pl-bad); color: var(--pl-on-bad); }
.pl-step[data-state="skip"] .pl-step-cell { background: transparent; box-shadow: none; }
.pl-step[data-state="stuck"] .pl-step-name { color: var(--pl-ink); font-weight: 700; }
.pl-gantt, .pl-progress.pl-gantt { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }   /* 10-18：根元素同时带 pl-progress，它的 flex-end 会把整张甘特挤到右边 */
.pl-gantt-row { display: flex; align-items: center; gap: 14px; }
.pl-gantt-row .pl-row-label { padding-bottom: 0; width: var(--pl-gantt-label, 150px); }   /* 10-18：甘特行名定宽，行名长短不一时格子才对得齐；页面可改 --pl-gantt-label */
.pl-gantt-head .pl-steps { align-items: end; }

/* ---------- 9 环图 ---------- */
.pl-share { position: relative; width: var(--w); height: var(--h); }
.pl-share-svg { display: block; overflow: visible; }
.pl-share-track { stroke: var(--pl-line-2); }
.pl-leader { stroke: var(--pl-line-2); stroke-width: 1; }
.pl-share-lab { font-size: 16px; fill: var(--pl-ink-2); font-family: var(--pl-txt-font); }
.pl-share-val { font-size: 18px; font-weight: 700; fill: var(--pl-ink); font-family: var(--pl-num-font); }
.pl-share-lab.pl-hot, .pl-share-val.pl-hot { fill: var(--pl-accent); }
.pl-share-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.pl-share-center .pl-val { font-size: 40px; line-height: 1.05; }
.pl-share-center .pl-sub { font-size: 16px; }
.pl-share-center .pl-label { font-size: 16px; }
.pl-share.pl-size-l .pl-share-center .pl-val { font-size: 52px; }

/* ---------- 10 差值折线 ---------- */
.pl-compare { display: flex; flex-direction: column; gap: 6px; }
.pl-cmp-main { display: flex; align-items: baseline; gap: 10px; }
.pl-cmp-main .pl-val { font-size: var(--pl-fs-big); line-height: 1.05; }
.pl-compare.pl-size-l .pl-cmp-main .pl-val { font-size: var(--pl-fs-hero); }
.pl-cmp-arrow { width: 32px; height: 32px; stroke-width: 2.6; color: var(--pl-ink-2); align-self: center; }
.pl-spark { display: block; margin-top: 6px; }
.pl-spark-line { stroke: var(--pl-ink-2); stroke-width: 2; stroke-linejoin: round; }
.pl-spark-dot { fill: var(--pl-accent); }
.pl-axis { font-size: 16px; fill: var(--pl-muted); font-family: var(--pl-num-font); }

/* ---------- 11 需有量条 ---------- */
.pl-needhave { display: flex; flex-direction: column; gap: 10px; width: 480px; max-width: 100%; }
.pl-nh-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; }
.pl-nh-row { display: contents; }
.pl-nh-track { position: relative; min-width: 160px; height: 18px; border-radius: 2px; background: var(--pl-lift); }
.pl-nh-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.pl-nh-need { background: var(--pl-ink-2); }
.pl-nh-have { background: var(--pl-cat-1); }
.pl-nh-inc { background: transparent; border: 2px dashed var(--pl-cat-1); }
.pl-nh-gap { position: absolute; top: 0; bottom: 0; border: 2px solid var(--pl-bad); background: repeating-linear-gradient(135deg, transparent 0 5px, var(--pl-bad) 5px 7px); border-radius: 2px; opacity: .9; }
.pl-nh-num { font: 600 18px/1 var(--pl-num-font); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.pl-nh-date { display: inline-flex; align-items: center; gap: 4px; font: 400 16px/1 var(--pl-txt-font); color: var(--pl-ink-2); }
.pl-nh-gapnote { display: flex; align-items: center; gap: 8px; }
.pl-nh-gapnum { font: 700 22px/1 var(--pl-num-font); color: var(--pl-bad); }

/* ---------- 12 账龄条 ---------- */
.pl-aging { display: flex; flex-direction: column; gap: 8px; width: 480px; max-width: 100%; }
.pl-aging > .pl-val { font-size: 40px; line-height: 1.05; }
.pl-age-bar { display: flex; gap: 2px; height: 22px; margin-top: 4px; }
.pl-age-empty { border: 1.5px dashed var(--pl-line-2); border-radius: 2px; }
.pl-age-seg { min-width: 4px; border-radius: 2px; background: var(--pl-nd-1); }
.pl-age-seg[data-tone="warn"] { background: var(--pl-warn); }
.pl-age-seg[data-tone="ok"] { background: var(--pl-nd-2); }
.pl-age-seg[data-lvl="1"] { background: var(--pl-bad-1); }
.pl-age-seg[data-lvl="2"] { background: var(--pl-bad-2); }
.pl-age-seg[data-lvl="3"] { background: var(--pl-bad-3); }
.pl-age-seg[data-lvl="4"] { background: var(--pl-bad-4); }
.pl-age-labs { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pl-age-lab { display: flex; flex-direction: column; }
.pl-age-name { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--pl-ink-2); white-space: nowrap; }
.pl-age-sw { width: 12px; height: 12px; border-radius: 2px; background: var(--pl-nd-1); }
.pl-age-sw[data-tone="warn"] { background: var(--pl-warn); }
.pl-age-sw[data-lvl="1"] { background: var(--pl-bad-1); }
.pl-age-sw[data-lvl="2"] { background: var(--pl-bad-2); }
.pl-age-sw[data-lvl="3"] { background: var(--pl-bad-3); }
.pl-age-sw[data-lvl="4"] { background: var(--pl-bad-4); }
.pl-age-v { display: inline-flex; align-items: center; gap: 6px; font: 700 18px/1.3 var(--pl-num-font); white-space: nowrap; }
.pl-age-lab[data-tone="bad"] .pl-age-v { color: var(--pl-bad); }
.pl-age-prom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pl-date { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--pl-radius); background: var(--pl-lift); font: 600 16px/1.2 var(--pl-num-font); }
.pl-date .pl-icon { color: var(--pl-ink-2); }
.pl-date .pl-date-mark { stroke-width: 3; }
.pl-date[data-kept="1"] .pl-date-mark { color: var(--pl-ok); }
.pl-date[data-kept="0"] { box-shadow: inset 0 0 0 1.5px var(--pl-bad); }
.pl-date[data-kept="0"] .pl-date-mark { color: var(--pl-bad); }

/* ---------- 13 点阵 ---------- */
.pl-collection { display: flex; flex-direction: column; gap: 8px; }
.pl-dots-wrap { display: flex; align-items: flex-start; gap: 20px; }
.pl-dots { display: grid; gap: 2px; width: 300px; flex: none; }
.pl-dots[data-cell="l"] { grid-template-columns: repeat(12, 1fr); gap: 4px; }
.pl-dots[data-cell="m"] { grid-template-columns: repeat(30, 1fr); }
.pl-dots[data-cell="s"] { grid-template-columns: repeat(50, 1fr); gap: 1px; }
.pl-dots i { display: block; aspect-ratio: 1; background: var(--pl-nd-1); border-radius: 1px; }
/* 亮起的格子加一圈强调色描边，点阵再密也找得到 */
.pl-dots i { position: relative; }
.pl-dots i.on { background: var(--pl-accent); outline: 2px solid var(--pl-accent); outline-offset: 2px; z-index: 1; box-shadow: var(--pl-glow); }
.pl-dots-empty { height: 80px; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-dots-side { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.pl-dots-k { display: flex; flex-direction: column; }
.pl-dots-k .pl-val { font-size: 40px; line-height: 1.05; }
.pl-dots-k .pl-num { color: var(--pl-accent); }

/* ---------- 14 判断灯 ---------- */
.pl-lamps { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-lamp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--pl-lift); font-size: 16px; font-weight: 600; }
.pl-lamp .pl-mark { transform: scale(1.2); }
.pl-lamp[data-tone="warn"] { box-shadow: inset 0 0 0 1.5px var(--pl-warn); color: var(--pl-warn-text); }
.pl-lamp[data-tone="bad"] { box-shadow: inset 0 0 0 1.5px var(--pl-bad); }

/* ---------- 15 人签 ---------- */
.pl-person { display: inline-flex; align-items: center; gap: 10px; }
.pl-person-name { font-size: 18px; font-weight: 600; }

/* ---------- 16 字幕条 ---------- */
.pl-caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font-size: 18px; }
.pl-caption.pl-size-l { font-size: 22px; }
.pl-cap-title { font-weight: 800; letter-spacing: .06em; }
.pl-cap-pair { display: inline-flex; align-items: baseline; gap: 6px; }
.pl-cap-pair .pl-field { font-size: inherit; }
.pl-cap-val { font-weight: 700; font-family: var(--pl-num-font); }

/* ---------- 10-18 傍晚：交期着色（stat.due_tone）、工序连条（progress.joined） ---------- */
/* 交期着色：晚 → 红，余量 ≤ 2 天 → 琥珀，其余不着色。浅色琥珀字不够对比，字用文字 1，靠 ◆ 记号 */
.pl-stat[data-due-tone="bad"] .pl-num, .pl-stat[data-due-tone="bad"] .pl-unit { color: var(--pl-bad); }
.pl-stat[data-due-tone="warn"] .pl-num, .pl-stat[data-due-tone="warn"] .pl-unit { color: var(--pl-warn-text); }

/* 连条：格间不留缝，只一根 1px 细线（用卡片面色画），两端圆角 */
.pl-steps[data-joined] { gap: 0; grid-template-columns: repeat(var(--n, 4), minmax(52px, 1fr)); }
.pl-steps[data-joined] .pl-step-cell { border-radius: 0; box-shadow: none; border-left: 1px solid var(--pl-surface); }
.pl-steps[data-joined] > .pl-step:first-child .pl-step-cell { border-left: none; border-radius: var(--pl-radius) 0 0 var(--pl-radius); }
.pl-steps[data-joined] > .pl-step:last-child .pl-step-cell { border-radius: 0 var(--pl-radius) var(--pl-radius) 0; }
.pl-steps[data-joined] .pl-step[data-state="skip"] .pl-step-cell { background: var(--pl-lift); opacity: .45; }
.pl-steps[data-joined] .pl-step[data-state="done"] + .pl-step[data-state="done"] .pl-step-cell { border-left-color: rgba(0,0,0,.18); }
/* 正在做的那格按比例填（--r，缺省 50%）；连条和单格都用 */
.pl-step[data-state="doing"] .pl-step-cell { background: linear-gradient(90deg, var(--pl-accent) 0 var(--r, 50%), var(--pl-lift) var(--r, 50%) 100%); }
.pl-steps[data-joined] .pl-step[data-state="doing"] .pl-step-cell { box-shadow: inset 0 0 0 2px var(--pl-accent); }

/* ---------- 主图通用：图例、网格 ---------- */
.pl-legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; font-size: 16px; color: var(--pl-ink-2); }
.pl-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pl-lg-key { display: inline-block; width: 18px; height: 10px; border-radius: 2px; flex: none; }
.pl-grid { stroke: var(--pl-line); stroke-width: 1; }
.pl-grid.pl-base { stroke: var(--pl-line-2); }

/* ---------- 17 时间轴需有图 ---------- */
.pl-supply { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 420px; }
.pl-sup-body { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; grid-template-rows: 64px var(--pl-sup-h, 260px) 28px; column-gap: 10px; }
.pl-supply.pl-size-l .pl-sup-body { grid-template-rows: 64px var(--pl-sup-h, 340px) 28px; }
.pl-sup-plot { position: relative; min-width: 0; }
.pl-sup-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-sup-empty { display: flex; align-items: center; justify-content: center; height: 200px; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-sup-need { stroke: var(--pl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.pl-sup-have { stroke: var(--pl-accent); stroke-width: 2.5; stroke-linejoin: round; }
.pl-sup-gap { fill: var(--pl-bad); opacity: .32; }
.pl-sup-v { stroke-width: 2; }
.pl-sup-v.pl-v-arr { stroke: var(--pl-accent); stroke-dasharray: 6 4; }
.pl-sup-v.pl-v-due { stroke: var(--pl-bad); }
.pl-k-need { background: var(--pl-ink); height: 3px; }
.pl-k-have { background: var(--pl-accent); height: 3px; }
.pl-k-gap { background: var(--pl-bad); opacity: .55; }
.pl-sup-tags { position: relative; min-width: 0; }
.pl-sup-tag { position: absolute; bottom: 4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pl-radius); background: var(--pl-lift); font: 600 16px/1.3 var(--pl-num-font); white-space: nowrap; }
.pl-sup-tag[data-row="1"] { bottom: 36px; }
.pl-sup-tag[data-edge="start"] { transform: translateX(-12px); }
.pl-sup-tag[data-edge="end"] { transform: translateX(calc(-100% + 12px)); }
.pl-sup-tag .pl-icon { color: var(--pl-ink-2); }
.pl-sup-tag.pl-v-arr { box-shadow: inset 0 0 0 1.5px var(--pl-accent); }
.pl-sup-tag.pl-v-due, .pl-sup-tag.pl-v-both { box-shadow: inset 0 0 0 1.5px var(--pl-bad); }
.pl-sup-gaptag { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pl-radius); background: var(--pl-surface); box-shadow: 0 0 0 1.5px var(--pl-bad); white-space: nowrap; }
.pl-sup-gaptag[data-edge="start"] { transform: translate(-8px, -50%); }
.pl-sup-gaptag[data-edge="end"] { transform: translate(calc(-100% + 8px), -50%); }
.pl-sup-gapnum { font: 700 22px/1 var(--pl-num-font); color: var(--pl-bad); }
.pl-sup-y { position: relative; }
.pl-sup-y span { position: absolute; right: 0; transform: translateY(-50%); font: 16px/1 var(--pl-num-font); color: var(--pl-muted); white-space: nowrap; }
.pl-sup-x { position: relative; min-width: 0; }
.pl-sup-x span { position: absolute; top: 6px; transform: translateX(-50%); font: 16px/1 var(--pl-num-font); color: var(--pl-muted); white-space: nowrap; }
.pl-sup-x span[data-edge="start"] { transform: none; }
.pl-sup-x span[data-edge="end"] { transform: translateX(-100%); }
.pl-sup-ends { position: relative; }
.pl-sup-ends > span { position: absolute; left: 0; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pl-sup-ends b { font: 700 20px/1 var(--pl-num-font); }

/* ---------- 18 横向条形榜 ---------- */
.pl-ranking { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 380px; }
.pl-rank-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
.pl-rank-sum { display: inline-flex; align-items: baseline; gap: 8px; }
.pl-rank-sum .pl-mark { align-self: center; }
.pl-rank-sum .pl-val { font-size: 28px; line-height: 1; }
.pl-rank-bad-sum .pl-num { color: var(--pl-bad); }
.pl-rank-head .pl-legend { align-self: center; }
.pl-k-bad { background: var(--pl-bad); }
.pl-k-rest { background: var(--pl-nd-2); }
[data-theme="light"] .pl-k-rest, [data-theme="light"].pl-ranking .pl-k-rest { background: var(--pl-nd-1); }
.pl-rank-rows { display: flex; flex-direction: column; gap: 2px; }
.pl-rank-row { display: grid; grid-template-columns: var(--pl-rank-label, 128px) minmax(0, 1fr) auto 18px; align-items: center; column-gap: 14px; min-height: var(--pl-rank-h, 38px); padding: 0 8px; border-radius: var(--pl-radius); border-left: 3px solid transparent; }
.pl-rank-colhead { min-height: 24px; color: var(--pl-muted); font-size: 16px; }
.pl-rank-label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.pl-rank-label .pl-icon { color: var(--pl-ink-2); }
.pl-rank-track { height: 16px; }
.pl-rank-bar { display: flex; gap: 2px; height: 100%; min-width: 4px; }
.pl-rank-bad { background: var(--pl-bad); border-radius: 0 0 0 0; }
.pl-rank-rest { background: var(--pl-nd-2); }
[data-theme="light"] .pl-rank-rest, [data-theme="light"].pl-ranking .pl-rank-rest { background: var(--pl-nd-1); }
.pl-rank-bar > :last-child { border-radius: 0 4px 4px 0; }   /* 圆角只在数据端，起点方角贴基线 */
.pl-rank-v { display: inline-flex; align-items: baseline; gap: 6px; justify-content: flex-end; font: 600 18px/1 var(--pl-num-font); white-space: nowrap; min-width: 116px; }
.pl-rank-colhead .pl-rank-v { font: 16px/1 var(--pl-txt-font); }
.pl-rank-v b { font-weight: 700; color: var(--pl-ink-2); }
.pl-rank-v b[data-bad] { color: var(--pl-bad); }
.pl-rank-row .pl-more { font-size: 20px; padding-left: 0; opacity: .6; }
.pl-rank-row[data-selected] { background: var(--pl-lift); border-left-color: var(--pl-accent); }
.pl-rank-row[data-selected] .pl-rank-rest { background: var(--pl-accent); }
.pl-rank-row[data-selected] .pl-rank-label { color: var(--pl-accent); }
.pl-rank-row[data-selected] .pl-more { opacity: 1; color: var(--pl-accent); }

/* ---------- 19 排期对比 ---------- */
.pl-schedule { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 480px; }
.pl-sch-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.pl-seg { display: inline-flex; padding: 3px; border-radius: 6px; background: var(--pl-lift); }
.pl-seg-btn { min-height: 36px; padding: 0 18px; border: none; border-radius: 4px; background: transparent; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--pl-ink-2) !important; }
.pl-seg-btn[aria-pressed="true"] { background: var(--pl-accent); color: var(--pl-on-accent) !important; }
.pl-k-before { background: var(--pl-nd-2); height: 6px; }
.pl-k-after { background: var(--pl-ink-2); }
.pl-k-due { width: 3px; height: 16px; background: var(--pl-ink); border-radius: 1px; }
.pl-schedule[data-mode="before"] .pl-k-after { background: var(--pl-ink-2); }
.pl-sch-body { display: flex; flex-direction: column; }
.pl-sch-empty { align-items: center; justify-content: center; height: 160px; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-sch-row { display: grid; grid-template-columns: var(--pl-sch-label, 168px) minmax(0, 1fr) var(--pl-sch-side, 116px); align-items: center; column-gap: 14px; min-height: var(--pl-sch-h, 42px); }
.pl-sch-row + .pl-sch-row:not(.pl-sch-axis) { border-top: 1px solid var(--pl-line); }
.pl-sch-axis { min-height: 28px; }
.pl-sch-label { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sch-track { position: relative; height: 100%; min-height: inherit; }
.pl-sch-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pl-line); }
.pl-sch-day { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 16px/1 var(--pl-num-font); color: var(--pl-muted); white-space: nowrap; }
.pl-sch-day[data-edge="start"] { transform: translate(0, -50%); }
.pl-sch-bar { position: absolute; min-width: 3px; border-radius: 2px; }
.pl-sch-before { top: calc(50% - 13px); height: 6px; background: var(--pl-nd-2); }
.pl-sch-after { top: calc(50% - 4px); height: 14px; background: var(--pl-ink-2); }
.pl-schedule[data-mode="before"] .pl-sch-after { top: calc(50% - 7px); }
.pl-sch-over { top: calc(50% - 4px); height: 14px; background: var(--pl-bad); border-radius: 0 3px 3px 0; }
.pl-schedule[data-mode="before"] .pl-sch-over { top: calc(50% - 7px); }
.pl-sch-ins { top: calc(50% - 8px); height: 16px; background: var(--pl-accent); box-shadow: var(--pl-glow); border-radius: 3px; }
.pl-sch-ins.pl-sch-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pl-line-2); border: none; }
.pl-sch-insrow .pl-sch-label { color: var(--pl-accent); }
.pl-schedule[data-mode="before"] .pl-sch-insrow .pl-sch-label { color: var(--pl-muted); }
.pl-sch-due { position: absolute; top: 6px; bottom: 6px; width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--pl-ink); }
.pl-sch-due[data-late] { background: var(--pl-bad); }
.pl-sch-late { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.pl-sch-late[data-tone="bad"] { color: var(--pl-bad); }
.pl-sch-late[data-tone="warn"] { color: var(--pl-warn-text); }
.pl-sch-late[data-tone="ok"] { color: var(--pl-muted); font-weight: 400; }

/* ---------- 20 输入框 ---------- */
.pl-inbox { display: flex; align-items: stretch; gap: 12px; width: 100%; min-width: 360px; }
.pl-inbox-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--pl-line-2); background: var(--pl-lift); }
.pl-inbox[data-state="empty"] .pl-inbox-box { background: transparent; border-style: dashed; justify-content: center; min-height: 64px; }
.pl-inbox-text { font-size: 18px; line-height: 1.5; color: var(--pl-ink); }
.pl-inbox-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-inbox-att { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border-radius: 8px; background: var(--pl-surface); border: 1px solid var(--pl-line); }
.pl-file.pl-file-s { width: 44px; height: 40px; }
.pl-file.pl-file-s .pl-icon { width: 40px; height: 40px; left: -3px; }
.pl-file.pl-file-s .pl-kind { left: 1px; bottom: 3px; padding: 0 3px; }
.pl-inbox-attname { font-size: 16px; font-weight: 600; white-space: nowrap; }
.pl-rank-empty { height: 120px; align-items: center; justify-content: center; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-inbox-btn { flex: none; align-self: center; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; padding: 0 20px; border: none; border-radius: 12px; background: var(--pl-accent); color: var(--pl-on-accent) !important; font-size: 18px !important; font-weight: 700; cursor: pointer; box-shadow: var(--pl-glow); }
.pl-inbox-btn .pl-icon { width: 20px; height: 20px; stroke-width: 2.5; }
.pl-inbox-btn:disabled { background: var(--pl-lift); color: var(--pl-muted) !important; box-shadow: none; cursor: default; }

/* ---------- 11 需有量条 size s：一行合成条（10-18 傍晚，站 4 一张单多种料的表） ---------- */
.pl-needhave.pl-size-s { display: grid; grid-template-columns: var(--pl-nh1-label, 110px) minmax(80px, 1fr) 132px 120px 128px; align-items: center; column-gap: 14px; min-height: 36px; width: 100%; }
.pl-nh1-label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.pl-nh1-label .pl-icon { color: var(--pl-ink-2); }
.pl-nh1-track { position: relative; height: 14px; border-radius: 2px; background: var(--pl-lift); box-shadow: inset 0 0 0 1px var(--pl-line-2); }
.pl-nh1-have { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pl-accent); border-radius: 2px 0 0 2px; }
.pl-nh1-gap { position: absolute; top: 0; bottom: 0; background: var(--pl-bad); border-left: 2px solid var(--pl-surface); }
.pl-nh1-num { font: 600 18px/1 var(--pl-num-font); white-space: nowrap; display: inline-flex; gap: 4px; align-items: baseline; color: var(--pl-ink-2); }
.pl-nh1-num b { color: var(--pl-ink); }
.pl-nh1-state { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.pl-needhave[data-gap] .pl-nh1-state { color: var(--pl-bad); }
.pl-nh1-state:not(:has(.pl-mark[data-tone="bad"])) { color: var(--pl-ink-2); font-weight: 400; }
.pl-nh1-date { display: inline-flex; align-items: center; gap: 4px; font: 600 16px/1 var(--pl-num-font); color: var(--pl-ink-2); white-space: nowrap; }
.pl-rank-more { min-height: 30px; }
.pl-rank-more .pl-meta { grid-column: 1 / -1; }
.pl-age-lab[data-zero] .pl-age-v { color: var(--pl-muted) !important; font-weight: 600; }   /* 10-18 傍晚：0 的逾期档不标红 */
.pl-age-seg[data-zero] { display: none; }   /* 10-18 傍晚：0 的档条上不画，段名照列 */

/* ---------- 21 竖柱（10-18 傍晚，站 1 近 8 周回款、7 天内要交） ---------- */
.pl-bars { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 240px; }
.pl-bars-unit { font-size: 16px; color: var(--pl-muted); }
.pl-bars-plot { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 0 6px; align-items: end; height: var(--pl-bars-h, 180px); border-bottom: 1px solid var(--pl-line-2); }
.pl-bars.pl-size-l .pl-bars-plot { height: var(--pl-bars-h, 240px); }
.pl-bars-empty { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-bars-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: calc(100% - 28px); }
.pl-bars-bar { width: min(32px, 70%); min-height: 2px; background: var(--pl-nd-2); border-radius: 4px 4px 0 0; }
[data-theme="light"] .pl-bars-col:not([data-hot]):not([data-tone="bad"]):not([data-tone="warn"]) .pl-bars-bar, [data-theme="light"].pl-bars .pl-bars-col:not([data-hot]):not([data-tone="bad"]):not([data-tone="warn"]) .pl-bars-bar { background: var(--pl-nd-1); }
.pl-bars-col[data-hot] .pl-bars-bar { background: var(--pl-accent); box-shadow: var(--pl-glow); }
.pl-bars-col[data-tone="bad"] .pl-bars-bar { background: var(--pl-bad); }
.pl-bars-col[data-tone="warn"] .pl-bars-bar { background: var(--pl-warn); }
.pl-bars-v { font: 600 16px/1 var(--pl-num-font); color: var(--pl-ink-2); margin-bottom: 6px; white-space: nowrap; }
.pl-bars-col[data-hot] .pl-bars-v { color: var(--pl-ink); font-size: 20px; font-weight: 700; }
.pl-bars-lab { position: absolute; top: 100%; margin-top: 10px; font: 16px/1 var(--pl-num-font); color: var(--pl-muted); white-space: nowrap; }
.pl-bars-col[data-hot] .pl-bars-lab { color: var(--pl-ink); font-weight: 700; }
.pl-bars-plot:not(.pl-bars-empty) { margin-bottom: 32px; }

/* ---------- 22 堆叠条（10-18 傍晚，站 1 在产按状态分） ---------- */
.pl-stack { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 240px; }
.pl-stack > .pl-stat-head .pl-val { font-size: 28px; line-height: 1; }
.pl-stack-bar { display: flex; gap: 2px; height: var(--pl-stack-h, 34px); }
.pl-stack.pl-size-l .pl-stack-bar { height: var(--pl-stack-h, 42px); }
.pl-stack-empty { align-items: center; justify-content: center; border: 1.5px dashed var(--pl-line-2); border-radius: var(--pl-radius); }
.pl-stack-seg { display: flex; align-items: center; justify-content: center; min-width: 6px; background: var(--pl-nd-2); color: var(--pl-ink); }
[data-theme="light"] .pl-stack-seg:not([data-tone="warn"]):not([data-tone="bad"]):not([data-cat]), [data-theme="light"].pl-stack .pl-stack-seg:not([data-tone="warn"]):not([data-tone="bad"]):not([data-cat]) { background: var(--pl-nd-1); }
.pl-stack-seg:first-child { border-radius: var(--pl-radius) 0 0 var(--pl-radius); }
.pl-stack-seg:last-child { border-radius: 0 var(--pl-radius) var(--pl-radius) 0; }
.pl-stack-seg:only-child { border-radius: var(--pl-radius); }
.pl-stack-seg[data-tone="warn"] { background: var(--pl-warn); color: var(--pl-on-accent); }
[data-theme="light"] .pl-stack-seg[data-tone="warn"], [data-theme="light"].pl-stack .pl-stack-seg[data-tone="warn"] { color: var(--pl-ink); }
.pl-stack-seg[data-tone="bad"] { background: var(--pl-bad); color: var(--pl-on-bad); }
.pl-stack-seg[data-cat="1"], .pl-stack-sw[data-cat="1"] { background: var(--pl-cat-1); }
.pl-stack-seg[data-cat="2"], .pl-stack-sw[data-cat="2"] { background: var(--pl-cat-2); }
.pl-stack-seg[data-cat="3"], .pl-stack-sw[data-cat="3"] { background: var(--pl-cat-3); }
.pl-stack-seg[data-cat="4"], .pl-stack-sw[data-cat="4"] { background: var(--pl-cat-4); }
.pl-stack-seg[data-cat="5"], .pl-stack-sw[data-cat="5"] { background: var(--pl-cat-5); }
.pl-stack-in { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 var(--pl-num-font); white-space: nowrap; }
.pl-stack-in .pl-mark::before { background: currentColor !important; }
.pl-stack-under { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pl-stack-lab { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1.3 var(--pl-num-font); color: var(--pl-ink-2); white-space: nowrap; }
.pl-stack-sw { width: 12px; height: 12px; border-radius: 2px; background: var(--pl-nd-2); }
.pl-stack-sw[data-tone="warn"] { background: var(--pl-warn); }
.pl-stack-sw[data-tone="bad"] { background: var(--pl-bad); }