/* Palette and dashboard hierarchy adapted from 参考/hongmaowei.html. */
:root {
  color-scheme: dark;
  --canvas: #0a0f18;
  --paper: #102033;
  --sidebar: #0c1828;
  --ink: #eaf2fb;
  --muted: #8fb0cf;
  --line: #22374d;
  --teal: #27b39c;
  --teal-soft: #163b40;
  --risk: #e15b64;
  --amber: #f0b429;
  --blue: #4486ee;
  --sidebar-width: 224px;
}
body { background: radial-gradient(1200px 600px at 50% -10%, #12263f, #0a0f18); }
body.nav-collapsed { --sidebar-width: 64px; }
.app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); transition: grid-template-columns .18s ease; }
.sidebar { background: linear-gradient(180deg, #0e1d30, #0a1421); padding: 24px 14px 14px; border-color: #22374d; }
.app-brand { color: #eaf2fb; gap: 9px; padding: 0 3px; font-size: 15px; }
.brand-symbol { background: #163e40; color: #42c8b1; border: 1px solid #27665e; }
.brand-text small { color: #7fa8c9; }
.workspace-label { color: #9bb6ce; background: #112236; border-color: #223b50; }
.workspace-label .dot { margin: 0; }
.nav-link { color: #96adc4; }
.nav-link.active { background: #16363d; border: 1px solid #236358; color: #54d0b6; box-shadow: none; padding: 10px 12px; }
.nav-link:hover, .side-case:hover, .side-link:hover { background: #142d3d; }
.nav-count { color: #4ac8ad; background: #20493f; }
.side-caption, .side-case, .side-link { color: #809bb4; }
.side-link { display: flex; align-items: center; gap: 9px; }
.demo-note { border-color: #29414e; color: #83b7af; }
.demo-note span { color: #70899e; }
.profile { border-color: #233b4e; }
.profile small, .profile-badge { color: #8da6ba; }
.avatar { background: #173e3d; border-color: #2b5c53; color: #9cdbca; }
.nav-collapsed .sidebar { padding: 24px 9px 14px; }
.nav-collapsed .brand-text, .nav-collapsed .workspace-label, .nav-collapsed .nav-label,
.nav-collapsed .side-caption, .nav-collapsed .side-case, .nav-collapsed .demo-note,
.nav-collapsed .side-label, .nav-collapsed .profile>div, .nav-collapsed .profile-badge { display: none; }
.nav-collapsed .app-brand { justify-content: center; }
.nav-collapsed #navigation { margin-top: 31px; }
.nav-collapsed .nav-link { justify-content: center; position: relative; padding: 13px 10px; min-height: 46px; }
.nav-collapsed .nav-link.active { padding: 12px 9px; }
.nav-collapsed .nav-count { position: absolute; right: 1px; top: 1px; font-size: 8px; padding: 0 3px; }
.nav-collapsed .side-link, .nav-collapsed .profile { justify-content: center; }
.nav-collapsed .side-link { font-size: 19px; padding: 6px; }
.sidebar-toggle { display: grid; place-items: center; color: #8fb0cf; border: 1px solid #284155; font-size: 17px; }
.sidebar-toggle:hover { background: #1a3045; }
.topbar { background: linear-gradient(90deg, #0b1a2b, #12233b); border-color: #253b50; height: 57px; padding: 0 22px; }
.breadcrumb { color: #b5c9da; }
.top-context { color: #789ab9; }
.top-left { gap: 13px; }
main { padding: 20px 22px; max-width: none; }
h1 { font-size: 20px; letter-spacing: 0; font-weight: 650; }
h2 { font-size: 13px; }
.page-head { margin-bottom: 18px; gap: 12px; }
.subtitle { font-size: 11px; color: #799bb9; }
.head-actions { gap: 7px; }
.button { color: #b6cadb; background: #162a3f; border-color: #2a435a; min-height: 32px; padding: 6px 10px; font-size: 11px; }
.button.primary { background: #1b8b7a; border-color: #249f8c; color: #f1fffa; }
.button.soft { color: #4dceb5; background: #133437; border-color: #215d54; }
.button.danger { color: #ed9299; background: #351e2d; border-color: #603442; }
.button:hover:not(:disabled) { filter: brightness(1.16); }
button:hover:not(:disabled), a:hover { filter: brightness(1.06); }
input, select, textarea { background: #0d1a2a; border-color: #2c4358; color: #d6e5f0; }
input::placeholder, textarea::placeholder { color: #6e8ba3; }
input:disabled, textarea:disabled, select:disabled { color: #a4b9ca; opacity: .8; }
select { font-size: 11px; padding: 7px 10px; }
.tag { border: 1px solid transparent; }
.tag.neutral { color: #98adc2; background: #243448; }
.tag.red { color: #ff969e; background: #452630; border-color: #70333d; }
.tag.yellow { color: #f3c764; background: #413723; border-color: #605030; }
.tag.green { color: #63d8ac; background: #183e34; border-color: #275544; }
.tag.blue { color: #93baff; background: #1e3453; border-color: #2d4b77; }
.panel { background: linear-gradient(145deg, rgba(20,40,62,.83), rgba(12,24,39,.93)); border-color: #243c52; border-radius: 9px; }
.panel-head { padding: 12px 14px; border-color: #23384c; }
.panel-head h2 { display: flex; align-items: center; gap: 7px; color: #cfe0f0; }
.panel-head h2:before { content: ''; width: 3px; height: 12px; background: #27b39c; border-radius: 2px; flex-shrink: 0; }
.panel-body { padding: 14px; }
.panel-note { color: #839eb7; font-size: 10px; }
.stack { gap: 13px; }
.text-link { color: #41c3a8; font-size: 11px; }
.back { margin-bottom: 11px; color: #83a5c0; font-size: 11px; }
.workspace-footer { color: #577791; border-color: #1d3043; font-size: 9px; }
.toolbar { gap: 8px; margin-bottom: 14px; }
.search-field input { background: #0f2032; font-size: 11px; }
.segmented { background: #0a192a; border: 1px solid #263d53; }
.segmented button, .segmented a { color: #8ca8c1; }
.segmented .active { color: #50c8b0; background: #1c3e42; box-shadow: none; }
.table-wrap th { background: #122438; color: #90abc2; }
.table-wrap td { color: #c4d7e7; border-color: #20374c; }
.table-wrap td small { color: #7796b2; }
tbody tr:hover { background: #152e40; }
.table-foot, .empty { color: #819fb7; }
.score-track { background: #24374b; }
.metrics { background: #122337; border-color: #243b50; }
.metric { border-color: #243b50; }
.metric-value.risk-text { color: #e88787; }
.metric-value.teal-text { color: #48c5a7; }
.metric-sub, .metric-label { color: #89a6bc; }
.tabs { border-color: #263d50; }
.tab { color: #809cb7; }
.tab.active { color: #42c7ad; }
.steps { background: #102236; border-color: #294257; }
.step { color: #819bb4; }
.step:after { background: #2c455a; }
.step b { border-color: #354c60; }
.step.active { color: #57d0b7; }
.step.active b { background: #247c6b; border-color: #359883; }
.field>span, .field>label { color: #9db5cc; }
.form-actions { border-color: #263e52; }
.timeline-item { border-color: #326b61; }
.timeline-item small { color: #7796b2; }
.key-value { gap: 8px; }
.key-value span { color: #829fb8; }
.key-value strong { font-size: 10.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.source-chip { color: #b6cedf; background: #152a40; border-color: #2b4257; text-align: left; }
.source-chip span { color: #7c99b1; }
.source-chip:hover { border-color: #398779; }
.detail-dialog { background: #102034; border-color: #355068; color: #d8e9f6; box-shadow: 0 25px 90px #000a; }
.detail-dialog::backdrop { background: #030b16bb; }
.dialog-head { border-color: #2a4155; }
.dialog-body p, .document-body { color: #9fb8cb; }
.document-meta { color: #7898b3; }
.source-highlight, .version-note { background: #132e36; border-color: #285448; color: #96c5b9; }
.assistant-output { background: #122e38; border-color: #315565; color: #d0e6f4; }
.suggestions button { background: #123b39; color: #67d8bf; border-color: #286354; }
.knowledge-card { background: #132337; border-color: #2b4258; }
.knowledge-card p, .knowledge-card footer { color: #89a6bd; }
.error-message { color: #f3b5af; background: #3b2730; border-color: #91504c; }
.queue-row { border-color: #243d52; }
.queue-marker { background: #412f2d; color: #ec9b75; }
.queue-marker.blue { background: #1c3553; color: #7db2ec; }
.queue-marker.green { background: #1e423b; color: #69b9a2; }
.queue-meta { color: #8ca8bf; }
.comparison .after { color: #4ad3ad; }
.mini-stat { border-color: #2a4157; }
.mini-stat small { color: #7c9ab2; }
.toast { left: calc(50% + var(--sidebar-width) / 2); background: #215b50; }
/* Flow panorama: retain the reference's 6-node + 4-node rows and family drilldown. */
.v-flow-panel { border: 1px solid #263d53; border-radius: 11px; padding: 19px; background: linear-gradient(140deg,#112237,#0d1928); }
.v-phase { display: flex; align-items: center; gap: 13px; font-size: 11px; color: #92b8d3; margin: 2px 0 13px; letter-spacing: 2px; }
.v-phase i { flex: 1; height: 1px; background: #2b4257; }
.v-phase small { font-size: 9px; letter-spacing: 0; color: #647f98; }
.v-flow-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin-bottom: 23px; }
.v-flow-row.test { grid-template-columns: repeat(4,minmax(0,1fr)); }
.v-flow-node { position: relative; border: 1px dashed #32485d; border-radius: 8px; background: #192a3d; padding: 13px 12px 10px; text-align: left; min-height: 133px; color: #b7c9dc; }
.v-flow-node:not(:last-child):after { content: '›'; position: absolute; right: -9px; top: 44%; color: #6588a4; font-size: 16px; z-index: 1; }
.v-flow-node.selected { border-style: solid; border-color: #28b6a0; background: #153b40; box-shadow: 0 0 18px #1ba4940d; }
.v-flow-node.available { color: #eaf7fc; }
.v-stage-status { position: absolute; top: 7px; right: 8px; font-size: 8px; padding: 1px 5px; border-radius: 5px; background: #253448; color: #849cb3; }
.available .v-stage-status { color: #4bc8ac; background: #1d4b48; }
.v-node-top { display: flex; align-items: center; gap: 8px; margin: 11px 0 14px; }
.v-node-top svg { width: 30px; height: 30px; flex-shrink: 0; color: #92b2cc; }
.available .v-node-top svg { color: #55ceb9; }
.v-node-top strong { display: block; font-size: 12px; line-height: 1.5; }
.v-node-top small { display: block; color: #819eb9; font-size: 9px; margin-top: 2px; }
.v-health-bar { display: flex; height: 5px; border-radius: 4px; overflow: hidden; background: #294159; }
.v-health-bar i { display: block; height: 100%; }
.v-planned-bar { display: block; height: 5px; background: repeating-linear-gradient(135deg,#304259 0px,#304259 5px,#21354b 5px,#21354b 10px); border-radius: 4px; }
.v-node-bottom { display: flex; justify-content: space-between; align-items: center; color: #7e9bb7; font-size: 9px; margin-top: 7px; }
.v-node-bottom b { color: #37c6a5; font-size: 12px; }
.v-family-section { border: 1px solid #243d54; border-radius: 9px; background: #0c1929; padding: 16px; }
.v-family-title { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; color: #8da9c1; font-size: 11px; flex-wrap: wrap; }
.v-family-title strong { color: #40c4ac; display: flex; align-items: center; gap: 5px; font-size: 13px; }
.v-family-title strong svg { width: 22px; height: 22px; }
.v-family-title small { margin-left: auto; font-size: 10px; color: #7da4c5; }
.v-family-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 15px; }
.v-family { background: linear-gradient(130deg,#182d44,#102133); border: 1px solid #29445c; border-radius: 8px; padding: 15px; text-align: left; color: #cfe0ef; }
.v-family:hover { border-color: #27b39c; }
.v-family-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v-family-head strong { font-size: 13px; }
.v-family-head>span { color: #8db0ca; font-size: 11px; }
.v-family-body { display: flex; align-items: center; gap: 15px; margin: 8px 0; }
.v-family-body>div { flex: 1; }
.v-family-body>div>span,.v-distribution>div>span { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #a2bbd0; line-height: 2; }
.v-family-body b,.v-distribution b { margin-left: auto; font-size: 11px; color: #dce9f3; }
.v-family-body i,.v-distribution i,.v-legend i,.v-mini-events i,.v-chart-legend i { width: 6px; height: 6px; display: inline-block; border-radius: 2px; flex-shrink: 0; }
.v-family-link { color: #35bea2; font-size: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #233c4f; padding-top: 9px; }
.v-family-link svg { width: 14px; height: 14px; }
.v-ring { flex-shrink: 0; }
.v-ring-value { font-size: 26px; font-weight: 700; fill: #eaf2fb; }
.v-ring-label { font-size: 9px; fill: #8fb0cf; }
.v-flow-insight { padding: 12px 17px; border-left: 1px solid #253c51; }
.v-flow-insight>span { font-size: 10px; color: #8cacc8; }
.v-flow-insight>strong { display: block; color: #f0bd7c; font-size: 29px; font-weight: 600; }
.v-flow-insight>strong small { font-size: 11px; color: #8cacc8; font-weight: 400; }
.v-mini-events a { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #bad0e0; padding: 5px 0; }
.v-mini-events span { margin-left: auto; color: #be8c78; font-size: 10px; }
.v-empty-stage { min-height: 176px; display: flex; align-items: center; justify-content: center; gap: 20px; color: #9eb9cd; }
.v-empty-stage>svg { width: 55px; height: 55px; color: #64869e; }
.v-empty-stage strong { font-size: 14px; }
.v-empty-stage p { color: #728fa7; font-size: 11px; margin-top: 7px; }
.v-entry-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
.v-entry-row>a { display: flex; gap: 13px; align-items: center; border: 1px solid #253c53; padding: 16px 18px; border-radius: 8px; background: #102035; }
.v-entry-row svg { width: 25px; height: 25px; color: #41bea8; }
.v-entry-row strong { font-size: 12px; display: block; }
.v-entry-row span { font-size: 10px; color: #7999b3; }
.v-entry-row b { margin-left: auto; color: #4f998c; font-size: 13px; }
/* Health overview: risk/distribution, central heatmap, alarm stream. */
.v-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 11px; margin: 0 0 15px; }
.v-kpi { display: flex; flex-direction: column; background: linear-gradient(145deg,#192f48aa,#102036); border: 1px solid #284159; padding: 12px 16px; border-radius: 8px; }
.v-kpi>span { color: #92acc5; font-size: 10px; }
.v-kpi>strong { font-size: 27px; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; }
.v-overview-grid { display: grid; grid-template-columns: 220px minmax(0,1fr) 248px; gap: 14px; align-items: start; }
.v-distribution { display: flex; align-items: center; gap: 11px; }
.v-distribution .v-ring { width: 99px; height: 99px; }
.v-distribution>div { flex: 1; }
.v-distribution>div>span { font-size: 9px; gap: 5px; }
.v-risk-row { display: flex; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid #243c4f; font-size: 10px; }
.v-risk-row:last-child { border-bottom: 0; }
.v-risk-row strong { font-size: 11px; min-width: 55px; }
.v-risk-row small { color: #7191ad; font-size: 9px; }
.v-risk-row>span { height: 5px; background: #20364a; flex: 1; border-radius: 4px; overflow: hidden; }
.v-risk-row>span>i { display: block; height: 100%; }
.v-risk-row>b { width: 20px; text-align: right; }
.v-zone { margin-bottom: 16px; }
.v-zone:last-child { margin-bottom: 0; }
.v-zone-label { display: flex; justify-content: space-between; color: #80a3bf; font-size: 10px; margin-bottom: 8px; }
.v-cells { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 5px; }
.v-cell { display: grid; place-items: center; min-height: 32px; border-radius: 4px; background: color-mix(in srgb,var(--cell) 68%,#0c1b29); border: 1px solid color-mix(in srgb,var(--cell) 65%,#355268); color: #f1f9fd; font-size: 10px; font-weight: 600; }
.v-cell:hover { transform: scale(1.1); outline: 1px solid #e9faf3; outline-offset: 1px; }
.v-legend { display: flex; flex-wrap: wrap; gap: 8px 11px; color: #8babc4; font-size: 9px; margin-top: 17px; }
.v-legend span { display: inline-flex; align-items: center; gap: 5px; }
.v-alarm-machine { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #253b4e; gap: 8px; }
.v-alarm-machine:last-child { border: 0; }
.v-alarm-machine strong { display: block; font-size: 12px; }
.v-alarm-machine small { color: #7e9fb9; font-size: 9px; display: block; }
.v-alarm-stream>a { display: grid; grid-template-columns: 42px 1fr; font-size: 10px; padding: 9px 0; gap: 2px 6px; border-bottom: 1px solid #263c4f; }
.v-alarm-stream time { color: #78a0bd; }
.v-alarm-stream span { grid-column: 1/-1; color: #9ab5cb; font-size: 9px; }
.v-event-strip { display: grid; gap: 10px; }
.v-event-strip a { display: flex; gap: 9px; align-items: center; font-size: 10px; }
.v-event-strip a>span:last-child { color: #91afc7; }
/* Original three-column diagnostic and efficiency compositions. */
.v-three-grid { display: grid; grid-template-columns: 220px minmax(0,1fr) 282px; gap: 14px; align-items: start; }
.v-three-grid.efficiency { grid-template-columns: 220px minmax(0,1fr) 270px; }
.v-title-id { margin-left: 8px; color: #63c9b4; }
.v-device-select { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #7fa5c4; }
.v-device-select select { max-width: 150px; }
.v-gauge { max-width: 210px; margin: 0 auto; }
.v-gauge svg { width: 100%; }
.v-gauge-label { text-align: center; margin: 0 0 14px; }
.v-device-event { padding: 11px 0; border-bottom: 1px solid #263e52; }
.v-device-event time { color: #7f9fb8; font-size: 10px; margin-right: 9px; }
.v-device-event p { color: #aec3d3; font-size: 11px; margin: 6px 0; }
.v-params { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.v-param { border: 1px solid #28483f; background: #15302f; border-radius: 7px; padding: 10px; min-width: 0; }
.v-param>span { font-size: 10px; color: #88bdb2; }
.v-param>strong { font-size: 22px; color: #52c4a1; display: block; line-height: 1.6; }
.v-param strong small { font-size: 9px; color: #84a798; margin-left: 3px; font-weight: 400; }
.v-param>div { font-size: 8px; color: #709990; }
.v-param.abnormal { background: #38272e; border-color: #623742; }
.v-param.abnormal>span,.v-param.abnormal>strong { color: #e59294; }
.v-param.abnormal>div,.v-param.abnormal small { color: #b58689; }
.v-param.missing { background: #25303c; border-color: #3c4b5b; }
.v-trends { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 15px; }
.v-trend { min-width: 0; border-bottom: 1px solid #22394e; padding-bottom: 4px; }
.v-trend>div { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #8fb0cf; }
.v-trend b { font-size: 11px; }
.v-trend b small { font-size: 8px; font-weight: 400; }
.v-spark { width: 100%; height: auto; display: block; overflow: visible; }
.v-spark.compact { min-height: 92px; }
.v-spark text,.v-distribution-chart text { font-family: inherit; font-size: 9px; fill: #7da2c1; }
.v-spark circle { cursor: pointer; }
.v-spark circle:hover { fill: #e7f8fb; }
.v-gridline { stroke: #243d53; stroke-width: .7; fill: none; }
.v-base { stroke: #ae9767; stroke-dasharray: 4 4; stroke-width: .8; }
.chart-reading { font-size: 9px; color: #69b9a9; }
.v-source-layers { display: flex; flex-direction: column; gap: 10px; }
.v-source-layers>div { display: flex; align-items: center; gap: 10px; font-size: 10px; }
.v-source-layers b { color: #abc5d8; min-width: 95px; font-size: 10px; }
.v-source-layers>div>span:not(.tag) { color: #7296b2; flex: 1; }
.v-diagnosis { border: 1px solid #274a62; background: #142f45; border-radius: 7px; padding: 12px; }
.v-diagnosis>div:first-child { display: flex; align-items: center; gap: 7px; }
.v-diagnosis svg { width: 15px; height: 15px; color: #58b6d1; }
.v-diagnosis strong { font-size: 12px; color: #adcfe3; }
.v-diagnosis p,.v-diagnosis li { font-size: 11px; color: #94b2ca; line-height: 1.9; }
.v-diagnosis p { margin-top: 9px; }
.v-diagnosis ol { padding-left: 18px; margin: 10px 0 0; }
.v-cause-chain { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 9px; margin-top: 12px; }
.v-cause-chain span { padding: 3px 5px; border: 1px solid #32546a; background: #17354d; border-radius: 3px; color: #a4c6db; }
.v-cause-chain b { color: #43897e; }
.v-action-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.v-mini-loop { display: flex; align-items: center; gap: 5px; flex-direction: column; }
.v-mini-loop>span { border: 1px solid #2c4b5b; background: #17333f; color: #8bbbad; width: 100%; text-align: center; font-size: 10px; padding: 6px; border-radius: 4px; }
.v-mini-loop>b { color: #427e75; font-size: 10px; line-height: 1; }
.v-jobbar { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; padding: 13px 17px; border: 1px solid #294358; background: linear-gradient(135deg,#192f46,#0f1f31); border-radius: 8px; margin-bottom: 15px; }
.v-jobbar>div>span { color: #7499b7; font-size: 9px; display: block; }
.v-jobbar strong { font-size: 12px; color: #cce2f0; }
.v-job-source { margin-left: auto; background: #173d3f; border: 1px solid #2a665c; color: #74c3ad; border-radius: 6px; padding: 3px 10px; font-size: 9px; }
.v-machine-svg { width: 100%; height: auto; border: 1px dashed #34556c; border-radius: 6px; background: #0b1b2b; }
.v-lamps { display: flex; justify-content: center; gap: 13px; margin: 15px 0 7px; }
.v-lamps i { width: 21px; height: 21px; border: 1px solid #365169; border-radius: 50%; background: #1b3043; }
.v-lamps .on { background: #22b07d; border-color: #2cd19b; box-shadow: 0 0 14px #22b07d50; }
.v-lamp-caption { font-size: 10px; color: #56bc9b; text-align: center; margin-bottom: 14px; }
.v-machine-ports>div { display: flex; justify-content: space-between; gap: 7px; font-size: 10px; padding: 9px 0; border-bottom: 1px solid #233d53; }
.v-machine-ports span { color: #85a5bf; }
.v-machine-ports strong { color: #bad1e2; font-size: 10px; }
.v-panel-sub { color: #85b9cf; font-size: 10px; margin-top: 16px; }
.v-chart-legend { display: flex; align-items: center; gap: 15px; color: #8aabc4; font-size: 9px; margin-bottom: 8px; }
.v-chart-legend>span { display: inline-flex; align-items: center; gap: 6px; }
.v-distribution-chart { width: 100%; height: auto; }
.v-eff-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 9px 0; }
.v-eff-metrics span { color: #769bb7; font-size: 9px; text-align: center; border-right: 1px solid #274057; }
.v-eff-metrics span:last-child { border: 0; }
.v-eff-metrics strong { color: #9dd8d0; font-size: 23px; display: block; }
.v-eff-metrics .warning { color: #edaf6e; }
.v-step-row { display: grid; grid-template-columns: 35px minmax(0,1fr) 95px; align-items: center; gap: 10px; font-size: 10px; margin: 15px 0; }
.v-step-row>span { color: #97b2c9; }
.v-step-row>div { background: #1a3046; border-radius: 3px; height: 19px; display: flex; flex-direction: column; gap: 3px; }
.v-step-row i { display: block; height: 9px; border-radius: 2px; }
.v-step-row b { display: block; height: 5px; background: #546b83; border-radius: 2px; }
.v-step-row strong { color: #b9cdde; font-size: 10px; text-align: right; }
.v-peer-chart>a { display: grid; grid-template-columns: 65px minmax(0,1fr) 37px; align-items: center; gap: 9px; font-size: 10px; color: #a5c1d7; margin: 13px 0; }
.v-peer-chart>a>div { background: #1a3046; height: 13px; border-radius: 2px; }
.v-peer-chart i { display: block; height: 100%; border-radius: 2px; }
.v-eff-alert { border-left: 3px solid #e15b64; background: #392933; padding: 12px; border-radius: 5px; }
.v-eff-alert strong { font-size: 12px; color: #e3a3a2; }
.v-eff-alert p { font-size: 10px; color: #b6919b; line-height: 1.8; margin-top: 5px; }
.v-eff-alert.ok { background: #173c34; border-color: #27b39c; }
.v-eff-alert.ok strong,.v-eff-alert.ok p { color: #81bda7; }
.v-attribution>div { display: grid; grid-template-columns: 58px minmax(0,1fr) 20px; gap: 9px; align-items: center; margin: 12px 0; font-size: 10px; color: #9bb9d1; }
.v-attribution i { display: block; height: 9px; background: #1f3549; border-radius: 2px; }
.v-attribution b { display: block; height: 100%; border-radius: 2px; }
.v-event-detail { background: #112b3e; border: 1px solid #274a61; padding: 10px; border-radius: 5px; font-size: 10px; }
.v-event-detail strong { color: #88c6b2; }
.v-event-detail p { color: #7d9fb9; margin-top: 4px; }
.event-pick { border-color: #2a4159; color: #8faec6; background: #102236; display: flex; gap: 9px; font-size: 10px; }
.event-pick.active { background: #173f3e; color: #8bd4c1; border-color: #287b68; }
.v-kpis.knowledge { grid-template-columns: repeat(4,1fr); }
.v-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin: 0 0 20px; }
.v-mode-card { border: 1px solid #294158; background: linear-gradient(140deg,#162a3f,#101e30); border-radius: 8px; padding: 14px; }
.v-mode-title { display: flex; align-items: center; gap: 8px; }
.v-mode-title>svg { width: 18px; height: 18px; color: #55baab; }
.v-mode-title a { font-size: 13px; font-weight: 600; flex: 1; }
.v-mode-title .tag { font-size: 8px; }
.v-mode-body { display: grid; grid-template-columns: minmax(0,1fr) 65px; align-items: center; gap: 10px; margin: 12px 0 2px; }
.v-mode-signature>span { font-size: 9px; color: #7d9fba; }
.v-mode-signature .v-spark.compact { min-height: 72px; }
.v-mode-count { text-align: center; border-left: 1px solid #2b4155; }
.v-mode-count strong { display: block; font-size: 25px; color: #47c2a6; }
.v-mode-count span { color: #9bb3c7; font-size: 9px; display: block; }
.v-mode-count small { font-size: 8px; color: #7a96b2; }
.v-mode-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-mode-chips>span { background: #20364b; border: 1px solid #2d4b61; padding: 2px 7px; color: #9fbbd1; border-radius: 4px; font-size: 9px; }
.v-mode-bottom { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 10px; }
.v-case-expand { border-top: 1px solid #284054; padding-top: 9px; }
.v-case-expand summary { font-size: 10px; color: #7fa7c4; cursor: pointer; }
.v-related-case { display: block; padding: 8px 5px; font-size: 10px; color: #a8c0d4; border-bottom: 1px solid #294055; }
.v-knowledge-loop { display: grid; grid-template-columns: repeat(5,1fr); gap: 15px; }
.v-knowledge-loop>div { position: relative; display: flex; flex-direction: column; align-items: center; border: 1px solid #2c465c; border-radius: 7px; background: #122b3e; padding: 16px 8px; }
.v-knowledge-loop>div:not(:last-child):after { content: '→'; position: absolute; right: -14px; top: 45%; color: #4884a8; font-size: 13px; }
.v-knowledge-loop svg { width: 24px; height: 24px; color: #62b5ac; margin-bottom: 9px; }
.v-knowledge-loop strong { font-size: 12px; color: #b1ccde; }
.v-knowledge-loop span { font-size: 9px; color: #789eb9; margin-top: 6px; text-align: center; }
.v-loop-note { text-align: center; color: #78b4a8; background: #113434; border: 1px dashed #275c53; border-radius: 5px; padding: 10px; font-size: 10px; margin-top: 15px; }
@media(min-width:1550px) {
  .v-three-grid { grid-template-columns: 235px minmax(0,1fr) 315px; }
  .v-three-grid.efficiency { grid-template-columns: 235px minmax(0,1fr) 300px; }
  .v-trends { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .v-cell { min-height: 37px; }
  .v-flow-node { min-height: 142px; }
}
@media(max-width:1250px) and (min-width:761px) {
  .v-overview-grid { grid-template-columns: 185px minmax(0,1fr); }
  .v-overview-grid>.stack:last-child { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr 1.5fr; }
  .v-three-grid,.v-three-grid.efficiency { grid-template-columns: 190px minmax(0,1fr); }
  .v-three-grid>.stack:last-child { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .v-distribution { flex-direction: column; }
  .v-distribution>div { width: 100%; }
  .v-flow-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .v-flow-row.test { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .v-family-grid { grid-template-columns: 1fr 1fr; }
  .v-flow-insight { grid-column: 1/-1; display: flex; align-items: center; gap: 20px; padding: 8px; border-left: none; border-top: 1px solid #253c51; }
  .v-mini-events { flex: 1; display: flex; gap: 15px; flex-wrap: wrap; }
  .v-mini-events a { gap: 6px; }
  .v-mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) and (min-width:761px) {
  .v-flow-row.test { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v-kpis { grid-template-columns: repeat(3,1fr); }
  .v-cells { grid-template-columns: repeat(6,1fr); }
  .v-params { grid-template-columns: repeat(2,1fr); }
  .v-three-grid>.stack:last-child { grid-template-columns: 1fr 1fr; }
  .v-source-layers>div { flex-wrap: wrap; }
  .v-entry-row { grid-template-columns: 1fr; }
}
@media(max-width:760px) {
  body,body.nav-collapsed { --sidebar-width: 0px; }
  .app-shell { display: block; }
  .sidebar,.nav-collapsed .sidebar { width: 240px; padding: 24px 14px 14px; }
  .nav-collapsed .brand-text,.nav-collapsed .workspace-label,.nav-collapsed .nav-label,.nav-collapsed .side-caption,.nav-collapsed .side-case,.nav-collapsed .demo-note,.nav-collapsed .side-label,.nav-collapsed .profile>div,.nav-collapsed .profile-badge { display: revert; }
  .nav-collapsed .workspace-label,.nav-collapsed .side-case { display: flex; }
  .nav-collapsed .app-brand,.nav-collapsed .nav-link,.nav-collapsed .side-link,.nav-collapsed .profile { justify-content: flex-start; }
  .nav-collapsed #navigation { margin-top: 0; }
  .nav-collapsed .nav-link { padding: 11px 13px; min-height: auto; }
  .nav-collapsed .nav-link.active { padding: 10px 12px; }
  .nav-collapsed .nav-count { position: static; font-size: 11px; padding: 0 6px; }
  .nav-collapsed .side-link { font-size: 12px; padding: 8px 12px; }
  .topbar { padding: 0 13px; }
  main { padding: 18px 13px; }
  h1 { font-size: 18px; }
  .page-head { gap: 11px; }
  .head-actions { gap: 6px; }
  .subtitle { font-size: 10px; }
  .panel-head { padding: 12px; }
  .panel-body { padding: 12px; }
  .v-flow-panel { padding: 13px; }
  .v-phase { font-size: 10px; gap: 8px; letter-spacing: 1px; }
  .v-phase small { display: none; }
  .v-flow-row,.v-flow-row.test { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .v-flow-node { min-height: 128px; padding: 12px 10px 10px; }
  .v-flow-node:after { display: none; }
  .v-node-top { gap: 7px; }
  .v-node-top svg { width: 26px; height: 26px; }
  .v-node-top strong { font-size: 11px; }
  .v-stage-status { font-size: 7px; right: 6px; }
  .v-family-section { padding: 12px; }
  .v-family-title { gap: 8px; }
  .v-family-title small { flex-basis: 100%; margin: 0; }
  .v-family-grid { grid-template-columns: 1fr; }
  .v-family-body { gap: 30px; }
  .v-flow-insight { border-left: 0; border-top: 1px solid #253c51; padding: 12px 0 0; }
  .v-entry-row { grid-template-columns: 1fr; gap: 10px; }
  .v-empty-stage { flex-wrap: wrap; min-height: 210px; gap: 13px; text-align: center; }
  .v-empty-stage p { font-size: 10px; }
  .v-kpis,.v-kpis.knowledge { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .v-kpi { padding: 11px 14px; }
  .v-kpi>strong { font-size: 25px; }
  .v-overview-grid,.v-three-grid,.v-three-grid.efficiency { grid-template-columns: 1fr; gap: 13px; }
  .v-overview-grid>.stack:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .v-distribution { flex-direction: column; gap: 6px; }
  .v-distribution .v-ring { width: 80px; height: 80px; }
  .v-distribution>div { width: 100%; }
  .v-risk-row { flex-wrap: wrap; gap: 3px; padding: 7px 0; }
  .v-risk-row small { display: none; }
  .v-risk-row>span { min-width: 20px; }
  .v-risk-row strong { font-size: 9px; min-width: 48px; }
  .v-cells { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .v-cell { min-height: 33px; }
  .v-event-strip a { flex-wrap: wrap; }
  .v-event-strip a>span:last-child { flex-basis: 100%; }
  .v-three-grid>.stack:first-child { display: grid; grid-template-columns: 1fr; }
  .v-three-grid:not(.efficiency)>.stack:first-child>.panel:first-child .panel-body { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
  .v-three-grid:not(.efficiency)>.stack:first-child>.panel:first-child .key-value { flex-direction: column; align-items: flex-start; margin-bottom: 6px; }
  .v-three-grid:not(.efficiency)>.stack:first-child>.panel:nth-child(2) .panel-body { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 7px; }
  .v-gauge { grid-row: span 2; width: 130px; }
  .v-gauge-label { margin: 0; }
  .v-gauge~.button { grid-column: 1/-1; }
  .v-params { gap: 7px; grid-template-columns: repeat(2,1fr); }
  .v-param>strong { font-size: 24px; }
  .v-param>div { font-size: 9px; }
  .v-trends { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .v-spark.compact { min-height: 80px; }
  .v-source-layers>div { flex-wrap: wrap; }
  .v-source-layers>div>span:not(.tag) { flex-basis: 100%; }
  .v-jobbar { gap: 9px 20px; padding: 12px; }
  .v-jobbar strong { font-size: 10px; }
  .v-job-source { margin-left: 0; }
  .v-device-select { margin-left: 0; }
  .v-machine-svg { max-height: 230px; }
  .v-eff-metrics strong { font-size: 22px; }
  .v-mode-grid { grid-template-columns: 1fr; gap: 12px; }
  .v-knowledge-loop { grid-template-columns: 1fr; gap: 11px; }
  .v-knowledge-loop>div { display: grid; grid-template-columns: 30px 1fr; text-align: left; padding: 12px 16px; gap: 3px 10px; }
  .v-knowledge-loop svg { grid-row: span 2; margin: 0; }
  .v-knowledge-loop span { text-align: left; margin: 0; }
  .v-knowledge-loop>div:not(:last-child):after { content: '↓'; top: auto; bottom: -12px; right: 50%; }
  .v-loop-note { font-size: 9px; line-height: 1.8; }
  .toast { left: 50%; }
}
.workspace-label>span.dot:last-child { margin-left: 0; }

/* Account controls and organization identity */
.profile-trigger { width: calc(100% - 8px); background: transparent; color: inherit; border: 0; border-top: 1px solid #233b4e; padding: 17px 0 4px; text-align: left; cursor: pointer; }
.profile-trigger:hover, .top-profile:hover { color: #56d5bf; }
.profile-chevron { margin-left: auto; font-size: 16px; color: #789ab9; }
.top-profile { display: flex; align-items: center; gap: 8px; padding: 5px; border: 0; background: transparent; color: #bfd2e3; font: inherit; cursor: pointer; }
.top-context { display: inline !important; color: #b9d2df; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.user-menu { position: fixed; z-index: 60; width: 212px; padding: 8px; border: 1px solid #315069; border-radius: 10px; background: #122438; box-shadow: 0 14px 40px #0007; }
.user-menu[hidden] { display: none; }
.user-menu>strong { display: block; padding: 9px 10px; color: #7f9cb4; font-size: 11px; }
.user-menu>button { display: flex; justify-content: space-between; width: 100%; padding: 12px 10px; border: 0; border-radius: 6px; background: transparent; color: #d9e6f0; text-align: left; cursor: pointer; }
.user-menu>button:hover, .user-menu>button:focus-visible { background: #1b3b4c; color: #52d7bb; }
.settings-check { display: flex; align-items: center; gap: 10px; padding: 20px 0; }
#settings-error { color: #ff8a80; }
.nav-collapsed .profile-chevron { display: none; }
@media (max-width:760px) { .nav-collapsed .profile-chevron { display: block; } .top-profile { font-size: 11px; gap: 5px; } .topbar { gap: 8px; } }