/* 故障导出统计：按设计稿的单行导航、四张指标卡、三栏图表和紧凑明细表布局。 */
#exportPage {
  --export-stat-text: #edf2f8;
  --export-stat-muted: #aab6c6;
  --export-stat-border: rgba(148,163,184,.10);
  --export-stat-blue: #358eff;
  --export-stat-green: #00d4aa;
  --export-stat-red: #ff435b;
  --export-stat-purple: #9762ed;
  --export-stat-surface: linear-gradient(110deg, #1c2632, #202b37);
}
body:not(.light):has(#exportPage.active #exportStatisticsView:not([hidden])) { background: #0e1722; }
body:not(.light) #exportPage.active:has(#exportStatisticsView:not([hidden])) { background: #0e1722 !important; }
#exportPage [hidden] { display: none !important; }
#exportPage .export-subnav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; margin: 0 0 12px; border-bottom: 1px solid rgba(148,163,184,.22); background: transparent; }
#exportPage .export-subnav-tabs { display: flex; align-self: stretch; flex-shrink: 0; }
#exportPage .export-subnav-tab { position: relative; margin: 0; padding: 0 24px; min-height: 56px; border: 0; border-radius: 0; color: #c0c9d5; background: transparent; font: inherit; font-size: 14px; line-height: 1; font-weight: 400; box-shadow: none; }
#exportPage .export-subnav-tab.active { color: var(--export-stat-green); font-weight: 600; }
#exportPage .export-subnav-tab.active::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--export-stat-green); }
#exportPage .export-subnav button:hover, #exportPage .export-subnav button:active, #exportPage .export-statistics-view button:hover, #exportPage .export-statistics-view button:active { transform: none; }
#exportPage .export-subnav-tab:hover { color: var(--export-stat-green); background: rgba(0,212,170,.03); }
#exportPage .export-statistics-toolbar { display: flex; align-items: center; gap: 16px; margin-left: auto; }
#exportPage .export-date-picker { position: relative; }
#exportPage .export-date-trigger { display: flex; align-items: center; gap: 10px; width: 252px; height: 36px; padding: 0 12px; border: 1px solid rgba(148,163,184,.25); border-radius: 6px; background: linear-gradient(#202b37,#1b2430); color: var(--export-stat-text); font: inherit; font-size: 13px; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
#exportPage .export-date-trigger svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #b2c1d1; stroke-width: 1.5; }
#exportPage .export-range-presets { display: flex; align-items: center; gap: 6px; }
#exportPage .export-range-presets button { height: 36px; padding: 0 18px; border: 1px solid rgba(148,163,184,.16); border-radius: 12px; background: linear-gradient(#1c2632,#141c27); color: #dce5ef; font: inherit; font-size: 13px; line-height: 1; white-space: nowrap; }
#exportPage .export-range-presets button.active { color: #f3fffd; border-color: #009c88; background: linear-gradient(#075950,#06413e); box-shadow: inset 0 0 8px rgba(0,212,170,.13); font-weight: 600; }
#exportPage .export-range-presets button:hover, #exportPage .export-date-trigger:hover { border-color: #00a98f; }
#exportPage .export-subnav button:focus-visible, #exportPage .export-statistics-view button:focus-visible { outline: 2px solid #00d4aa; outline-offset: 3px; }
#exportPage .export-date-popover { position: absolute; right: 0; top: 44px; z-index: 90; width: 310px; padding: 16px; border: 1px solid #3f5366; border-radius: 8px; background: #1c2632; box-shadow: 0 12px 32px #0006; font-size: 13px; }
#exportPage .export-date-popover label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#exportPage .export-date-popover input { min-width: 0; width: 175px; height: 34px; padding: 4px 8px; border: 1px solid #516174; border-radius: 5px; color-scheme: dark; font: inherit; }
#exportPage .export-date-popover > div { display: flex; justify-content: flex-end; gap: 8px; }
#exportPage .export-date-popover button { padding: 6px 14px; font: inherit; border-radius: 5px; color: #dce5ef; background: #303f50; }
#exportPage .export-date-popover button[type="submit"] { color: #072e28; background: #00d4aa; }
#exportPage #exportStatsDateError { color: #ff7b8a; margin-bottom: 8px; }

#exportStatisticsView { color: var(--export-stat-text); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1.4; }
.export-statistics-empty { display: grid; place-items: center; min-height: 340px; border: 1px solid var(--export-stat-border); border-radius: 10px; background: var(--export-stat-surface); color: var(--export-stat-muted); }
.export-statistics-kpis { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,1fr) minmax(0,.94fr) minmax(0,1.04fr); gap: 12px; width: 82.7%; margin-bottom: 12px; }
.export-stat-kpi { display: flex; align-items: center; gap: 24px; height: clamp(118px,6.05vw,124px); padding: 14px 16px; min-width: 0; border: 1px solid var(--export-stat-border); border-radius: 10px; background: var(--export-stat-surface); }
.export-stat-kpi-icon { display: grid; place-items: center; flex: 0 0 82px; width: 82px; height: 82px; border-radius: 35px; }
.export-stat-kpi-icon svg { width: 48px; height: 54px; filter: drop-shadow(2px 4px 5px #0002); }
.export-stat-kpi-icon.blue { background: rgba(47,130,241,.14); }
.export-stat-kpi-icon.green { background: rgba(0,181,143,.14); }
.export-stat-kpi-icon.red { background: rgba(232,64,92,.14); }
.export-stat-kpi-icon.purple { background: rgba(146,93,232,.16); }
.export-stat-kpi-body { flex: 1; min-width: 0; }
.export-stat-kpi-label { color: #f0f4f9; font-size: 14px; margin-bottom: 4px; white-space: nowrap; }
.export-stat-kpi-value { color: #f4f6fb; font-size: 32px; line-height: 1.3; font-weight: 700; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.export-stat-kpi-unit { margin-left: 8px; font-size: 14px; font-weight: 400; }
.export-stat-kpi-meta { margin-top: 6px; color: var(--export-stat-muted); font-size: 13px; white-space: nowrap; }
.export-stat-kpi-meta strong { color: #f4e9cf; font-weight: 600; }
.export-stat-up { color: #00dbab; }
.export-stat-down { color: #ff6579; }
.export-stat-neutral { color: var(--export-stat-muted); }
.export-stat-kpi.green .export-stat-kpi-meta, .export-stat-kpi.red .export-stat-kpi-meta { margin-top: 2px; }
.export-stat-progress { width: 100%; height: 7px; margin-top: 3px; border-radius: 6px; overflow: hidden; background: #414c58; }
.export-stat-progress span { display: block; height: 100%; border-radius: inherit; background: #00d1a3; }
.export-stat-kpi.red .export-stat-progress span { background: #ff435b; }

.export-statistics-grid { display: grid; grid-template-columns: minmax(0,2.35fr) minmax(0,1.06fr) minmax(0,1fr); gap: 12px; margin-bottom: 12px; }
.export-stat-panel { min-width: 0; padding: 14px; border: 1px solid var(--export-stat-border); border-radius: 10px; background: var(--export-stat-surface); overflow: hidden; }
.export-statistics-grid > .export-stat-panel { height: clamp(320px,16.32vw,334px); }
.export-stat-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 22px; margin-bottom: 12px; }
#exportStatisticsView .export-stat-panel-title h3 { padding: 0; margin: 0; color: #f2f5fa; font-size: 14px; font-weight: 600; line-height: 22px; white-space: nowrap; }
#exportStatisticsView .export-stat-trend-panel h3 { font-size: 16px; }
.export-stat-trend-panel { display: flex; flex-direction: column; }
.export-stat-trend-panel .export-stat-panel-title { margin-bottom: 8px; }
.export-chart-legend { display: flex; gap: 18px; padding-right: 24px; align-items: center; font-size: 12px; color: #edf2f8; white-space: nowrap; }
.export-chart-legend > span { position: relative; display: flex; align-items: center; gap: 6px; }
.export-chart-legend > span::before { content: ''; width: 18px; height: 7px; display: inline-block; border-radius: 5px; background: #358eff; }
.export-chart-legend .success::before { background: #24c883; }
.export-chart-legend .failed::before { background: #ff435b; }
.export-chart-legend .rate::before { height: 2px; background: #48a4ff; }
.export-chart-legend .rate::after { content: ''; position: absolute; width: 5px; height: 5px; left: 6px; border: 1px solid #ecf6ff; background: #48a4ff; border-radius: 50%; }
.export-stat-chart-wrap { flex: 1; min-height: 0; width: 100%; overflow-x: auto; overflow-y: hidden; }
.export-stat-chart { display: block; width: 100%; height: 100%; min-width: 660px; }
.export-stat-chart text { fill: #e1e9f2; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 13px; font-weight: 400; }
.export-stat-chart .axis-title { fill: #cad4e1; }
.export-stat-chart .grid-line { stroke: rgba(133,152,173,.11); stroke-width: 1; }
.export-stat-chart .axis-line { fill: none; stroke: rgba(152,171,194,.24); stroke-width: 1; }
.export-stat-chart .bar-total { fill: url(#export-bar-total); stroke: #4b9cf6; stroke-width: .4; }
.export-stat-chart .bar-success { fill: url(#export-bar-success); }
.export-stat-chart .bar-failed { fill: #ff435b; }
.export-stat-chart .success-line { fill: none; stroke: #46a2ff; stroke-width: 2.3; stroke-linejoin: round; }
.export-stat-chart .success-dot { fill: #f2f8ff; stroke: #358eff; stroke-width: 2.5; }
.export-stat-chart .rate-label { fill: #6bd3ff; font-weight: 500; }
.export-stat-chart .count-label { fill: #f5f7fb; }

.export-stat-top-head, .export-stat-top-row { display: grid; grid-template-columns: 34px minmax(0,1.17fr) minmax(0,1fr) 42px 58px; column-gap: 8px; align-items: center; }
.export-stat-top-head { margin: 0 0 8px; height: 24px; color: #b8c5d7; font-size: 13px; }
.export-stat-top-head .top-count-heading { grid-column: 3 / 5; text-align: right; }
.export-stat-top-head > span { white-space: nowrap; }
.export-stat-top-head > span:last-child { text-align: right; }
.export-stat-top-list { display: flex; flex-direction: column; gap: 0; }
.export-stat-top-row { height: 24px; color: #f1f5fa; font-size: 13px; }
.export-stat-rank { display: grid; place-items: center; width: 17px; height: 17px; font-size: 11px; border-radius: 7px; background: #303b48; color: #ced8e4; font-variant-numeric: tabular-nums; }
.export-stat-rank.top-1, .export-stat-rank.top-2, .export-stat-rank.top-3 { border-radius: 50%; font-weight: 700; }
.export-stat-rank.top-1 { color: #e54828; background: linear-gradient(#ffe18b,#ffb329); box-shadow: inset 0 0 0 1px #ffe991; }
.export-stat-rank.top-2 { color: #33404d; background: linear-gradient(#d4dce5,#98a5b5); }
.export-stat-rank.top-3 { color: #4b251e; background: linear-gradient(#ffba9b,#ff936d); }
.export-stat-top-label { min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.export-stat-top-bar { height: 11px; border-radius: 8px; overflow: hidden; background: #2a3441; }
.export-stat-top-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3797ff,#2879e9); box-shadow: inset 0 1px 0 #86c0ff66; }
.export-stat-top-row.user .export-stat-top-bar > span { background: linear-gradient(90deg,#9a65ed,#7150a9); box-shadow: inset 0 1px 0 #c393ff88; }
.export-stat-top-count, .export-stat-top-percent { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.export-stat-top-empty { display: grid; place-items: center; min-height: 200px; color: var(--export-stat-muted); }

#exportStatisticsView .export-stat-table-panel { padding: 8px 14px; }
.export-stat-table-panel .export-stat-panel-title { margin-bottom: 4px; min-height: 22px; }
#exportPage .export-statistics-more { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #46b2ff; font: inherit; font-size: 12px; min-height: 22px; }
#exportPage .export-statistics-more:hover { color: #83ccff; background: transparent; }
.export-statistics-more > span { font-size: 19px; line-height: 1; margin-left: 3px; }
.export-stat-table-wrap { overflow: auto; max-height: 390px; border-radius: 4px; }
.export-stat-table { border-collapse: collapse; width: 100%; min-width: 1100px; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.export-stat-table th { height: 29px; padding: 4px 10px; background: #222d3b; color: #c3d0e1; text-align: left; font-weight: 400; border: 1px solid rgba(148,163,184,.07); position: sticky; top: 0; z-index: 1; }
.export-stat-table td { height: 29px; padding: 3px 10px; color: #f0f4f8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border: 0; }
.export-stat-table tbody tr:nth-child(odd) { background: rgba(9,17,27,.30); }
.export-stat-table tbody tr:nth-child(even) { background: rgba(21,30,41,.17); }
.export-stat-table tbody tr:hover { background: rgba(68,144,224,.09); }
.export-stat-table td:last-child, .export-stat-table th:last-child { text-align: center; }
.export-result { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.export-result.status-success { color: #3ac26d; }
.export-result.status-failed { color: #ff4a56; }
.export-result-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.export-result-icon circle { fill: currentColor; }
.export-result-icon path { stroke: #20323a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
#exportPage .export-download { display: inline-grid; place-items: center; width: 24px; height: 22px; min-height: 0; margin: 0; padding: 0; color: #42b5ff; border: 0; border-radius: 3px; background: transparent; vertical-align: middle; }
.export-download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#exportPage .export-download:hover { background: rgba(66,181,255,.10); }
#exportPage .export-download:disabled { opacity: .45; cursor: not-allowed; }
#exportStatisticsView .export-stat-table-empty { height: 145px; text-align: center; color: var(--export-stat-muted); }
.export-stat-source-warning { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: #493b20; border-radius: 6px; color: #ffdf93; }
#exportPage .export-stat-source-warning button { font: inherit; color: inherit; background: transparent; text-decoration: underline; }

/* 浅色模式复用同一套布局，避免浅色主题下继承绿色实心按钮与低对比文本。 */
body.light #exportPage { --export-stat-text: #253449; --export-stat-muted: #66778b; --export-stat-border: #d9e1e9; --export-stat-surface: linear-gradient(110deg,#fff,#f6f8fb); }
body.light #exportPage .export-subnav-tab { color: #5c6d81; }
body.light #exportPage .export-subnav-tab.active { color: #008a75; }
body.light #exportPage .export-date-trigger, body.light #exportPage .export-range-presets button { color: #34485d; background: #fff; border-color: #cbd6e0; }
body.light #exportPage .export-range-presets button.active { color: #006f5c; background: #def5ed; border-color: #48b6a0; }
body.light #exportPage .export-date-popover { background: #fff; border-color: #cbd6e0; }
body.light #exportPage .export-date-popover input { color-scheme: light; }
body.light #exportStatisticsView .export-stat-panel-title h3, body.light .export-stat-kpi-label, body.light .export-stat-kpi-value { color: #21354b; }
body.light .export-stat-kpi-meta strong { color: #435e7a; }
body.light .export-stat-up { color: #008461; }
body.light .export-chart-legend, body.light .export-stat-top-row { color: #334960; }
body.light .export-stat-top-head { color: #687b91; }
body.light .export-stat-top-bar, body.light .export-stat-progress { background: #dbe3ed; }
body.light .export-stat-chart text, body.light .export-stat-chart .axis-title, body.light .export-stat-chart .count-label { fill: #4e637c; }
body.light .export-stat-chart .rate-label { fill: #1974c3; }
body.light .export-stat-chart .grid-line { stroke: #dfe6ee; }
body.light .export-result.status-success { color: #128348; }
body.light .export-result.status-failed { color: #d72d40; }
body.light .export-stat-table th { color: #526980; background: #e9eff5; border-color: #dde5ed; }
body.light .export-stat-table td { color: #33465c; }
body.light .export-stat-table tbody tr:nth-child(odd) { background: #f3f6fa; }
body.light .export-stat-table tbody tr:nth-child(even) { background: #fff; }

@media (min-width: 761px) {
  /* 两个故障导出子页面共用固定高度，避免隐藏/显示右侧工具栏改变故障数据导出标签行。 */
  #exportPage .export-subnav { height: 56px; min-height: 56px; }
  #exportPage .export-subnav-tabs { height: 56px; }
  #exportPage .export-subnav-tab { height: 56px; min-height: 56px; }
}
@media (min-width: 1400px) {
  /* 二级页面只调整内容区布局，顶部主导航始终使用全站公共尺寸。 */
  #exportStatisticsView .export-stat-table-panel { min-height: 210px; }
  #exportPage .export-subnav { height: 56px; min-height: 56px; }
  #exportPage .export-subnav-tabs { height: 56px; }
  #exportPage .export-subnav-tab { height: 56px; min-height: 56px; }
}
@media (max-width: 1650px) {
  .export-statistics-kpis { width: 100%; }
  .export-statistics-grid { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
  .export-stat-top-head, .export-stat-top-row { grid-template-columns: 24px minmax(0,1.1fr) minmax(25px,.8fr) 32px 44px; gap: 6px; }
  .export-stat-top-row, .export-stat-top-head { font-size: 12px; }
  .export-chart-legend { gap: 10px; padding-right: 0; font-size: 11px; }
}
@media (max-width: 1250px) {
  #exportPage .export-subnav { flex-wrap: wrap; gap: 4px; }
  #exportPage .export-statistics-toolbar { padding-bottom: 10px; }
  .export-statistics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .export-stat-trend-panel { grid-column: 1 / -1; }
  .export-statistics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #exportPage .export-subnav { display: block; }
  #exportPage .export-statistics-toolbar { flex-wrap: wrap; gap: 8px; }
  #exportPage .export-date-trigger { width: 270px; }
  #exportPage .export-date-popover { left: 0; right: auto; max-width: calc(100vw - 48px); }
  #exportPage .export-range-presets { flex-wrap: wrap; }
  .export-statistics-grid { grid-template-columns: minmax(0,1fr); }
  .export-statistics-kpis { grid-template-columns: minmax(0,1fr); }
  .export-stat-trend-panel .export-stat-panel-title { flex-wrap: wrap; }
  .export-stat-top-head, .export-stat-top-row { grid-template-columns: 26px minmax(0,1.1fr) minmax(0,1fr) 38px 48px; }
  .export-stat-top-row { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #exportPage button { transition: none; }
}