.anomaly-page { width:min(1720px, calc(100vw - 96px)); max-width:none; margin:0 auto; }
.aov-page-shell { display: flex; flex-direction: column; gap: 10px; }
.aov-hero { background: #1f2533; color: #c9d1d9; }
.aov-hero .aov-chart-grid { margin-top:14px; }
.aov-head, .aov-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.aov-head-actions { display:flex; align-items:center; gap:10px; }
.aov-scene-tabs { display:inline-flex; align-items:center; gap:2px; margin-top:12px; padding:3px; background:rgba(15,23,42,.35); border:1px solid rgba(255,255,255,.12); border-radius:7px; }
.aov-scene-tabs button { min-height:30px; padding:4px 13px; color:#aeb9c8; background:transparent; border:0; border-radius:5px; font-size:13px; }
.aov-scene-tabs button:hover { color:#e6edf3; background:rgba(255,255,255,.06); }
.aov-scene-tabs button.active { color:#062f29; background:#5eead4; font-weight:800; }
.aov-updated { color:#8b949e; font-size:12px; white-space:nowrap; }
.aov-refresh { min-height:32px; padding:5px 12px; border-radius:6px; font-size:13px; }
.aov-help { position:absolute; top:12px; right:12px; z-index:2; display:grid; place-items:center; width:20px; height:20px; padding:0; color:#dce6f2; background:rgba(15,23,42,.22); border:1px solid rgba(255,255,255,.34); border-radius:50%; font:700 12px/1 Arial, sans-serif; cursor:help; }
.aov-help:hover, .aov-help:focus { color:#fff; background:rgba(15,23,42,.48); outline:0; }
.aov-help-panel { display:none; clear:both; margin-top:12px; padding:10px 12px; color:#dce6f2; background:rgba(15,23,42,.48); border:1px solid rgba(255,255,255,.16); border-radius:6px; font:12px/1.55 system-ui, -apple-system, "Microsoft YaHei", sans-serif; text-align:left; }
.metric-box.help-open .aov-help-panel, .aov-chart-section.help-open .aov-help-panel { display:block; }
.aov-help-panel b { display:block; margin-bottom:4px; color:#fff; font-size:13px; }
.aov-help-panel span { display:block; white-space:pre-line; }
.aov-chart-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); align-items:start; gap:14px; }
.aov-chart-section, .aov-events-section { background:#1f2533; color:#c9d1d9; }
.aov-chart-section {
  position:relative;
  background-image:linear-gradient(105deg,rgba(0,0,0,.10) 0%,rgba(255,255,255,.07) 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.06),inset -1px -1px 0 rgba(0,0,0,.22),0 4px 10px rgba(0,0,0,.16);
}
.aov-chart-section .aov-section-head { padding-right:34px; }
.aov-chart-section .module-title { color:#e6edf3; font-size:22px; line-height:1.15; margin:0; }
.aov-detail-head h3 { margin:0; color:#e6edf3; font-size:22px; line-height:1.15; }
.aov-hero > .aov-head .module-title, .aov-events-section > .aov-section-head .module-title { color:#e6edf3; font-size:30px; line-height:1.1; letter-spacing:0; margin:0 0 4px; }
.aov-chart-section .module-subtitle, .aov-events-section .module-subtitle { margin-top:6px; }
.aov-pie-layout { display:flex; align-items:center; gap:16px; min-height:188px; padding:12px 4px 0; }
.aov-donut { flex:0 0 auto; width:152px; height:152px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.aov-donut > div { width:104px; height:104px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#1f2533; }
.aov-donut-center { gap:5px; padding:0 6px; text-align:center; }
.aov-donut-center strong { display:flex; flex-direction:column; align-items:center; gap:2px; color:#e6edf3; font-size:12px; font-weight:800; line-height:1.1; white-space:nowrap; }
.aov-donut-center b { font-size:24px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.aov-donut-center b.aov-rate-high { color:#e11d48; }
.aov-donut-center b.aov-rate-low { color:#65a30d; }
.aov-donut-center em { color:#8b949e; font-size:11px; font-style:normal; line-height:1.1; white-space:nowrap; }
.aov-pie-info { flex:1; min-width:0; }
.aov-pie-legend { margin:0; padding:0; list-style:none; }
.aov-pie-legend li { display:grid; grid-template-columns:10px minmax(0, 1fr) auto 48px; align-items:center; gap:8px; min-height:30px; border-bottom:1px solid rgba(255,255,255,.07); color:#aeb9c8; font-size:13px; }
.aov-pie-legend li:last-child { border-bottom:0; }
.aov-pie-legend i { width:10px; height:10px; border-radius:50%; }
.aov-pie-legend b { color:#e6edf3; font-size:15px; font-variant-numeric:tabular-nums; }
.aov-pie-legend em { color:#8b949e; font-size:12px; font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
.aov-chart-note { margin:8px 4px 0; color:#8b949e; font-size:12px; line-height:1.45; }
.aov-empty { margin:14px 0 0; color:#8b949e; font-size:13px; text-align:center; }
.aov-detail-grid { display:grid; grid-template-columns:0.8fr 0.8fr 1.2fr 1.2fr; gap:14px; margin-top:12px; }
.aov-detail-panel { min-width:0; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:14px 14px 10px; background:rgba(15,23,42,.18); background-image:linear-gradient(105deg,rgba(0,0,0,.10) 0%,rgba(255,255,255,.07) 100%); box-shadow:inset 1px 1px 0 rgba(255,255,255,.06),inset -1px -1px 0 rgba(0,0,0,.22),0 4px 10px rgba(0,0,0,.16); transition:transform .16s ease,box-shadow .16s ease; }
.aov-detail-panel:hover { transform:translateY(-1px); box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),inset -1px -1px 0 rgba(0,0,0,.25),0 7px 14px rgba(0,0,0,.20); }
.aov-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.07); }
.aov-detail-head span { flex:0 0 auto; color:#00d4aa; font-size:12px; font-weight:900; }
.aov-fault-filters { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 10px; }
.aov-sub-filters { margin-top:-4px; }
.aov-fault-filters > span { margin-right:3px; color:#8b949e; font-size:12px; }
.aov-fault-filters button { min-height:27px; padding:3px 9px; color:#aeb9c8; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:5px; font-size:12px; }
.aov-fault-filters button:hover, .aov-fault-filters button.active { color:#e6edf3; background:rgba(0,212,170,.12); border-color:rgba(0,212,170,.55); }
.aov-event-list { display:grid; grid-template-columns:1fr; grid-auto-rows:max-content; align-content:start; align-items:start; gap:0; max-height:290px; min-height:204px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:rgba(0,212,170,.55) rgba(255,255,255,.06); }
.aov-event-list-signal,
.aov-event-list-traffic,
.aov-event-list-inverter { max-height:204px; }
.aov-event-list::-webkit-scrollbar { width:8px; }
.aov-event-list::-webkit-scrollbar-track { background:rgba(255,255,255,.06); border-radius:999px; }
.aov-event-list::-webkit-scrollbar-thumb { background:rgba(0,212,170,.55); border-radius:999px; }
.aov-event-row { display:grid; grid-template-columns:28px 8px minmax(0, 1fr); align-items:center; column-gap:10px; width:100%; min-height:58px; padding:10px 4px; color:#dce6f2; background:transparent; border:0; border-top:1px solid rgba(255,255,255,.07); border-radius:0; text-align:left; }
.aov-event-row:hover { background:rgba(255,255,255,.04); }
.aov-event-row.inverter { min-height:76px; align-items:flex-start; padding-top:9px; padding-bottom:9px; }
.aov-event-index { color:#8b949e; font:12px Consolas, monospace; font-style:normal; text-align:right; }
.aov-event-row > i { width:8px; height:8px; border-radius:50%; background:#f2b66d; box-shadow:0 0 0 4px rgba(242,182,109,.12); }
.aov-event-row.fault > i { background:#eb7890; box-shadow:0 0 0 4px rgba(235,120,144,.12); }
.aov-event-lines { min-width:0; display:flex; flex-direction:column; gap:5px; }
.aov-event-line { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.aov-event-line b, .aov-event-line small, .aov-event-line strong, .aov-event-line time, .aov-event-line .aov-event-duration { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.aov-event-line b { flex:1 1 auto; color:#e6edf3; font-size:13px; text-align:right; }
.aov-event-line small { flex:0 1 52%; color:#8b949e; font:11px Consolas, monospace; }
.aov-event-line:first-child small { color:#cbd5e1; font-size:13px; font-weight:900; letter-spacing:.01em; }
.aov-event-line strong { flex:1 1 auto; color:#f2c66d; font:12px Consolas, monospace; }
.aov-event-line:nth-child(2) small { flex:0 0 auto; }
.aov-event-line time { flex:0 0 auto; color:#8b949e; font-size:11px; text-align:right; }
.aov-event-duration { flex:0 0 auto; color:#a7f3d0; font-size:11px; font-weight:900; }
.aov-event-lines-inverter { gap:6px; }
.aov-event-lines-inverter .aov-event-line-top,
.aov-event-lines-inverter .aov-event-line-bottom { min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:10px; }
.aov-event-lines-inverter .aov-event-line-top { gap:8px; }
.aov-event-lines-inverter .aov-event-line-bottom { gap:8px; }
.aov-event-lines-inverter .aov-event-sn { flex:1 1 auto; min-width:118px; color:#cbd5e1; font:13px Consolas, monospace; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aov-event-lines-inverter .aov-event-slave { flex:0 0 auto; color:#8b949e; font:11px Consolas, monospace; white-space:nowrap; }
.aov-event-lines-inverter .aov-event-code { flex:0 0 auto; color:#f2c66d; font:12px Consolas, monospace; text-align:left; white-space:nowrap; }
.aov-event-lines-inverter .aov-event-fault-name { flex:1 1 auto; min-width:0; color:#e6edf3; font-size:13px; font-weight:900; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aov-event-lines-inverter .aov-event-time { flex:0 0 auto; color:#8b949e; font-size:11px; white-space:nowrap; }
.aov-event-lines-inverter .aov-event-duration { color:#a7f3d0; }
.aov-event-lines-inverter .aov-event-scene-label { flex:0 1 auto; }
.aov-event-scene-label { flex:0 1 auto; max-width:176px; padding:2px 7px; border:1px solid rgba(94,234,212,.36); border-radius:999px; color:#5eead4; background:rgba(20,184,166,.10); font-size:11px; font-weight:900; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aov-event-row.signal { min-height:86px; align-items:flex-start; }
.aov-event-lines-signal { gap:4px; }
.aov-event-lines-signal .aov-event-line-top,
.aov-event-lines-signal .aov-event-line-bottom,
.aov-event-lines-signal .aov-event-line-scene { min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:10px; }
.aov-event-lines-signal .aov-event-sn { flex:1 1 auto; color:#cbd5e1; font:13px Consolas, monospace; font-weight:900; white-space:normal; overflow:visible; text-overflow:clip; word-break:break-all; line-height:1.2; }
.aov-event-lines-signal .aov-event-signal-value { flex:0 0 auto; color:#f2c66d; font:12px Consolas, monospace; white-space:nowrap; }
.aov-event-lines-signal .aov-event-signal-level { flex:1 1 auto; color:#8b949e; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aov-event-lines-signal .aov-event-time { flex:0 0 auto; color:#8b949e; font-size:11px; white-space:nowrap; }
.aov-event-lines-signal .aov-event-line-scene .aov-event-scene-label,
.aov-event-lines-traffic .aov-event-line-scene .aov-event-scene-label { flex:0 1 auto; max-width:100%; }
.aov-event-row.traffic { min-height:104px; align-items:flex-start; }
.aov-event-lines-traffic { gap:4px; }
.aov-event-lines-traffic .aov-event-line-top,
.aov-event-lines-traffic .aov-event-line-bottom,
.aov-event-lines-traffic .aov-event-line-extra,
.aov-event-lines-traffic .aov-event-line-scene { min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:10px; }
.aov-event-lines-traffic .aov-event-sn { flex:1 1 auto; color:#cbd5e1; font:13px Consolas, monospace; font-weight:900; white-space:normal; overflow:visible; text-overflow:clip; word-break:break-all; line-height:1.2; }
.aov-event-lines-traffic .aov-event-traffic-reason { flex:1 1 auto; color:#8b949e; font:11px Consolas, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aov-event-lines-traffic .aov-event-traffic-daily { flex:1 1 auto; color:#8b949e; font:11px Consolas, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aov-event-lines-traffic .aov-event-traffic-value { flex:0 0 auto; color:#f2c66d; font:12px Consolas, monospace; white-space:nowrap; }
.aov-event-lines-traffic .aov-event-time { flex:0 0 auto; color:#8b949e; font-size:11px; white-space:nowrap; }
.aov-work-order-section { background:#1f2533; color:#c9d1d9; min-height:118px; }
.aov-work-order-section .module-title { color:#e6edf3; font-size:30px; line-height:1.1; letter-spacing:0; margin:0 0 4px; }
.aov-work-order-section .module-subtitle { margin-top:6px; }
body.light .aov-event-lines-inverter .aov-event-sn,
body.light .aov-event-lines-inverter .aov-event-fault-name { color:#111827; }
body.light .aov-event-lines-inverter .aov-event-slave,
body.light .aov-event-lines-inverter .aov-event-time { color:#475569; }
body.light .aov-event-lines-inverter .aov-event-code { color:#b45309; }
body.light .aov-event-scene-label { color:#047857; background:#d1fae5; border-color:#34d399; }
.aov-view-all { display:block; min-height:32px; margin:12px auto 0; padding:4px 12px; color:#00d4aa; background:transparent; border:0; font-size:13px; }
.aov-view-all:hover { background:rgba(0,212,170,.08); }
body.light .aov-hero { background:#e5e7eb; border-color:rgba(71,85,105,.34); }
body.light .aov-chart-section, body.light .aov-events-section { background:#e5e7eb; }
body.light .aov-chart-section {
  background-image:linear-gradient(105deg,rgba(255,255,255,.72) 0%,rgba(148,163,184,.08) 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(100,116,139,.10),0 4px 10px rgba(15,23,42,.07);
}
body.light .aov-events-section { border-color:rgba(71,85,105,.34); }
body.light .aov-chart-section .module-title, body.light .aov-detail-head h3, body.light .aov-donut strong, body.light .aov-event-line b, body.light .aov-pie-legend b { color:#172033; }
body.light .aov-chart-section .module-title { font-size:22px; }
body.light .aov-detail-head h3 { font-size:22px; }
body.light .aov-hero > .aov-head .module-title, body.light .aov-events-section > .aov-section-head .module-title { color:#111827; }
body.light .aov-donut > div { background:#fff; }
body.light .aov-pie-legend li, body.light .aov-event-row, body.light .aov-detail-panel, body.light .aov-detail-head { border-color:rgba(15,52,96,.1); }
body.light .aov-detail-panel { background:#f8fafc; background-image:linear-gradient(105deg,rgba(255,255,255,.72) 0%,rgba(148,163,184,.08) 100%); box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(100,116,139,.10),0 4px 10px rgba(15,23,42,.07); }
body.light .aov-help { color:#28435d; background:rgba(255,255,255,.55); border-color:rgba(15,52,96,.25); }
body.light .aov-help-panel { color:#172033; background:#f8fafc; border-color:#cbd5e1; }
body.light .aov-help-panel b { color:#111827; }
body.light .aov-donut-center strong { color:#111827; }
body.light .aov-donut-center b.aov-rate-high { color:#dc2626; }
body.light .aov-donut-center b.aov-rate-low { color:#65a30d; }
body.light .aov-donut-center em { color:#1f2937; }
body.light .aov-updated, body.light .aov-donut span, body.light .aov-pie-legend li, body.light .aov-pie-legend em, body.light .aov-empty, body.light .aov-events-section .module-subtitle, body.light .aov-fault-filters > span, body.light .aov-event-index, body.light .aov-event-line small, body.light .aov-event-line time { color:#1f2937; }
body.light .aov-event-line:first-child small { color:#111827; }
body.light .aov-event-row { color:#111827 !important; background:#fff !important; border-top-color:#dbe3ec; }
body.light .aov-event-row:hover { background:#f0fdf9 !important; }
body.light .aov-event-line b, body.light .aov-event-line strong { color:#111827; }
body.light .aov-fault-filters button { color:#374151 !important; background:#fff !important; border-color:#cbd5e1 !important; }
body.light .aov-fault-filters button:hover, body.light .aov-fault-filters button.active { color:#065f46 !important; background:#d1fae5 !important; border-color:#34d399 !important; }
body.light .aov-work-order-section { background:#e5e7eb; }
body.light .aov-work-order-section .module-title { color:#111827; }
body.light .aov-work-order-section .module-subtitle { color:#1f2937; }
body.light .aov-scene-tabs { background:#dbe3ec; border-color:#cbd5e1; }
body.light .aov-scene-tabs button:not(.active) { color:#334155; background:transparent !important; border-color:transparent !important; }
body.light .aov-scene-tabs button:hover:not(.active) { color:#0f172a; background:transparent !important; }
body.light .aov-scene-tabs button.active { color:#064e3b; background:#a7f3d0 !important; border-color:#6ee7c8 !important; }
@media (max-width: 1500px) { .anomaly-page { width:min(1326px, calc(100vw - 64px)); } .aov-chart-grid, .aov-detail-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .aov-chart-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .aov-detail-grid { grid-template-columns:1fr; } }
@media (max-width: 900px) { .aov-chart-grid { grid-template-columns:1fr; } }
@media (max-width: 600px) { .anomaly-page { width:calc(100vw - 24px); } .aov-head { flex-direction:column; } .aov-scene-tabs { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); width:100%; } .aov-scene-tabs button { min-width:0; min-height:34px; padding:4px 6px !important; font-size:12px !important; line-height:1.3; white-space:normal; } .aov-pie-layout { flex-direction:column; align-items:stretch; gap:12px; padding-left:0; } .aov-donut { align-self:center; width:158px; height:158px; } .aov-donut > div { width:110px; height:110px; } .aov-donut-center strong { font-size:11px; } .aov-donut-center b { font-size:21px; } .aov-donut-center em { font-size:10px; } .aov-pie-legend li { grid-template-columns:9px minmax(0, 1fr) auto; } .aov-pie-legend em { display:none; } }