:root {
  --aims-bg: #edf2f5;
  --aims-paper: #ffffff;
  --aims-ink: #102832;
  --aims-muted: #5d737e;
  --aims-line: #c9d6dc;
  --aims-slate: #132a34;
  --aims-slate-2: #1d3b47;
  --aims-accent: #17647d;
  --aims-water: #009dc7;
  --aims-water-soft: #e3f5fa;
  --aims-energy: #e2a51f;
  --aims-energy-soft: #fff5d8;
  --aims-efficiency: #13865f;
  --aims-efficiency-soft: #e2f4ec;
  --aims-maintenance: #6559b8;
  --aims-alert: #bd3f45;
  --aims-warning: #d56f1f;
  --aims-shadow: 0 6px 18px rgba(20, 45, 56, .07);
}

body { background: var(--aims-bg); color: var(--aims-ink); }

.sidebar {
  width: 250px;
  padding: 22px 16px;
  background: var(--aims-slate);
  border-right: 1px solid #334a55;
  box-shadow: 8px 0 28px rgba(20, 35, 42, .12);
}

.brand { margin-bottom: 28px; }
.brand-mark {
  border-radius: 5px;
  border-color: #6e9bad;
  color: #b9dbea;
  background: #263a44;
}
.brand small { color: #91aab5; }
.sidebar nav { gap: 3px; }
.nav { border-radius: 4px; color: #b8c9d0; padding: 11px 13px; }
.nav:hover { background: #2a414b; }
.nav.active {
  background: #314d59;
  box-shadow: inset 3px 0 #64b7dc;
  color: #fff;
}
.source-state { border-color: #425963; color: #9eb3bc; }

#appMain {
  margin-left: 250px;
  padding: 0 28px 54px;
  max-width: 1920px;
}

#appMain > header {
  min-height: 86px;
  margin: 0 -28px 22px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--aims-line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

#appMain h1 { font-size: 27px; letter-spacing: -.025em; }
#appMain h2 { font-size: 19px; }
.eyebrow, .panel-title span { color: var(--aims-accent); }
.user-pill {
  padding: 8px 11px;
  border: 1px solid #cad7dc;
  border-radius: 4px;
  background: #f5f8f9;
  color: #3f5661;
  font-size: 12px;
  font-weight: 800;
}
.primary, .secondary, .link-button { border-radius: 4px; }
.primary { background: var(--aims-accent); }
.primary:hover { background: #315362; }
.secondary { color: var(--aims-accent); border-color: #aebfc7; }

.command-deck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: linear-gradient(105deg, #132a34 0%, #1d3b47 72%, #17647d 140%);
  color: white;
  border: 1px solid #344f5b;
  border-radius: 7px;
  box-shadow: 0 12px 30px rgba(29, 41, 47, .16);
}
.command-copy { display: flex; align-items: center; gap: 12px; }
.command-copy b, .command-copy small { display: block; }
.command-copy b { font-size: 16px; }
.command-copy small { margin-top: 2px; color: #b9cbd3; }
.live-beacon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #58d69a;
  box-shadow: 0 0 0 5px rgba(88, 214, 154, .13), 0 0 15px rgba(88, 214, 154, .5);
}
.command-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.command-controls label { font-size: 10px; color: #a9c0ca; text-transform: uppercase; letter-spacing: .08em; }
.command-controls select { display: block; min-width: 145px; margin-top: 3px; background: #f7fafb; }
.command-controls .secondary { background: transparent; color: white; border-color: #6e8c99; }

.operations-overview .kpi-grid {
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 10px;
}
.kpi-card, .panel, .diagnostic {
  border-color: var(--aims-line);
  border-radius: 7px;
  box-shadow: var(--aims-shadow);
}
.kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 17px 16px;
  border-top: 4px solid var(--aims-accent);
  inset: auto;
}
.kpi-card::after {
  content: none;
}
.kpi-card span { color: #657983; font-size: 11px; font-weight: 800; }
.kpi-card b { position: relative; z-index: 1; font-size: 27px; }
.kpi-card small { position: relative; z-index: 1; color: #72848d; }
.metric-status { border-color: var(--aims-efficiency); }
.metric-coverage { border-color: var(--aims-accent); }
.metric-energy { border-color: var(--aims-energy); background: linear-gradient(180deg, #fff, var(--aims-energy-soft)); }
.metric-water { border-color: var(--aims-water); background: linear-gradient(180deg, #fff, var(--aims-water-soft)); }
.metric-efficiency { border-color: var(--aims-efficiency); background: linear-gradient(180deg, #fff, var(--aims-efficiency-soft)); }
.metric-alerts { border-color: var(--aims-alert); }

.overview-context {
  display: grid;
  grid-template-columns: minmax(210px, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 2px 13px;
  color: var(--aims-muted);
}
.overview-context div span, .overview-context div b { display: block; }
.overview-context div span { color: var(--aims-accent); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.overview-context div b { margin-top: 2px; color: var(--aims-ink); font-size: 17px; }
.overview-context p { margin: 0; padding-left: 18px; border-left: 1px solid var(--aims-line); font-size: 13px; }

.overview-primary { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, .7fr); gap: 14px; }
.panel { padding: 18px; }
.panel-title h2 { margin-bottom: 3px; }
.panel-title p { margin: 0; color: var(--aims-muted); font-size: 13px; }
.trend-panel { min-height: 370px; }
.chart {
  height: 270px;
  background-image: linear-gradient(to top, rgba(63,102,119,.10) 1px, transparent 1px);
  background-size: 100% 25%;
  border-bottom-color: #aebec5;
}
.chart .bar { background: var(--aims-energy); border-radius: 2px 2px 0 0; }
.chart .bar.alt { background: #8b773e; }
.chart[data-metric="volume_m3"] .bar { background: var(--aims-water); }
.chart[data-metric="volume_m3"] .bar.alt { background: #7fbad9; }
.chart[data-metric="specific_energy_kwh_m3"] .bar,
.chart[data-metric="efficiency_pct"] .bar { background: var(--aims-efficiency); }
.chart[data-metric="specific_energy_kwh_m3"] .bar.alt,
.chart[data-metric="efficiency_pct"] .bar.alt { background: #86b9a2; }
.chart-empty { align-self: stretch; flex: 1; display: grid; place-content: center; text-align: center; color: var(--aims-muted); }
.chart-empty b, .chart-empty span { display: block; }
.chart-empty b { color: var(--aims-ink); font-size: 17px; }
.chart-empty span { margin-top: 5px; font-size: 13px; }
.legend i { background: var(--aims-energy); border-radius: 1px; }
.legend i.alt { background: #8b773e; }

.priority-list { border-top: 1px solid var(--aims-line); }
.priority-item {
  grid-template-columns: 5px 1fr auto;
  padding: 13px 0;
}
.priority-item > div > span { color: var(--aims-warning); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.priority-item button { border: 0; background: transparent; color: var(--aims-accent); font-size: 20px; cursor: pointer; }
.priority-empty { padding: 28px 6px 10px; color: var(--aims-muted); }
.priority-empty b { color: var(--aims-ink); font-size: 17px; }
.priority-empty p { margin: 6px 0 16px; font-size: 13px; }
.priority-item.severity-high .priority-dot { background: var(--aims-alert); }
.priority-item.severity-medium .priority-dot { background: var(--aims-warning); }
.priority-item.severity-data .priority-dot { background: var(--aims-maintenance); }

.fleet-performance-panel { margin-top: 0; }
.performance-table td:first-child { min-width: 210px; }
.plant-cell b, .plant-cell small { display: block; }
.plant-cell small { margin-top: 2px; color: var(--aims-muted); }
.metric-value { font-weight: 800; color: var(--aims-ink); }
.metric-value small { color: var(--aims-muted); font-weight: 500; }
.coverage-meter { min-width: 112px; }
.coverage-meter b { display: block; margin-bottom: 5px; font-size: 13px; }
.coverage-track { display: block; height: 5px; overflow: hidden; background: #dfe7eb; }
.coverage-track i { display: block; height: 100%; background: var(--aims-efficiency); }
.coverage-meter.low .coverage-track i { background: var(--aims-warning); }
.coverage-meter.missing .coverage-track i { background: #8a9aa2; }
.workspace-actions { display: flex; gap: 5px; }
.workspace-actions button, .workspace-actions a {
  border: 1px solid #b9cbd3;
  border-radius: 3px;
  background: #fff;
  color: var(--aims-accent);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.workspace-actions button:hover, .workspace-actions a:hover { border-color: var(--aims-accent); background: #edf6f8; }

.onboarding-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.onboarding-steps article {
  min-height: 116px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--aims-line);
  border-top: 3px solid var(--aims-accent);
  border-radius: 5px;
}
.onboarding-steps b, .onboarding-steps span, .onboarding-steps small { display: block; }
.onboarding-steps b { color: #8ba0a9; font-size: 18px; }
.onboarding-steps span { margin: 4px 0; font-weight: 900; }
.onboarding-steps small { color: var(--aims-muted); line-height: 1.35; }
.readiness-table td:first-child { min-width: 210px; }
.readiness-table td { vertical-align: middle; }
.readiness-cell b, .readiness-cell small { display: block; }
.readiness-cell small { margin-top: 3px; color: var(--aims-muted); }
.next-step-button { min-width: 160px; text-align: left; }
.next-step-button b, .next-step-button small { display: block; }
.next-step-button small { margin-top: 2px; font-weight: 500; }

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.workspace-card {
  min-height: 210px;
  padding: 19px;
  background: var(--aims-paper);
  border: 1px solid var(--aims-line);
  border-top: 4px solid var(--aims-accent);
  border-radius: 7px;
  box-shadow: var(--aims-shadow);
}
.workspace-card > span { color: var(--aims-accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.workspace-card h2 { margin-top: 8px; }
.workspace-card p { min-height: 76px; color: var(--aims-muted); font-size: 13px; }
.workspace-card.performance-workspace { border-top-color: var(--aims-energy); }
.workspace-card.twin-workspace { border-top-color: var(--aims-water); }
.workspace-card.diagnostic-workspace { border-top-color: var(--aims-maintenance); }
.workspace-card.porto-workspace { border-top-color: var(--aims-water); color: #e8f3f7; background: var(--aims-slate); }
.workspace-card.porto-workspace > span { color: #66c5e5; }
.workspace-card.porto-workspace h2 { color: #fff; }
.workspace-card.porto-workspace p { color: #b7cbd3; }
.workspace-card.porto-workspace .primary { display: inline-block; background: var(--aims-water); color: #102832; }
.workspace-card.candidate-workspace { border-top-color: var(--aims-efficiency); background: linear-gradient(180deg, #f7fcfa, var(--aims-paper)); }
.workspace-card.candidate-workspace > span { color: var(--aims-efficiency); }
.workspace-card.candidate-workspace .primary { background: var(--aims-efficiency); }

.plant-workspaces-panel { border-top: 4px solid var(--aims-water); }
.plant-workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.plant-workspace-card {
  min-width: 0;
  padding: 16px;
  background: #f8fafb;
  border: 1px solid var(--aims-line);
  border-left: 4px solid #9eafb6;
  border-radius: 6px;
}
.plant-workspace-card.is-operational { border-left-color: var(--aims-efficiency); }
.plant-workspace-card.is-offline { border-left-color: var(--aims-warning); }
.plant-workspace-card.has-complete-workspace { background: linear-gradient(135deg, #f3fbf8, #f8fafb 58%); box-shadow: inset 0 0 0 1px rgba(0, 139, 104, .12); }
.plant-workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plant-workspace-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.badge.workspace-ready { color: #08694f; background: #d7f2e8; }
.plant-workspace-heading > span:first-child { overflow: hidden; color: var(--aims-muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.plant-workspace-card h3 { margin: 8px 0 12px; font-size: 18px; }
.plant-workspace-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--aims-line); background: white; }
.plant-workspace-card dl div { padding: 9px; border-right: 1px solid var(--aims-line); }
.plant-workspace-card dl div:last-child { border-right: 0; }
.plant-workspace-card dt { color: var(--aims-muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.plant-workspace-card dd { margin: 3px 0 0; font-size: 17px; font-weight: 900; }
.plant-workspace-card > p { margin: 11px 0; color: var(--aims-muted); font-size: 11px; }
.plant-workspace-card > p b { color: var(--aims-ink); }
.plant-workspace-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.plant-workspace-actions button { min-height: 34px; }
.workspace-pending { align-self: center; color: var(--aims-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.overview-lower { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(350px, .7fr); gap: 16px; }
.porto-spotlight {
  position: relative;
  overflow: hidden;
  color: white;
  background: linear-gradient(145deg, #1d292f, #263f4b);
  border-color: #385766;
}
.spotlight-head span, .spotlight-head b, .spotlight-head small { display: block; }
.spotlight-head span { color: #6cc1e6; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.spotlight-head b { margin-top: 5px; font-size: 23px; }
.spotlight-head small { color: #a9c0ca; }
.hydraulic-mini { width: 100%; height: 142px; margin: 4px 0; }
.hydraulic-mini .water-line { fill: none; stroke: var(--aims-water); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 2 8; }
.hydraulic-mini .pump-body { fill: #263c46; stroke: #61b6dc; stroke-width: 4; }
.hydraulic-mini .impeller { fill: #5ec0e9; }
.hydraulic-mini .shaft { stroke: #b8ced7; stroke-width: 6; }
.hydraulic-mini .motor-body { fill: #314b56; stroke: #6a8996; stroke-width: 3; }
.hydraulic-mini .motor-lines { stroke: #7394a2; stroke-width: 3; }
.hydraulic-mini text { fill: #93acb6; font: 700 11px Segoe UI, sans-serif; letter-spacing: .08em; }
.spotlight-features { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.spotlight-features span { padding: 5px 7px; border: 1px solid #486570; border-radius: 3px; color: #c2d4db; font-size: 10px; }
.spotlight-link { display: inline-flex; background: var(--aims-water); color: #102630; }

table { white-space: nowrap; }
th { background: #eef3f5; color: #536873; border-bottom-color: #bac9cf; }
td { border-bottom-color: #e0e7ea; }
tbody tr:hover { background: #f0f6f8; }
.badge { border-radius: 3px; }
.badge.ok { background: #dcefe6; color: #1f7355; }
.badge.warn { background: #f8ead7; color: #9a5c18; }
.badge.off { background: #e8edef; color: #5f7078; }
.badge.danger { background: #f5dedd; color: #983e3b; }

.twin-technical-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #e9f2f6;
  background: linear-gradient(110deg, #1d292f, #2f5060);
  border-color: #416575;
  border-left: 5px solid var(--aims-water);
}
.twin-technical-entry h2 { color: white; font-size: 22px; }
.twin-technical-entry p { margin: 0; max-width: 850px; color: #b9cbd3; }
.technical-entry-actions { display: grid; gap: 10px; min-width: 225px; text-align: right; }
.technical-entry-actions span { color: #82b8cf; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.technical-entry-actions .primary { background: var(--aims-water); color: #102630; }

.plant-twin-overview { border-top: 4px solid var(--aims-efficiency); }
.plant-twin-layout {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 2fr);
  gap: 16px;
  align-items: stretch;
}
.plant-root-card {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid #b8d8cc;
  border-left: 5px solid var(--aims-efficiency);
  border-radius: 6px;
  color: var(--aims-ink);
  background: linear-gradient(145deg, #f7fcfa, #e5f4ee);
  text-align: left;
}
button.plant-root-card { cursor: pointer; }
button.plant-root-card:hover, button.plant-root-card:focus-visible { border-color: var(--aims-efficiency); transform: translateY(-1px); }
.plant-root-card span { color: var(--aims-efficiency); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.plant-root-card b { font-size: 22px; }
.plant-root-card small { color: var(--aims-muted); line-height: 1.35; }
.plant-root-card.missing { border-color: #dfbf8d; border-left-color: var(--aims-warning); background: #fff8ed; }
.plant-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px; }
.plant-live-metric {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 132px;
  padding: 13px 15px;
  border: 1px solid #405d69;
  border-left: 5px solid #82959d;
  border-radius: 6px;
  color: white;
  background: linear-gradient(145deg, #1d2c33, #294653);
  text-align: left;
}
button.plant-live-metric { cursor: pointer; }
button.plant-live-metric:hover, button.plant-live-metric:focus-visible { border-color: #80d9ec; transform: translateY(-1px); }
.plant-live-metric.metric-water { border-left-color: var(--aims-water); background: linear-gradient(145deg, #172d38, #164c63); }
.plant-live-metric.metric-energy { border-left-color: var(--aims-energy); background: linear-gradient(145deg, #302b23, #5d4b28); }
.plant-live-metric.metric-condition { border-left-color: var(--aims-warning); }
.plant-live-name { padding-right: 18px; color: #b9d9e5; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.plant-live-metric > small { margin-top: auto; color: #a8c0ca; font-size: 9px; }
.plant-live-metric::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border: 2px solid white;
  border-radius: 50%;
  content: "";
}
.plant-live-metric.status-live::after { background: #28c979; box-shadow: 0 0 0 4px rgba(40, 201, 121, .2); }
.plant-live-metric.status-warning::after { background: #eda72d; box-shadow: 0 0 0 4px rgba(237, 167, 45, .22); }
.plant-live-metric.status-alarm::after { background: #e84747; box-shadow: 0 0 0 4px rgba(232, 71, 71, .23); }
.plant-live-metric.status-waiting::after { background: #22bfe5; box-shadow: 0 0 0 4px rgba(34, 191, 229, .22); }
.plant-live-metric.status-unconfigured::after { background: #89969c; box-shadow: 0 0 0 4px rgba(137, 150, 156, .2); }
.plant-live-empty { grid-column: 1 / -1; margin: 0; padding: 20px; border: 1px dashed var(--aims-line); border-radius: 6px; color: var(--aims-muted); background: #f7fafb; }

.twin-machine.composition-ready { border-top: 4px solid var(--aims-efficiency); }
.twin-machine.selected {
  border-color: var(--aims-water);
  box-shadow: 0 0 0 2px rgba(0, 157, 199, .16), var(--aims-shadow);
  background: #f1f9fb;
}
.operational-twin-panel {
  position: relative;
  z-index: 0;
  padding: 0;
  overflow: hidden;
  border-top: 4px solid var(--aims-water);
}
.operational-empty { padding: 26px; }
.operational-empty p { margin-bottom: 0; color: var(--aims-muted); }
.operational-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--aims-line);
  background: linear-gradient(100deg, #fff, #edf8fb);
}
.operational-head h2 { margin: 3px 0; font-size: 23px !important; }
.operational-head p { margin: 0; color: var(--aims-muted); }
.operational-health { display: grid; justify-items: end; gap: 7px; text-align: right; }
.operational-health small { color: var(--aims-muted); }
.operational-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.5fr) minmax(310px, .7fr);
  min-height: 330px;
  border-bottom: 1px solid var(--aims-line);
}
.machine-synoptic {
  position: relative;
  min-width: 0;
  padding: 14px 22px 8px;
  background:
    linear-gradient(rgba(35, 87, 108, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 87, 108, .065) 1px, transparent 1px),
    linear-gradient(135deg, #102a35, #1f4655);
  background-size: 44px 44px, 44px 44px, auto;
}
.machine-synoptic svg { width: 100%; height: 270px; display: block; }
.machine-synoptic text { fill: #b9d0d9; font: 800 13px Segoe UI, sans-serif; letter-spacing: .04em; }
.machine-reality {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  background: #081015;
}
.machine-reality::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(4, 12, 17, .86) 100%);
}
.machine-reality > img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.reality-hotspot {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1px;
  min-width: 150px;
  padding: 7px 9px;
  border: 1px solid rgba(142, 224, 244, .88);
  border-radius: 4px;
  color: white;
  background: rgba(9, 35, 45, .84);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .34), 0 0 0 3px rgba(42, 182, 214, .14);
  text-align: left;
  backdrop-filter: blur(3px);
}
.reality-hotspot:hover, .reality-hotspot:focus-within, .reality-hotspot.expanded {
  z-index: 8;
  border-color: white;
  background: rgba(0, 125, 162, .94);
  transform: translateY(-1px);
}
.reality-hotspot.expanded { z-index: 12; min-width: 235px; }
.hotspot-asset-open {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.hotspot-asset-open:hover b, .hotspot-asset-open:focus-visible b { text-decoration: underline; }
.hotspot-asset-open.static { cursor: default; }
.reality-hotspot::after {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: #22bfe5;
  box-shadow: 0 0 0 4px rgba(34, 191, 229, .25);
  content: "";
}
.reality-hotspot small { color: #96dff1; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.reality-hotspot b { font-size: 12px; }
.reality-hotspot.missing { border-style: dashed; opacity: .76; }
.reality-hotspot.status-live::after { background: #28c979; box-shadow: 0 0 0 4px rgba(40, 201, 121, .24); }
.reality-hotspot.status-warning::after { background: #eda72d; box-shadow: 0 0 0 4px rgba(237, 167, 45, .25); }
.reality-hotspot.status-alarm::after { background: #e84747; box-shadow: 0 0 0 4px rgba(232, 71, 71, .27); }
.reality-hotspot.status-waiting::after { background: #22bfe5; box-shadow: 0 0 0 4px rgba(34, 191, 229, .25); }
.reality-hotspot.status-unconfigured::after { background: #89969c; box-shadow: 0 0 0 4px rgba(137, 150, 156, .24); }
.hotspot-live-inline {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(151, 202, 216, .28);
}
.hotspot-live-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hotspot-live-row em { display: grid; color: #a7cfda; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.hotspot-live-row em i { color: #86a7b1; font-size: 8px; font-style: normal; font-weight: 500; text-transform: none; }
.hotspot-live-row strong { color: white; font-size: 15px; white-space: nowrap; }
.hotspot-live-row strong small { margin-left: 3px; color: #a7cfda; font-size: 9px; }
.hotspot-live-time { color: #a9c3cd; font-size: 9px; white-space: nowrap; }
.hotspot-live-time b { font-size: 9px; }
.status-live .hotspot-live-time b { color: #61d69b; }
.status-warning .hotspot-live-time b { color: #ffc455; }
.status-alarm .hotspot-live-time b { color: #ff7474; }
.status-waiting .hotspot-live-time b { color: #6fd5ee; }
.status-unconfigured .hotspot-live-time b { color: #aab5ba; }
.hotspot-live-more {
  width: 100%;
  padding: 3px 0;
  border: 0;
  border-top: 1px solid rgba(151, 202, 216, .18);
  color: #9fe8fa;
  background: transparent;
  font-size: 9px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.hotspot-live-more:hover, .hotspot-live-more:focus-visible { color: white; text-decoration: underline; }
.hotspot-live-overflow {
  display: grid;
  gap: 5px;
  max-height: 170px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-color: rgba(159, 232, 250, .75) rgba(4, 24, 32, .45);
}
.hotspot-live-overflow[hidden] { display: none; }
.hotspot-live-row.expanded { padding-top: 3px; border-top: 1px solid rgba(151, 202, 216, .12); }
.hotspot-live-inline.empty em { color: #c5d3d8; font-size: 9px; font-style: normal; }
.hotspot-live-inline.empty i { color: #8fa5ad; font-size: 9px; font-style: normal; }
.hotspot-liso { left: 3%; top: 4%; }
.hotspot-liso::after { left: 50%; bottom: -17px; }
.hotspot-motor { left: 27%; top: 21%; }
.hotspot-motor::after { left: 50%; bottom: -17px; }
.hotspot-pump { left: 34%; top: 59%; }
.hotspot-pump::after { left: 50%; top: -17px; }
.hotspot-actuator { right: 8%; top: 34%; }
.hotspot-actuator::after { left: 50%; bottom: -17px; }
.reality-cixerri .hotspot-motor { left: 40%; top: 10%; }
.reality-cixerri .hotspot-pump { left: 41%; top: 55%; }
.reality-cixerri .hotspot-actuator-suction { left: 2%; right: auto; top: 31%; }
.reality-cixerri .hotspot-actuator-discharge { right: 2%; top: 31%; }
.reality-cixerri .hotspot-actuator-suction::after,
.reality-cixerri .hotspot-actuator-discharge::after { left: 50%; bottom: -17px; }
.reality-sarroch .hotspot-liso { left: 2%; top: 4%; }
.reality-sarroch .hotspot-motor { left: 9%; top: 27%; }
.reality-sarroch .hotspot-pump { left: 49%; top: 48%; }
.reality-sarroch .hotspot-actuator { right: 3%; top: 24%; }
.reality-sarroch .hotspot-motor::after,
.reality-sarroch .hotspot-actuator::after { left: 50%; bottom: -17px; }
.reality-sarroch .hotspot-pump::after { left: 50%; top: -17px; }
.machine-reality figcaption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: white;
  font-size: 11px;
}
.machine-reality figcaption span { color: #a9c3cd; text-align: right; }
.op-pipe { fill: none; stroke: url(#opPipe); stroke-width: 20; stroke-linecap: round; }
.op-motor { fill: #385564; stroke: #86a9b8; stroke-width: 4; }
.op-motor-lines { stroke: #7195a5; stroke-width: 4; }
.op-shaft { stroke: #c5d9e0; stroke-width: 12; stroke-linecap: round; }
.op-pump { fill: #294957; stroke: #40c1e7; stroke-width: 6; }
.op-impeller { fill: #5ed4ed; }
.op-valve path { fill: #264b59; stroke: #62c9e4; stroke-width: 4; }
.op-valve rect { fill: #6a58b7; stroke: #b9afea; stroke-width: 3; }
.op-valve > path:last-child { fill: none; stroke: #b9afea; }
.op-valve.missing { opacity: .48; stroke-dasharray: 7 6; }
.synoptic-boundary {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #a8c0ca;
  font-size: 10px;
  letter-spacing: .1em;
}
.synoptic-boundary b { color: white; font-size: 13px; letter-spacing: .04em; }
.composition-register { padding: 18px; background: #f7fafb; border-left: 1px solid var(--aims-line); }
.composition-register h3 { margin: 0 0 10px; }
.composition-register ul { list-style: none; margin: 0; padding: 0; }
.composition-register li {
  display: grid;
  grid-template-columns: minmax(105px, .7fr) minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid #dce6ea;
}
.composition-register li > span { color: var(--aims-muted); font-size: 10px; font-weight: 900; }
.composition-register li > b { min-width: 0; }
.composition-register li small { grid-column: 1 / -1; color: var(--aims-alert); line-height: 1.35; }
.composition-register li.has-conflict { padding-left: 8px; border-left: 3px solid var(--aims-warning); }
.component-edit {
  padding: 5px 7px;
  border: 1px solid #aebfc7;
  border-radius: 4px;
  color: var(--aims-accent);
  background: white;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.component-edit:hover { border-color: var(--aims-accent); background: var(--aims-water-soft); }
.component-source {
  margin: 12px 0;
  padding: 9px 11px;
  color: #31505d;
  background: #edf6f8;
  border-left: 3px solid var(--aims-water);
  font-size: 11px;
  font-weight: 800;
}
.component-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.component-profile-form label { color: var(--aims-muted); font-size: 10px; font-weight: 800; }
.component-profile-form input,
.component-profile-form select,
.component-profile-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--aims-line);
  border-radius: 4px;
  background: white;
  color: var(--aims-ink);
  font: inherit;
  box-sizing: border-box;
}
.component-profile-form textarea { resize: vertical; }
.component-profile-form label small { display: block; margin-top: 4px; color: #7b8c94; font-weight: 500; }
.component-field-wide { grid-column: 1 / -1; }
.local-profile { margin-top: 12px; }
.source-conflict {
  display: flex;
  gap: 12px;
  padding: 11px 20px;
  color: #7b4e17;
  background: #fff3df;
  border-bottom: 1px solid #efcf9e;
  font-size: 12px;
}
.source-conflict b { white-space: nowrap; }
.operational-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  padding: 16px 18px;
  background: #eef3f5;
}
.live-metric {
  min-width: 0;
  padding: 13px;
  background: white;
  border: 1px solid var(--aims-line);
  border-left: 4px solid #82949d;
}
.live-metric > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; }
.live-metric span { color: var(--aims-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.live-metric b { font-size: 21px; }
.live-metric b small { margin-left: 4px; color: var(--aims-muted); font-size: 11px; }
.live-metric em { grid-column: 1 / -1; color: var(--aims-muted); font-size: 10px; font-style: normal; }
.live-metric p { overflow: hidden; margin: 2px 0 0; color: #81919a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric-energy { border-left-color: var(--aims-energy); }
.metric-water { border-left-color: #1976c9; }
.metric-pressure { border-left-color: #08a8c1; }
.metric-speed { border-left-color: #705cc6; }
.metric-efficiency { border-left-color: var(--aims-efficiency); }
.metric-condition { border-left-color: var(--aims-warning); }
.sparkline { width: 100%; height: 48px; margin-top: 7px; overflow: visible; }
.sparkline path { fill: none; stroke: #778b94; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sparkline.energy path { stroke: var(--aims-energy); }
.sparkline.water path { stroke: #1976c9; }
.sparkline.pressure path { stroke: #08a8c1; }
.sparkline.speed path { stroke: #705cc6; }
.sparkline.efficiency path { stroke: var(--aims-efficiency); }
.sparkline.condition path { stroke: var(--aims-warning); }
.sparkline-empty { display: grid; height: 48px; place-items: center; color: #98a6ad; font-size: 10px; }
.operational-note { padding: 16px; background: #fff; border-left: 4px solid var(--aims-warning); }
.operational-note b, .operational-note span { display: block; }
.operational-note span { margin-top: 3px; color: var(--aims-muted); font-size: 12px; }
.shared-context { padding: 18px; border-top: 1px solid var(--aims-line); }
.shared-context h3 { margin: 2px 0 12px; }
.shared-context-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 9px; }
.shared-metric { padding: 12px; border: 1px solid var(--aims-line); border-top: 3px solid #778b94; background: #f9fbfc; }
.shared-metric span, .shared-metric b, .shared-metric em { display: block; }
.shared-metric span { color: var(--aims-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.shared-metric b { margin-top: 3px; font-size: 19px; }
.shared-metric b small { color: var(--aims-muted); font-size: 11px; }
.shared-metric em { color: var(--aims-muted); font-size: 10px; font-style: normal; }
.shared-metric.metric-energy { border-top-color: var(--aims-energy); }
.shared-metric.metric-water { border-top-color: #1976c9; }
.shared-metric.metric-pressure { border-top-color: #08a8c1; }
.shared-metric.metric-efficiency { border-top-color: var(--aims-efficiency); }
.operational-twin-panel > .source-note { margin: 0; padding: 10px 18px 14px; background: #f7fafb; }

.asset-documents { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--aims-line); }
.asset-document-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.asset-document-heading h3 { margin-bottom: 2px; }
.asset-document-heading p { margin: 0; color: var(--aims-muted); font-size: 11px; }
.document-separation {
  padding: 5px 7px;
  border-radius: 3px;
  color: #31505d;
  background: #e2eef2;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.asset-document-list { list-style: none; margin: 12px 0; padding: 0; }
.asset-document-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 11px;
  border: 1px solid var(--aims-line);
  border-left: 4px solid var(--aims-water);
  border-radius: 5px;
  background: #f8fbfc;
}
.asset-document-item.origin-maximo { border-left-color: var(--aims-warning); background: #fffaf1; }
.asset-document-item > div { min-width: 0; }
.asset-document-item b, .asset-document-item small, .asset-document-item em { display: block; }
.asset-document-item b { overflow-wrap: anywhere; }
.asset-document-item small, .asset-document-item em { margin-top: 3px; color: var(--aims-muted); font-size: 9px; font-style: normal; }
.asset-document-item p { margin: 5px 0 0; color: var(--aims-muted); font-size: 11px; }
.document-origin { display: inline-block; margin-bottom: 5px; color: var(--aims-water); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.origin-maximo .document-origin { color: #9a6513; }
.document-download { text-decoration: none; white-space: nowrap; }
.document-unavailable { max-width: 130px; color: var(--aims-muted); font-size: 9px; text-align: right; }
.asset-document-empty { padding: 14px; border: 1px dashed var(--aims-line); color: var(--aims-muted); background: #f8fbfc; }
.asset-document-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(120px, .6fr);
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #b9d9e4;
  border-radius: 5px;
  background: #eef8fb;
}
.asset-document-form label { color: var(--aims-muted); font-size: 10px; font-weight: 800; }
.asset-document-form input, .asset-document-form select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--aims-line);
  border-radius: 4px;
  color: var(--aims-ink);
  background: white;
  font: inherit;
}
.asset-document-form label small { display: block; margin-top: 4px; font-weight: 500; }
.asset-document-form .document-description { grid-column: 1 / -1; }
.asset-document-form button { justify-self: start; }
.document-policy { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid var(--aims-warning); color: var(--aims-muted); background: #fff8ed; font-size: 10px; line-height: 1.45; }

.toolbar { background: #dfe7ea; border: 1px solid #cad6db; border-radius: 5px; }
.diagnostic { border-top-color: var(--aims-efficiency); }
.diagnostic.motor { border-color: var(--aims-maintenance); }
.diagnostic.hydraulic { border-color: var(--aims-water); }
.diagnostic.data { border-color: var(--aims-warning); }
.read-only { border-radius: 3px; background: #e2eef2; color: #345e70; }
.message.user { background: #dceef7; }
.roadmap article { border-radius: 7px; }
.roadmap .current { background: var(--aims-slate-2); }

@media (max-width: 1350px) {
  .operations-overview .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .overview-lower { grid-template-columns: 1fr; }
  .workspace-grid { grid-template-columns: 1fr 1fr; }
  .plant-workspace-grid { grid-template-columns: 1fr 1fr; }
  .onboarding-steps { grid-template-columns: repeat(3, 1fr); }
  .operational-layout { grid-template-columns: 1fr; }
  .composition-register { border-left: 0; border-top: 1px solid var(--aims-line); }
  .operational-metrics, .shared-context-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .command-deck, .twin-technical-entry { align-items: stretch; flex-direction: column; }
  .plant-twin-layout { grid-template-columns: 1fr; }
  .technical-entry-actions { text-align: left; }
  .grid.two, .overview-primary { grid-template-columns: 1fr; }
  .operational-head { flex-direction: column; }
  .operational-health { justify-items: start; text-align: left; }
}
@media (max-width: 760px) {
  .sidebar { width: auto; }
  #appMain { margin: 0; padding: 0 14px 36px; }
  #appMain > header { margin: 0 -14px 18px; padding: 14px; }
  .operations-overview .kpi-grid { grid-template-columns: 1fr 1fr; }
  .overview-context { grid-template-columns: 1fr; }
  .overview-context p { padding-left: 0; border-left: 0; }
  .workspace-grid { grid-template-columns: 1fr; }
  .plant-workspace-grid { grid-template-columns: 1fr; }
  .onboarding-intro { align-items: stretch; flex-direction: column; }
  .onboarding-steps { grid-template-columns: 1fr 1fr; }
  .operational-layout { display: block; min-height: 0; }
  .machine-reality {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    min-height: 0;
    padding: 10px;
    overflow: visible;
  }
  .machine-reality::after { display: none; }
  .machine-reality > img {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 310px;
    border-radius: 4px;
    object-fit: cover;
    object-position: 48% center;
  }
  .reality-hotspot,
  .reality-hotspot:hover,
  .reality-hotspot:focus-within,
  .reality-hotspot.expanded,
  .reality-cixerri .reality-hotspot,
  .reality-sarroch .reality-hotspot {
    position: relative;
    inset: auto;
    right: auto;
    left: auto;
    top: auto;
    min-width: 0;
    width: auto;
    padding: 8px;
    transform: none;
  }
  .reality-hotspot::after,
  .hotspot-liso::after,
  .hotspot-motor::after,
  .hotspot-pump::after,
  .hotspot-actuator::after { top: 9px; right: 9px; bottom: auto; left: auto; }
  .machine-reality figcaption {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    padding: 3px 2px 5px;
  }
  .machine-reality figcaption span { text-align: left; }
  .composition-register { padding: 14px; }
  .composition-register li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .composition-register li > span:first-child { grid-column: 1 / -1; }
  .composition-register li > b { grid-column: 1; overflow-wrap: anywhere; }
  .composition-register .component-edit { grid-column: 1 / -1; justify-self: start; }
  .asset-document-item { grid-template-columns: 1fr; }
  .document-download { justify-self: start; }
  .document-unavailable { max-width: none; text-align: left; }
  .asset-document-form { grid-template-columns: 1fr; }
  .asset-document-form .document-description { grid-column: auto; }
  .machine-synoptic { padding: 8px; }
  .machine-synoptic svg { height: 220px; }
  .operational-metrics, .shared-context-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .operations-overview .kpi-grid { grid-template-columns: 1fr; }
  .machine-reality { grid-template-columns: 1fr; }
  .machine-reality > img, .machine-reality figcaption { grid-column: 1; }
  .asset-document-heading { align-items: stretch; flex-direction: column; }
  .document-separation { align-self: flex-start; }
}
.chat-title-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}