/* ============================================================
   设计运营台 · 标准件库 — 第 3 层：页面版式
   只放版面编排；外观一律来自组件层。
   ============================================================ */

/* ───────── 总览 ───────── */
.kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.kpi-strip .stat:not(:last-child) { border-right: 1px solid var(--line); }
.kpi-strip .stat .v { font-size: var(--fs-32); }

.risk-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.risk-cell { padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); border-right: 1px solid var(--line); }
.risk-cell:last-child { border-right: 0; }
.risk-cell .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.risk-cell .n { font-size: var(--fs-20); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.risk-cell .l { font-size: var(--fs-12); color: var(--ink-3); }

.ov-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: var(--sp-4); align-items: start; }

.series-panel .panel-body { padding-top: var(--sp-3); }
.series-chart { height: 220px; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--pine-950); color: #EDF4EF; font-size: var(--fs-11); padding: 6px 9px; border-radius: 7px; box-shadow: var(--shadow-menu); white-space: nowrap; transform: translate(-50%, -120%); }

.donut-row { display: grid; grid-template-columns: 148px 1fr; gap: var(--sp-5); align-items: center; }
.donut { position: relative; width: 148px; height: 148px; }
.donut svg { transform: rotate(-90deg); }
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .center b { font-size: var(--fs-20); font-weight: 650; letter-spacing: -.02em; display: block; }
.donut .center span { font-size: var(--fs-11); color: var(--ink-3); }

.status-bars .bar-row { grid-template-columns: 52px 1fr 40px; }

.people-rank table.data td, .people-rank table.data th { padding-top: 8px; padding-bottom: 8px; }
.rank-no { width: 18px; color: var(--ink-4); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }

.side-list .list-plain > * { padding: 10px var(--sp-4); }
.act-line { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-12); color: var(--ink-2); min-width: 0; }
.act-line .t { margin-left: auto; color: var(--ink-4); flex: none; font-size: var(--fs-11); }
.act-line b { font-weight: 560; }

/* ───────── 任务 ───────── */
.tasks-panel .filter-bar { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.task-title-cell { display: flex; flex-direction: column; gap: 2px; max-width: 380px; }
.task-title-cell b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-title-cell span { font-size: var(--fs-11); color: var(--ink-4); }
.bulk-hint { font-size: var(--fs-12); color: var(--ink-3); }
.flag-list { display: flex; gap: 4px; flex-wrap: wrap; max-width: 220px; }

.due-cell { font-variant-numeric: tabular-nums; font-size: var(--fs-12); }
.due-cell b { display: block; font-weight: 560; font-size: var(--fs-13); }
.due-cell span { color: var(--ink-4); }
.due-cell.overdue b { color: var(--accent); }

.drawer-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer-section h3 { font-size: var(--fs-12); color: var(--ink-3); font-weight: 600; }
.drawer-hero .subject { font-size: var(--fs-16); font-weight: 600; line-height: 1.4; }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.evidence-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; font-size: var(--fs-12); color: var(--ink-2); }
.evidence-cell b { display: block; font-size: var(--fs-11); color: var(--ink-4); font-weight: 500; margin-bottom: 2px; }
.timeline { display: flex; flex-direction: column; position: relative; padding-left: 16px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.timeline > div { position: relative; padding: 4px 0; font-size: var(--fs-12); color: var(--ink-2); }
.timeline > div::before { content: ""; position: absolute; left: -16px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); border: 2px solid var(--surface); }
.timeline > div.hot::before { background: var(--brand); }
.timeline .when { color: var(--ink-4); font-size: var(--fs-11); margin-left: 6px; }

/* ───────── 人员 ───────── */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.person-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4) var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); transition: border-color var(--t-fast), transform var(--t-fast); }
.person-card:hover { border-color: var(--line-strong); }
.person-card.dim { opacity: .55; }
.person-top { display: flex; align-items: center; gap: var(--sp-3); }
.person-top .who { min-width: 0; flex: 1; }
.person-top .who b { display: block; font-size: var(--fs-14); font-weight: 600; }
.person-top .who span { font-size: var(--fs-11); color: var(--ink-4); }
.person-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.person-stats div { text-align: left; }
.person-stats b { display: block; font-size: var(--fs-16); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.person-stats span { font-size: var(--fs-11); color: var(--ink-3); }
.person-bar { height: 6px; border-radius: 3px; background: #EEF0E9; overflow: hidden; }
.person-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.person-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); border-top: 1px solid #EDEFE9; margin: 0 calc(-1 * var(--sp-5)); padding: var(--sp-2) var(--sp-5); }

/* ───────── 数据源 ───────── */
.upload-zone { border: 1.5px dashed var(--line-strong); border-radius: var(--r-l); padding: var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; background: var(--surface-2); transition: border-color var(--t-fast), background var(--t-fast); cursor: pointer; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--brand); background: var(--brand-50); }
.upload-zone .glyph { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--brand); }
.upload-zone .glyph svg { width: 20px; height: 20px; }
.upload-zone b { font-size: var(--fs-13); }
.upload-zone span { font-size: var(--fs-12); color: var(--ink-3); }

.sheet-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.preview-stats > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; }
.preview-stats b { display: block; font-size: var(--fs-18); font-weight: 650; font-variant-numeric: tabular-nums; }
.preview-stats span { font-size: var(--fs-11); color: var(--ink-3); }
.warning-list { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-12); }
.warning-list > div { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; background: var(--amber-50); color: #6E4A08; border-radius: 8px; }
.warning-list > div.err { background: var(--accent-50); color: #93341A; }
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; min-height: 320px; }

.mapping-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-4); align-items: start; }
.mapping-sheets { display: flex; flex-direction: column; gap: 2px; }
.mapping-sheets button { text-align: left; padding: 8px 10px; border-radius: 8px; font-size: var(--fs-13); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.mapping-sheets button:hover { background: var(--surface-2); }
.mapping-sheets button.active { background: var(--brand-50); color: var(--brand-ink); font-weight: 560; }
.mapping-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px var(--sp-4); }
.mapping-columns .field { flex-direction: row; align-items: center; gap: var(--sp-2); }
.mapping-columns .field label { width: 92px; flex: none; font-size: var(--fs-12); }
.mapping-columns .input { height: 30px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-transform: uppercase; }

.cron-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-12); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }

/* ───────── 指标与月结 ───────── */
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); align-items: start; }
.rule-row { display: grid; grid-template-columns: 1.2fr 1fr 84px 84px 40px; gap: var(--sp-2); align-items: center; padding: 6px 0; }
.coef-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.coef-grid .field label { font-size: var(--fs-11); }
.tier-row { display: grid; grid-template-columns: 1fr 1fr 1fr 36px; gap: var(--sp-2); align-items: center; }

.settle-summary { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); background: var(--pine-900); color: #EAF2EC; border-radius: var(--r-l); overflow: hidden; }
.settle-summary > div { padding: var(--sp-4) var(--sp-5); border-right: 1px solid rgba(255,255,255,.09); }
.settle-summary > div:last-child { border-right: 0; }
.settle-summary span { display: block; font-size: var(--fs-11); color: #8FA99A; }
.settle-summary b { display: block; font-size: var(--fs-24); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.settle-summary small { font-size: var(--fs-11); color: #8FA99A; }
.settle-tabs { display: flex; gap: var(--sp-1); }

/* ───────── 消息 ───────── */
.msg-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--sp-4); align-items: start; }
.target-picker { border: 1px solid var(--line); border-radius: var(--r-s); max-height: 220px; overflow: auto; }
.target-picker .tp-row { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid #EDEFE9; font-size: var(--fs-13); cursor: pointer; }
.target-picker .tp-row:hover { background: var(--surface-2); }
.target-picker .tp-row:last-child { border-bottom: 0; }
.target-picker input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; }
.draft-content { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); line-height: 1.7; white-space: pre-wrap; }
.token-box { display: flex; gap: var(--sp-2); align-items: center; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-s); padding: 8px 12px; font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-12); }
.token-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ───────── 设置 / 审计 ───────── */
.settings-group { margin-bottom: var(--sp-4); }
.settings-group .panel-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.settings-group .field { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: var(--sp-4); }
.settings-group .field .help { grid-column: 2; margin-top: -6px; }
.settings-group .field > label { justify-content: flex-end; text-align: right; font-size: var(--fs-13); }
.secret-wrap { position: relative; display: flex; gap: var(--sp-2); }
.secret-wrap .input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.llm-meter { height: 8px; border-radius: 4px; background: #EEF0E9; overflow: hidden; }
.llm-meter i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }

/* ───────── 工作台（手机端） ───────── */
.work-wrap { max-width: 560px; margin: 0 auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.work-hero { background: var(--pine-900); border-radius: var(--r-l); color: #EAF2EC; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.work-hero .date-line { font-size: var(--fs-12); color: #8FA99A; }
.work-hero .big { font-size: var(--fs-24); font-weight: 650; letter-spacing: -.02em; }
.work-hero .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.work-hero .mini-grid div { background: rgba(255,255,255,.07); border-radius: var(--r-s); padding: 8px 10px; }
.work-hero .mini-grid b { display: block; font-size: var(--fs-18); font-weight: 650; font-variant-numeric: tabular-nums; }
.work-hero .mini-grid span { font-size: 10px; color: #8FA99A; }
.work-task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.work-task b { font-size: var(--fs-13); font-weight: 560; line-height: 1.45; }
.work-task .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-11); color: var(--ink-3); }

@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-strip .stat:nth-child(3) { border-right: 0; }
  .kpi-strip .stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .ov-grid { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: 1fr; }
  .msg-grid { grid-template-columns: 1fr; }
  .mapping-grid { grid-template-columns: 1fr; }
  .settle-summary { grid-template-columns: repeat(3, 1fr); }
  .settle-summary > div:nth-child(3) { border-right: 0; }
  .settle-summary > div:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.09); }
}
@media (max-width: 900px) {
  .risk-strip { grid-template-columns: repeat(2, 1fr); }
  .risk-cell:nth-child(2) { border-right: 0; }
  .risk-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip .stat { border-bottom: 1px solid var(--line); }
  .kpi-strip .stat:nth-child(2n) { border-right: 0; }
  .kpi-strip .stat:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .donut-row { grid-template-columns: 1fr; justify-items: center; }
  .mapping-columns { grid-template-columns: 1fr; }
  .settings-group .field { grid-template-columns: 1fr; gap: 6px; }
  .settings-group .field > label { justify-content: flex-start; text-align: left; }
  .settings-group .field .help { grid-column: auto; }
  .rule-row { grid-template-columns: 1fr 1fr; }
  .preview-stats { grid-template-columns: repeat(2, 1fr); }
  .settle-summary { grid-template-columns: repeat(2, 1fr); }
  .settle-summary > div { border-right: 0; }
  .settle-summary > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.09); }
  .evidence-grid { grid-template-columns: 1fr; }
  .tasks-panel .filter-bar { gap: 6px; }
  .tasks-panel .filter-bar .searchbox { flex: 1 1 100%; }
}