/* ============================================================
   在线大屏 · 只读查看器样式（配合 site.css 的 token）
   布局：KPI 四格 → 排行榜 → 本周之星 ｜ 右侧最近事件 + 导出
   ============================================================ */
.zplatform { color: var(--ink); font-family: var(--f-text); font-size: 14px; line-height: 1.7; }
.zplatform * { box-sizing: border-box; }

.zp-root { display: block; }
.zp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.zp-tabs { display: inline-flex; gap: 2px; }
.zp-tab {
  padding: 7px 14px; font-size: 13px; color: var(--muted); border-radius: var(--r-sm);
  transition: color .18s, background .18s;
}
.zp-tab:hover { color: var(--ink); background: rgb(243 241 234 / .04); }
.zp-tab[aria-selected="true"] { color: var(--acc-ink); background: var(--acc); font-weight: 500; }
.zp-live, .zp-demo {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--acc);
}
.zp-live::before, .zp-demo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(198 227 155 / .16); }
.zp-demo { color: #D6B87A; }
.zp-demo::before { box-shadow: 0 0 0 3px rgb(214 184 122 / .14); }

.zp-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 900px) { .zp-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* KPI：四格，用发丝线分隔，不做圆角卡片 */
.zp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.zp-kpi { padding: 14px 16px 14px 0; border-right: 1px solid var(--line); }
.zp-kpi:last-child { border-right: 0; padding-right: 0; }
.zp-kpi__n { display: block; font-family: var(--f-mono); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.zp-kpi:nth-child(3) .zp-kpi__n { color: var(--acc); }
.zp-kpi__t { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 560px) {
  .zp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-kpi:nth-child(2) { border-right: 0; }
  .zp-kpi:nth-child(1), .zp-kpi:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* 排行榜 */
.zp-rank { list-style: none; margin: 22px 0 0; padding: 0; }
.zp-rank__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgb(243 241 234 / .055); }
.zp-rank__row:last-child { border-bottom: 0; }
.zp-rank__no { font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); letter-spacing: .06em; }
.zp-rank__name { font-size: 14.5px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-rank__name small { margin-left: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); }
.zp-rank__badges { display: inline-flex; gap: 3px; }
.zp-rank__badges i { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; font-style: normal; font-size: 10px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); }
.zp-rank__pts { font-family: var(--f-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.zp-rank__row.is-top .zp-rank__no { color: var(--acc); }
.zp-rank__row.is-top .zp-rank__name { color: var(--ink); }
.zp-rank__row.is-top .zp-rank__pts { color: var(--acc); }

/* 本周之星 */
.zp-star { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.zp-star__t { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.zp-star__n { font-family: var(--f-display); font-size: 20px; letter-spacing: -.015em; color: var(--acc); }

/* 右列 */
.zp-side { display: flex; flex-direction: column; gap: 22px; }
.zp-log { min-width: 0; }
.zp-side__t { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.zp-events { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.zp-events li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid rgb(243 241 234 / .05); font-size: 13px; }
.zp-ev__who { color: var(--ink-2); white-space: nowrap; }
.zp-ev__why { grid-column: 1 / 2; color: var(--dim); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-ev__pts { font-family: var(--f-mono); font-size: 12.5px; color: var(--acc); text-align: right; }
.zp-ev__pts.is-neg { color: #D9A08B; }

/* 按钮 / 输入（导出的唯一操作） */
.zp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zp-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 13px; color: var(--ink);
  transition: border-color .18s, color .18s, background .18s;
}
.zp-btn:hover { border-color: var(--acc); color: var(--acc); }
.zp-note { font-size: 12.5px; line-height: 1.7; color: var(--dim); margin: 0; }
.zp-status { min-height: 1.4em; margin: 14px 0 0; font-size: 13px; color: var(--acc); }
.zp-status.is-bad { color: #D9A08B; }

/* 纪律存档流 */
.zp-view[hidden] { display: none; }
.zp-feed { max-height: none; display: grid; gap: 0; background: transparent; }
.zp-feed > li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.zp-feed > li.is-del { opacity: .45; }
.zp-ev__card .zp-ev__top { display: flex; align-items: center; gap: 10px; }
.zp-ev__card .zp-ev__top b { font-size: 14px; font-weight: 500; color: var(--ink); }
.zp-sev { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-2); }
.zp-sev--严重 { border-color: rgb(217 160 139 / .45); color: #D9A08B; }
.zp-sev--一般 { border-color: rgb(214 184 122 / .4); color: #D6B87A; }
.zp-sev--轻微 { border-color: rgb(198 227 155 / .35); color: var(--acc); }
.zp-ev__time { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); }
.zp-ev__card .zp-ev__who { margin-top: 6px; font-size: 13px; color: var(--ink-2); white-space: normal; }
.zp-ev__note { margin-top: 3px; font-size: 12.5px; color: var(--dim); }
.zp-ev__by { margin-top: 5px; font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); }

/* 空状态 */
.zp-empty { padding: 26px 0; color: var(--dim); font-size: 13.5px; line-height: 1.9; list-style: none; }
.zp-empty span { color: var(--muted); }