/* Batch69: unified operations UI and interactive visualization layer. */
:root {
  --b69-ink: #18273d;
  --b69-muted: #718096;
  --b69-line: #dce5ef;
  --b69-canvas: #f3f6fa;
  --b69-panel: #ffffff;
  --b69-blue: #2563eb;
  --b69-teal: #0f9f8d;
  --b69-orange: #e07b39;
  --b69-violet: #7566d9;
  --b69-red: #d04c58;
  --b69-shadow: 0 12px 30px rgba(22, 42, 70, .07);
  --b69-shadow-hover: 0 18px 42px rgba(22, 42, 70, .12);
}
body.erp-mode { background: var(--b69-canvas); color: var(--b69-ink); }
body.erp-mode .erp-content { padding: 28px 34px 58px; }
body.erp-mode .erp-page-heading { margin-bottom: 22px; }
body.erp-mode .erp-page-heading h1 { color: var(--b69-ink); font-size: clamp(24px, 2.1vw, 31px); letter-spacing: -.025em; }
body.erp-mode .erp-page-heading p { color: var(--b69-muted); max-width: 760px; }
body.erp-mode .erp-panel, body.erp-mode .erp-module-card, body.erp-mode .intel-card, body.erp-mode .card, body.erp-mode .viz-panel {
  border: 1px solid rgba(214, 225, 237, .95); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: var(--b69-shadow);
}
body.erp-mode .erp-panel:hover, body.erp-mode .erp-module-card:hover, body.erp-mode .viz-panel:hover { box-shadow: var(--b69-shadow-hover); }
body.erp-mode .erp-panel-head, body.erp-mode .chart-head, body.erp-mode .box-head { min-height: 42px; }
body.erp-mode .erp-nav button { border-radius: 10px; margin: 2px 0; }
body.erp-mode .erp-nav button.active { box-shadow: inset 3px 0 0 #67e8f9, 0 6px 16px rgba(7, 22, 46, .14); }
body.erp-mode .erp-nav button:not(.active):hover { background: rgba(255,255,255,.07); }
body.erp-mode .erp-topbar { border-bottom-color: #dce5ef; box-shadow: 0 7px 24px rgba(18, 39, 67, .06); }
body.erp-mode .erp-topbar-right { min-width: 0; }
body.erp-mode button, body.erp-mode input, body.erp-mode select, body.erp-mode textarea { font-family: inherit; }
body.erp-mode input, body.erp-mode select, body.erp-mode textarea { border-color: #d7e1ec; border-radius: 9px; background: #fbfdff; }
body.erp-mode button:focus-visible, body.erp-mode input:focus-visible, body.erp-mode select:focus-visible, body.erp-mode textarea:focus-visible { outline: 3px solid rgba(37,99,235,.2); outline-offset: 1px; }
body.erp-mode .erp-page-active.ui-page-enter { animation: b69PageIn .38s cubic-bezier(.2,.8,.25,1) both; }
body.erp-mode .erp-module-card.ui-revealed, body.erp-mode .erp-kpi-card.ui-revealed, body.erp-mode .viz-panel.ui-revealed, body.erp-mode .viz-summary-card.ui-revealed { animation: b69CardIn .38s cubic-bezier(.2,.8,.25,1) both; animation-delay: var(--motion-delay, 0ms); }
@keyframes b69PageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes b69CardIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
body.ui-motion-reduced .erp-page-active.ui-page-enter, body.ui-motion-reduced .erp-module-card, body.ui-motion-reduced .erp-kpi-card, body.ui-motion-reduced .viz-panel, body.ui-motion-reduced .viz-summary-card { animation: none; }

/* Visualization page */
.erp-visualization-page { display: block; }
.viz-control-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 15px; padding: 14px; border: 1px solid var(--b69-line); border-radius: 14px; background: #f9fbfd; }
.viz-control-group { display: grid; gap: 6px; min-width: 235px; }
.viz-control-label, .viz-control-field { color: #5f7088; font-size: 11px; font-weight: 750; }
.viz-control-field { display: grid; gap: 6px; min-width: 140px; }
.viz-control-field select, .viz-control-field input { width: 100%; height: 36px; }
.viz-segment { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--b69-line); border-radius: 10px; background: #eef3f8; }
.viz-segment button { min-height: 30px; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: #64748b; font-size: 11px; font-weight: 800; cursor: pointer; }
.viz-segment button.active { color: #16458e; background: #fff; box-shadow: 0 3px 10px rgba(32, 62, 100, .1); }
.viz-search-field { flex: 1 1 220px; }
.viz-refresh { min-height: 36px; }
.viz-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 11px; margin-bottom: 15px; }
.viz-summary-card { min-width: 0; padding: 15px; border: 1px solid var(--b69-line); border-top: 3px solid var(--b69-blue); border-radius: 13px; background: var(--b69-panel); box-shadow: 0 8px 20px rgba(29, 55, 86, .045); }
.viz-summary-card.orange { border-top-color: var(--b69-orange); }.viz-summary-card.teal { border-top-color: var(--b69-teal); }.viz-summary-card.violet { border-top-color: var(--b69-violet); }.viz-summary-card.red { border-top-color: var(--b69-red); }.viz-summary-card.green { border-top-color: #1b9a73; }.viz-summary-card.amber { border-top-color: #c68b30; }
.viz-summary-card span, .viz-summary-card small { display: block; color: var(--b69-muted); font-size: 10px; }.viz-summary-card strong { display: block; margin: 7px 0 3px; color: var(--b69-ink); font-size: 22px; line-height: 1.1; }
.viz-main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: 15px; margin-bottom: 15px; }
.viz-secondary-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.55fr); gap: 15px; }
.viz-panel { min-width: 0; overflow: hidden; padding: 18px; }
.viz-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.viz-panel h2 { margin: 4px 0 3px; color: var(--b69-ink); font-size: 18px; letter-spacing: 0; }.viz-panel header p { margin: 0; color: var(--b69-muted); font-size: 11px; line-height: 1.5; }.viz-kicker { color: #6e86a4; font-size: 9px; font-weight: 850; letter-spacing: 0; }
.viz-panel header select { min-width: 96px; height: 34px; }
.viz-chart { position: relative; min-height: 285px; border-radius: 12px; background: #fbfdff; border: 1px solid #e6edf4; overflow: hidden; }.viz-chart-scroll { width: 100%; height: 285px; overflow-x: auto; overflow-y: hidden; }.viz-chart svg { display: block; min-width: 620px; width: 100%; height: 100%; overflow: visible; }
.viz-grid line { stroke: #e5ecf3; stroke-width: 1; }.viz-y-labels text, .viz-x-labels text { fill: #8a98a9; font-size: 10px; }.viz-series { color: var(--viz-series-color); }.viz-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.viz-line-muted { opacity: .28; stroke-width: 1.5; }.viz-area { fill: currentColor; opacity: .12; }.viz-bar { fill: currentColor; opacity: .68; }.viz-point { cursor: pointer; }.viz-point circle { fill: #fff; stroke: currentColor; stroke-width: 2; transition: r .15s ease, fill .15s ease, stroke-width .15s ease; }.viz-point:hover circle, .viz-point.selected circle { r: 6; fill: currentColor; stroke-width: 3; }
.viz-legend { display: flex; align-items: center; gap: 10px; color: #61738b; font-size: 10px; white-space: nowrap; }.viz-legend span { display: inline-flex; align-items: center; gap: 5px; }.viz-legend i { width: 8px; height: 8px; border-radius: 50%; }.viz-legend-note { color: #9aa7b6; }
.viz-point-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-height: 42px; margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: #f5f8fb; color: #697b91; font-size: 10px; }.viz-point-detail b { color: var(--b69-ink); }.viz-point-detail strong { color: var(--b69-blue); font-size: 14px; }.viz-point-detail em { font-style: normal; font-weight: 800; }.viz-point-detail .up { color: #16825f; }.viz-point-detail .down { color: #c34c57; }.viz-detail-main { display: inline-flex; align-items: center; gap: 5px; padding-right: 8px; border-right: 1px solid #dbe5ef; }
.viz-header-count { color: #6c7f94; font-size: 11px; font-weight: 800; white-space: nowrap; }.viz-ranking, .viz-risk-list { display: grid; gap: 9px; }.viz-rank-row { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 7px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }.viz-rank-row:hover { background: #f3f7fb; }.viz-rank-no { color: #a0adbc; font-size: 10px; font-weight: 850; }.viz-rank-copy { display: grid; gap: 5px; min-width: 0; }.viz-rank-copy b { overflow: hidden; color: #354861; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.viz-rank-copy i, .viz-risk-row i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: #e7eef5; }.viz-rank-copy em, .viz-risk-row em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6094e8, #67b7c8); }.viz-rank-row strong { color: #4c6380; font-size: 10px; white-space: nowrap; }
.viz-risk-row { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 10px; }.viz-risk-row span { display: flex; justify-content: space-between; gap: 7px; min-width: 0; }.viz-risk-row b { overflow: hidden; color: #425671; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.viz-risk-row small { color: #8a99aa; font-size: 10px; white-space: nowrap; }.viz-risk-row em { background: linear-gradient(90deg, #db7781, #e2ac55); }
.viz-table-wrap { max-height: 310px; overflow: auto; border: 1px solid #e1e9f1; border-radius: 10px; }.viz-table-wrap table { width: 100%; min-width: 570px; border-collapse: collapse; }.viz-table-wrap th { position: sticky; top: 0; z-index: 1; padding: 9px 10px; background: #f0f5f9; color: #64768d; font-size: 10px; text-align: left; }.viz-table-wrap td { padding: 9px 10px; border-top: 1px solid #edf2f6; color: #4c607a; font-size: 11px; }.viz-table-wrap tbody tr { cursor: pointer; }.viz-table-wrap tbody tr:hover, .viz-table-wrap tbody tr.selected { background: #f1f6ff; }.viz-table-wrap td strong { color: var(--b69-blue); }.viz-table-wrap td.up { color: #16825f; }.viz-table-wrap td.down { color: #c34c57; }
.viz-empty, .viz-error { display: grid; place-items: center; min-height: 120px; color: #8a98aa; font-size: 11px; text-align: center; }.viz-error { color: #bc5962; }.viz-skeleton-row { display: contents; }.viz-skeleton-row i { display: block; height: 88px; border: 1px solid #e3ebf3; border-radius: 13px; background: linear-gradient(90deg, #f3f6f9 25%, #eaf0f5 45%, #f3f6f9 65%); background-size: 220% 100%; animation: b69Skeleton 1.2s ease-in-out infinite; }.viz-skeleton-row i:nth-child(2) { animation-delay: .1s; }.viz-skeleton-row i:nth-child(3) { animation-delay: .2s; }.viz-skeleton-row i:nth-child(4) { animation-delay: .3s; }.viz-chart.is-loading { opacity: .56; }.viz-chart.is-loading:after { content: '正在更新图表'; position: absolute; }
@keyframes b69Skeleton { from { background-position: 120% 0; } to { background-position: -80% 0; } }
@media (max-width: 1260px) { .viz-summary-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); } .viz-main-grid, .viz-secondary-grid { grid-template-columns: 1fr; } }
@media (max-width: 780px) { body.erp-mode .erp-content { padding: 18px 12px 76px; } body.erp-mode .erp-page-heading h1 { font-size: 23px; } .viz-control-bar { align-items: stretch; padding: 11px; } .viz-control-group, .viz-control-field, .viz-search-field { min-width: 0; width: 100%; } .viz-segment { width: 100%; } .viz-segment button { flex: 1; } .viz-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .viz-summary-card { padding: 12px; }.viz-summary-card strong { font-size: 19px; }.viz-panel { padding: 13px; }.viz-panel h2 { font-size: 16px; }.viz-panel > header { gap: 8px; }.viz-legend-note { display: none; }.viz-risk-row { grid-template-columns: 120px minmax(0, 1fr); } }
@media (max-width: 430px) { .viz-summary-grid { grid-template-columns: 1fr 1fr; }.viz-summary-card small { min-height: 28px; }.viz-point-detail { align-items: flex-start; flex-direction: column; gap: 4px; }.viz-detail-main { border-right: 0; padding-right: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.erp-mode .erp-page-active.ui-page-enter,
  body.erp-mode .erp-module-card,
  body.erp-mode .erp-kpi-card,
  body.erp-mode .viz-panel,
  body.erp-mode .viz-summary-card,
  .viz-skeleton-row i { animation: none !important; transition: none !important; }
}