/* Grafo OT factory module. The industrial site is a clearly labelled simulation. */
.ot-panel,
.ot-hud,
.ot-notice,
.ot-zone-nav,
.ot-view-modes,
.ot-device-popover {
  display: none;
}

body.ot-mode .ot-panel,
body.ot-mode .ot-hud,
body.ot-mode .ot-notice,
body.ot-mode .ot-zone-nav,
body.ot-mode .ot-view-modes {
  display: flex;
}

body.ot-mode :is(
  .route-panel,
  .layer-panel,
  .route-launcher,
  .left-rail,
  .right-rail,
  .floor-picker,
  .block-tabs,
  .view-modes,
  .telemetry-card,
  .device-card,
  .buhara-panel,
  .buhara-panel-open,
  .buhara-stack,
  .active-floor-hud,
  .scheme-notice,
  .legend,
  .map-scale,
  .map-trust,
  .facility-kpis,
  .device-cluster-layer
) {
  display: none !important;
}

body.ot-mode .map-title {
  display: none;
}

body.ot-mode #ankaraPopulationTicker {
  display: none !important;
}

body.ot-mode .brand b {
  letter-spacing: .2em;
}

body.ot-mode .brand small {
  font-size: 6px;
  letter-spacing: .12em;
}

body.ot-mode .map-controls {
  display: flex;
}

body.ot-mode .map-control-dock {
  z-index: 18;
}

body.ot-mode .map-stage {
  background:
    radial-gradient(circle at 52% 45%, rgba(19, 82, 89, .25), transparent 33%),
    radial-gradient(circle at 78% 24%, rgba(130, 84, 22, .08), transparent 26%),
    linear-gradient(145deg, #081019, #050910 72%);
}

body.ot-mode .map-stage::after {
  background-size: 54px 54px;
  opacity: .58;
}

body.ot-mode #mapCanvas {
  filter: saturate(1.08) contrast(1.06) brightness(1.03);
}

body.ot-mode .map-wash {
  background:
    linear-gradient(90deg, rgba(3, 7, 13, .38), transparent 23%, transparent 68%, rgba(3, 7, 13, .48)),
    radial-gradient(circle at 53% 48%, transparent 38%, rgba(2, 5, 10, .54) 100%);
}

.ot-notice {
  position: absolute;
  z-index: 18;
  top: 82px;
  left: 50%;
  align-items: center;
  gap: 7px;
  max-width: min(520px, calc(100vw - 40px));
  min-height: 27px;
  padding: 5px 12px;
  border: 1px solid rgba(247, 171, 52, .34);
  border-radius: 999px;
  background: rgba(32, 20, 8, .86);
  color: #f3bd68;
  font: 700 7px Manrope, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  transition: opacity .2s ease, transform .2s ease;
}

.ot-notice i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f1a83a;
  box-shadow: 0 0 10px #f1a83a;
}

.ot-hud {
  position: absolute;
  z-index: 14;
  top: 150px;
  left: 72px;
  width: 274px;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px;
  border: 1px solid rgba(61, 219, 226, .19);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(7, 14, 23, .93), rgba(7, 20, 27, .78));
  box-shadow: inset 2px 0 #22d3d8, 0 18px 48px rgba(0, 0, 0, .34);
  backdrop-filter: blur(16px);
  transition: opacity .2s ease, transform .2s ease;
}

.ot-hud .ot-eyebrow,
.ot-panel .ot-eyebrow {
  color: #3ddbe3;
  font: 800 8px Manrope, sans-serif;
  letter-spacing: .18em;
}

.ot-hud h2 {
  margin: 1px 0 0;
  color: #eef7f9;
  font: 750 18px Manrope, sans-serif;
  letter-spacing: -.03em;
}

.ot-hud p {
  margin: 0;
  color: #708a98;
  font: 500 9px Manrope, sans-serif;
  line-height: 1.5;
}

.ot-hud-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.ot-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(118, 145, 161, .18);
  border-radius: 999px;
  background: rgba(9, 18, 28, .74);
  color: #8ca3b0;
  font: 750 7px Manrope, sans-serif;
  letter-spacing: .1em;
}

.ot-pill.live {
  border-color: rgba(65, 225, 158, .24);
  color: #55e3a0;
}

.ot-pill.warning {
  border-color: rgba(245, 168, 55, .26);
  color: #f2b657;
}

.ot-panel {
  position: absolute;
  z-index: 19;
  top: 122px;
  right: 68px;
  bottom: 48px;
  width: 364px;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(124, 151, 170, .2);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(8, 14, 24, .96), rgba(5, 10, 18, .93));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(22px) saturate(1.12);
}

.ot-panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 12px 13px;
  border-bottom: 1px solid rgba(124, 151, 170, .13);
}

.ot-panel-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(61, 219, 226, .32);
  border-radius: 12px;
  background: rgba(14, 54, 64, .48);
  color: #43dce5;
  font: 800 10px Manrope, sans-serif;
  box-shadow: inset 0 0 18px rgba(61, 219, 226, .08);
}

.ot-panel-head-copy {
  min-width: 0;
  flex: 1;
}

.ot-panel-head h2 {
  margin: 2px 0 1px;
  color: #e4eff4;
  font: 750 14px Manrope, sans-serif;
}

.ot-panel-head p {
  margin: 0;
  overflow: hidden;
  color: #687f8e;
  font: 650 8px Manrope, sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-panel-toggle {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(124, 151, 170, .17);
  border-radius: 10px;
  background: rgba(8, 14, 23, .7);
  color: #718895;
  cursor: pointer;
}

.ot-panel-toggle::before {
  content: '−';
  font: 700 18px Manrope, sans-serif;
}

.ot-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 12px 8px;
}

.ot-kpi {
  display: grid;
  min-width: 0;
  min-height: 54px;
  align-content: center;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 12px;
  background: rgba(10, 18, 28, .62);
}

.ot-kpi span {
  overflow: hidden;
  color: #657b89;
  font: 700 7px Manrope, sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-kpi b {
  color: #e8c864;
  font: 760 16px Manrope, sans-serif;
}

.ot-kpi small {
  color: #607684;
  font: 600 7px Manrope, sans-serif;
}

.ot-tabbar {
  display: flex;
  gap: 4px;
  padding: 2px 12px 9px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ot-tabbar::-webkit-scrollbar {
  display: none;
}

.ot-tab {
  min-width: max-content;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #677d8a;
  font: 750 8px Manrope, sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
}

.ot-tab.active {
  border-color: rgba(61, 219, 226, .2);
  background: rgba(14, 54, 64, .58);
  color: #42dce5;
}

.ot-panel-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 12px 12px;
  scrollbar-color: rgba(61, 219, 226, .25) transparent;
}

.ot-view {
  display: none;
}

.ot-view.active {
  display: block;
}

.ot-section {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 14px;
  background: rgba(8, 15, 24, .6);
}

.ot-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ot-section-head b {
  color: #c8d8df;
  font: 750 9px Manrope, sans-serif;
  letter-spacing: .09em;
}

.ot-section-head span,
.ot-section-head small {
  color: #607581;
  font: 650 8px Manrope, sans-serif;
}

.ot-health-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-top: 1px solid rgba(124, 151, 170, .08);
}

.ot-health-row:first-of-type {
  border-top: 0;
}

.ot-health-row i,
.ot-event-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50dfa0;
  box-shadow: 0 0 8px rgba(80, 223, 160, .62);
}

.ot-health-row.warning i {
  background: #f2af45;
  box-shadow: 0 0 8px rgba(242, 175, 69, .62);
}

.ot-health-row strong {
  display: block;
  color: #aebfc8;
  font: 700 8.5px Manrope, sans-serif;
}

.ot-health-row small {
  display: block;
  margin-top: 2px;
  color: #5f7480;
  font: 600 7.5px Manrope, sans-serif;
}

.ot-health-row em {
  color: #6f8794;
  font: 650 7px Manrope, sans-serif;
  font-style: normal;
}

.ot-source-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ot-source-card {
  min-height: 61px;
  padding: 9px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 12px;
  background: rgba(8, 15, 24, .55);
}

.ot-source-card b {
  display: block;
  color: #b8cad2;
  font: 750 8.5px Manrope, sans-serif;
}

.ot-source-card span {
  display: block;
  margin-top: 4px;
  color: #607783;
  font: 600 7.5px Manrope, sans-serif;
  line-height: 1.45;
}

.ot-source-card.simulation b {
  color: #e8c864;
}

.ot-source-card.sensor b {
  color: #41d9e2;
}

.ot-event-list,
.ot-device-list,
.ot-alarm-list,
.ot-rule-list,
.ot-honeypot-list {
  display: grid;
  gap: 6px;
}

.ot-event,
.ot-device-row,
.ot-alarm-row,
.ot-rule,
.ot-honeypot {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 8px 9px;
  border: 1px solid rgba(124, 151, 170, .11);
  border-radius: 12px;
  background: rgba(8, 15, 24, .54);
  color: inherit;
  text-align: left;
}

button.ot-device-row,
button.ot-alarm-row,
button.ot-honeypot {
  cursor: pointer;
}

.ot-event {
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.ot-event.warning .ot-event-dot {
  background: #f4b34d;
  box-shadow: 0 0 9px rgba(244, 179, 77, .65);
}

.ot-event.critical .ot-event-dot {
  background: #ff625a;
  box-shadow: 0 0 10px rgba(255, 98, 90, .72);
}

.ot-event b,
.ot-device-row b,
.ot-alarm-row b,
.ot-honeypot b {
  display: block;
  overflow: hidden;
  color: #b9cbd3;
  font: 720 8.5px Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-event small,
.ot-device-row small,
.ot-alarm-row small,
.ot-honeypot small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #607681;
  font: 600 7.5px Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-event time {
  color: #5b707d;
  font: 650 7px Manrope, sans-serif;
}

.ot-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 19px;
  padding: 0 6px;
  border: 1px solid rgba(124, 151, 170, .15);
  border-radius: 999px;
  color: #718792;
  font: 750 6.5px Manrope, sans-serif;
  letter-spacing: .07em;
}

.ot-badge.simulation {
  border-color: rgba(232, 200, 100, .24);
  color: #e8c864;
}

.ot-badge.sensor {
  border-color: rgba(65, 217, 226, .24);
  color: #41d9e2;
}

.ot-badge.critical {
  border-color: rgba(255, 98, 90, .26);
  color: #ff776f;
}

.ot-device-row,
.ot-alarm-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ot-device-row:hover,
.ot-device-row.active,
.ot-alarm-row:hover,
.ot-alarm-row.active,
.ot-honeypot:hover {
  border-color: rgba(61, 219, 226, .24);
  background: rgba(12, 40, 48, .52);
}

.ot-role {
  color: #77909c;
  font: 760 7px Manrope, sans-serif;
  letter-spacing: .08em;
}

.ot-alarm-row.critical {
  border-left: 2px solid #ff625a;
}

.ot-alarm-row.high {
  border-left: 2px solid #f39f43;
}

.ot-alarm-row.medium {
  border-left: 2px solid #e8c864;
}

.ot-alarm-overview {
  display: grid;
  gap: 9px;
}

.ot-alarm-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.ot-alarm-summary div {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid rgba(124, 151, 170, .11);
  border-radius: 10px;
  background: rgba(6, 13, 22, .58);
  text-align: center;
}

.ot-alarm-summary span {
  display: block;
  overflow: hidden;
  color: #5f7581;
  font: 720 5.5px Manrope, sans-serif;
  letter-spacing: .06em;
  text-overflow: ellipsis;
}

.ot-alarm-summary b {
  display: block;
  margin-top: 3px;
  color: #d9bf62;
  font: 760 12px Manrope, sans-serif;
}

.ot-alarm-filters {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ot-alarm-filters::-webkit-scrollbar {
  display: none;
}

.ot-alarm-filters button,
.ot-empty-state button,
.ot-inline-action {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(124, 151, 170, .14);
  border-radius: 9px;
  background: rgba(8, 15, 24, .7);
  color: #718793;
  font: 750 6.5px Manrope, sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
}

.ot-alarm-filters button.active,
.ot-alarm-filters button:hover,
.ot-empty-state button:hover,
.ot-inline-action:hover {
  border-color: rgba(61, 219, 226, .25);
  background: rgba(13, 49, 58, .72);
  color: #43dce5;
}

.ot-empty-state {
  display: grid;
  justify-items: start;
  gap: 5px;
  padding: 14px;
  border: 1px dashed rgba(65, 217, 226, .2);
  border-radius: 13px;
  background: rgba(8, 21, 30, .5);
}

.ot-empty-state span {
  color: #43dce5;
  font: 760 6px Manrope, sans-serif;
  letter-spacing: .12em;
}

.ot-empty-state b {
  color: #b9cbd3;
  font: 720 9px Manrope, sans-serif;
}

.ot-empty-state p {
  margin: 0 0 3px;
  color: #607681;
  font: 600 7px Manrope, sans-serif;
  line-height: 1.45;
}

.ot-empty-state.compact {
  padding: 11px;
}

.ot-alarm-row-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.ot-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(61, 219, 226, .22);
  border-radius: 999px;
  background: rgba(13, 49, 58, .5);
  color: #44dce5;
  font: 760 6px Manrope, sans-serif;
  letter-spacing: .06em;
}

.ot-status-badge.new {
  border-color: rgba(255, 98, 90, .28);
  background: rgba(88, 25, 28, .35);
  color: #ff756d;
}

.ot-status-badge.investigating {
  border-color: rgba(232, 200, 100, .28);
  background: rgba(72, 55, 15, .35);
  color: #e8c864;
}

.ot-status-badge.acknowledged {
  border-color: rgba(65, 217, 226, .28);
  color: #43dce5;
}

.ot-status-badge.resolved {
  border-color: rgba(84, 226, 156, .25);
  background: rgba(19, 67, 49, .35);
  color: #54e29c;
}

.ot-status-badge.muted {
  border-color: rgba(163, 139, 193, .28);
  background: rgba(48, 36, 64, .42);
  color: #bba0d8;
}

.ot-rule {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ot-rule b {
  color: #b8c9d1;
  font: 720 8.5px Manrope, sans-serif;
}

.ot-rule small {
  display: block;
  margin-top: 3px;
  color: #607581;
  font: 600 7.5px Manrope, sans-serif;
  line-height: 1.4;
}

.ot-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border: 1px solid rgba(61, 219, 226, .24);
  border-radius: 999px;
  background: rgba(20, 67, 72, .72);
  padding: 0;
  appearance: none;
  cursor: pointer;
}

.ot-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #42dce5;
  box-shadow: 0 0 9px rgba(66, 220, 229, .55);
  transition: left .18s ease, right .18s ease, background .18s ease;
}

.ot-switch[aria-checked="false"] {
  border-color: rgba(124, 151, 170, .22);
  background: rgba(25, 34, 43, .76);
}

.ot-switch[aria-checked="false"]::after {
  right: auto;
  left: 3px;
  background: #718691;
  box-shadow: none;
}

:is(.ot-tab, .ot-zone-nav button, .ot-view-modes button, .ot-device-row, .ot-alarm-row, .ot-honeypot, .ot-scenario, .ot-switch, .ot-panel-toggle, .ot-device-close, .ot-device-actions button, .ot-sim-actions button):focus-visible {
  outline: 2px solid #48dde5;
  outline-offset: 2px;
}

.ot-simulation-note {
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid rgba(232, 200, 100, .18);
  border-radius: 12px;
  background: rgba(50, 39, 12, .25);
  color: #a99864;
  font: 620 7.5px Manrope, sans-serif;
  line-height: 1.5;
}

.ot-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ot-scenario {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 12px;
  background: rgba(8, 16, 25, .7);
  color: #aebfc8;
  font: 700 7.5px Manrope, sans-serif;
  text-align: left;
  cursor: pointer;
}

.ot-scenario:hover,
.ot-scenario.running {
  border-color: rgba(61, 219, 226, .28);
  background: rgba(13, 48, 57, .58);
  color: #46dce5;
}

.ot-scenario small {
  display: block;
  margin-top: 5px;
  color: #5f7581;
  font: 600 6.5px Manrope, sans-serif;
  line-height: 1.4;
}

.ot-sim-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 8px;
}

.ot-sim-actions button,
.ot-device-actions button {
  min-height: 38px;
  border: 1px solid rgba(61, 219, 226, .2);
  border-radius: 11px;
  background: rgba(13, 50, 59, .68);
  color: #42dce5;
  font: 760 7.5px Manrope, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.ot-sim-actions button:last-child {
  padding: 0 14px;
  border-color: rgba(124, 151, 170, .14);
  background: rgba(8, 15, 24, .72);
  color: #718793;
}

.ot-zone-nav {
  position: absolute;
  z-index: 15;
  left: 72px;
  bottom: 54px;
  max-width: calc(100vw - 530px);
  align-items: center;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid rgba(124, 151, 170, .17);
  border-radius: 16px;
  background: rgba(6, 11, 19, .9);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}

.ot-zone-nav::-webkit-scrollbar {
  display: none;
}

.ot-zone-nav button,
.ot-view-modes button {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #657a87;
  font: 750 7.5px Manrope, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.ot-zone-nav button.active,
.ot-view-modes button.active {
  border-color: rgba(61, 219, 226, .24);
  background: rgba(15, 55, 64, .68);
  color: #45dce5;
}

.ot-view-modes {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: 102px;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(124, 151, 170, .17);
  border-radius: 16px;
  background: rgba(6, 11, 19, .9);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.ot-device-popover {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 150px;
  width: 310px;
  max-width: calc(100vw - 30px);
  flex-direction: column;
  padding: 13px;
  border: 1px solid rgba(61, 219, 226, .22);
  border-radius: 16px;
  background: rgba(6, 12, 21, .96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

body.ot-mode .ot-device-popover.open {
  display: flex;
}

.ot-device-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ot-device-popover-head span {
  color: #40d8e8;
  font: 750 6px Manrope, sans-serif;
  letter-spacing: .14em;
}

.ot-device-popover h3 {
  margin: 4px 0 0;
  color: #dce8f0;
  font: 750 14px Manrope, sans-serif;
}

.ot-device-close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(124, 151, 170, .16);
  border-radius: 9px;
  background: transparent;
  color: #718894;
  cursor: pointer;
}

.ot-device-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.ot-device-meta div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: rgba(9, 17, 27, .7);
}

.ot-device-meta dt {
  color: #5f7582;
  font: 700 5.5px Manrope, sans-serif;
  letter-spacing: .08em;
}

.ot-device-meta dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: #aebfc8;
  font: 650 7px Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-device-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.ot-passive-note {
  margin: 9px 0 0;
  color: #657b87;
  font: 600 6px Manrope, sans-serif;
  line-height: 1.45;
}

.ot-device-popover.alarm-mode {
  width: 440px;
  max-height: min(72dvh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 219, 226, .24) transparent;
}

.ot-device-popover.alarm-mode .ot-device-popover-head {
  position: sticky;
  z-index: 2;
  top: -13px;
  margin: -13px -13px 0;
  padding: 13px;
  border-bottom: 1px solid rgba(124, 151, 170, .12);
  background: rgba(6, 12, 21, .98);
  backdrop-filter: blur(18px);
}

.ot-alarm-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ot-alarm-detail-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.ot-alarm-detail-status small {
  margin-left: auto;
  color: #607681;
  font: 650 6.5px Manrope, sans-serif;
}

.ot-alarm-sla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid rgba(232, 200, 100, .15);
  border-radius: 12px;
  background: rgba(52, 41, 15, .24);
}

.ot-alarm-sla > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
}

.ot-alarm-sla span,
.ot-alarm-assignee-field > span {
  color: #6a7f89;
  font: 740 5.8px Manrope, sans-serif;
  letter-spacing: .09em;
}

.ot-alarm-sla b {
  color: #e8c864;
  font: 740 9px Manrope, sans-serif;
}

.ot-alarm-sla small {
  grid-column: 2;
  color: #667a84;
  font: 620 6px Manrope, sans-serif;
}

.ot-alarm-sla.overdue {
  border-color: rgba(255, 98, 90, .22);
  background: rgba(76, 24, 27, .3);
}

.ot-alarm-sla.overdue b {
  color: #ff756d;
}

.ot-alarm-sla-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 151, 170, .12);
}

.ot-alarm-sla-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d6d8, #e5bc52 70%, #ff625a);
}

.ot-alarm-assignee-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.ot-alarm-assignee,
.ot-alarm-note-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(124, 151, 170, .15);
  border-radius: 10px;
  outline: none;
  background: rgba(8, 15, 24, .75);
  color: #b9cbd3;
  font: 650 7.5px Manrope, sans-serif;
}

.ot-alarm-assignee {
  min-height: 34px;
  padding: 0 9px;
}

.ot-alarm-assignee:focus,
.ot-alarm-note-form textarea:focus {
  border-color: rgba(61, 219, 226, .48);
  box-shadow: 0 0 0 2px rgba(61, 219, 226, .1);
}

.ot-alarm-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.ot-alarm-action-grid button,
.ot-alarm-note-form button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(124, 151, 170, .14);
  border-radius: 10px;
  background: rgba(8, 15, 24, .72);
  color: #718793;
  font: 750 6.5px Manrope, sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
}

.ot-alarm-action-grid button.primary,
.ot-alarm-note-form button {
  border-color: rgba(61, 219, 226, .26);
  background: rgba(13, 50, 59, .72);
  color: #43dce5;
}

.ot-alarm-action-grid button:hover,
.ot-alarm-note-form button:hover {
  border-color: rgba(61, 219, 226, .38);
  color: #55e8ef;
}

.ot-alarm-detail-section {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(124, 151, 170, .11);
}

.ot-evidence-list,
.ot-alarm-notes {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.ot-evidence-list > div,
.ot-alarm-notes > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(124, 151, 170, .1);
  border-radius: 9px;
  background: rgba(8, 15, 24, .55);
}

.ot-evidence-list span {
  color: #43dce5;
  font: 760 5.5px Manrope, sans-serif;
}

.ot-evidence-list b,
.ot-alarm-notes b {
  overflow: hidden;
  color: #aebfc8;
  font: 680 7px Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-evidence-list small,
.ot-alarm-notes small {
  color: #5f7480;
  font: 620 5.8px Manrope, sans-serif;
}

.ot-inline-action {
  width: 100%;
  margin-top: 6px;
}

.ot-alarm-notes > div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.ot-alarm-notes p {
  grid-column: 1 / -1;
  margin: 0;
  color: #778c96;
  font: 620 7px Manrope, sans-serif;
  line-height: 1.45;
}

.ot-alarm-empty-copy {
  margin: 7px 0;
  color: #607681;
  font: 620 7px Manrope, sans-serif;
}

.ot-alarm-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 7px;
}

.ot-alarm-note-form textarea {
  min-height: 44px;
  padding: 8px;
  resize: vertical;
}

.ot-alarm-timeline {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ot-alarm-timeline li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.ot-alarm-timeline i {
  width: 8px;
  height: 8px;
  margin-top: 2px;
  border: 2px solid rgba(61, 219, 226, .28);
  border-radius: 50%;
  background: #0b1821;
  box-shadow: 0 0 0 3px rgba(61, 219, 226, .05);
}

.ot-alarm-timeline li.resolved i {
  border-color: rgba(84, 226, 156, .45);
}

.ot-alarm-timeline li.mute i {
  border-color: rgba(187, 160, 216, .45);
}

.ot-alarm-timeline b {
  display: block;
  color: #9db1bb;
  font: 680 7px Manrope, sans-serif;
}

.ot-alarm-timeline small {
  display: block;
  margin-top: 2px;
  color: #5f7480;
  font: 620 5.8px Manrope, sans-serif;
}

body.light-theme.ot-mode .map-stage {
  background:
    radial-gradient(circle at 52% 45%, rgba(31, 145, 153, .14), transparent 34%),
    linear-gradient(145deg, #edf4f5, #d9e5e8 74%);
}

body.light-theme.ot-mode .map-wash {
  background: radial-gradient(circle at 53% 48%, transparent 47%, rgba(147, 170, 179, .22) 100%);
}

body.light-theme :is(.ot-panel, .ot-hud, .ot-zone-nav, .ot-view-modes, .ot-device-popover) {
  border-color: rgba(57, 87, 102, .18);
  background: rgba(246, 250, 251, .94);
  box-shadow: 0 20px 60px rgba(49, 73, 84, .16);
}

body.light-theme :is(.ot-hud h2, .ot-panel-head h2, .ot-event b, .ot-device-row b, .ot-alarm-row b, .ot-honeypot b, .ot-device-popover h3) {
  color: #193746;
}

body.light-theme :is(.ot-section, .ot-kpi, .ot-source-card, .ot-event, .ot-device-row, .ot-alarm-row, .ot-rule, .ot-honeypot, .ot-scenario, .ot-device-meta div) {
  border-color: rgba(57, 87, 102, .12);
  background: rgba(238, 245, 247, .78);
}

body.light-theme :is(.ot-hud p, .ot-panel-head p, .ot-kpi span, .ot-kpi small, .ot-section-head span, .ot-section-head small, .ot-health-row small, .ot-health-row em, .ot-source-card span, .ot-event small, .ot-event time, .ot-device-row small, .ot-alarm-row small, .ot-honeypot small, .ot-rule small, .ot-scenario small, .ot-role, .ot-passive-note) {
  color: #486575;
}

body.light-theme :is(.ot-tab, .ot-zone-nav button, .ot-view-modes button) {
  color: #4b6776;
}

body.light-theme :is(.ot-tab.active, .ot-zone-nav button.active, .ot-view-modes button.active) {
  border-color: rgba(10, 127, 141, .3);
  background: rgba(196, 231, 235, .82);
  color: #087e8b;
}

body.light-theme .ot-simulation-note {
  border-color: rgba(157, 112, 16, .2);
  background: rgba(241, 225, 183, .55);
  color: #725716;
}

body.light-theme .ot-device-popover.alarm-mode .ot-device-popover-head {
  border-color: rgba(57, 87, 102, .14);
  background: rgba(246, 250, 251, .98);
}

body.light-theme :is(.ot-alarm-summary div, .ot-empty-state, .ot-alarm-sla, .ot-evidence-list > div, .ot-alarm-notes > div) {
  border-color: rgba(57, 87, 102, .14);
  background: rgba(235, 243, 245, .76);
}

body.light-theme :is(.ot-alarm-assignee, .ot-alarm-note-form textarea, .ot-alarm-action-grid button, .ot-alarm-note-form button, .ot-alarm-filters button, .ot-inline-action) {
  border-color: rgba(57, 87, 102, .16);
  background: rgba(235, 243, 245, .9);
  color: #486575;
}

body.light-theme :is(.ot-alarm-action-grid button.primary, .ot-alarm-note-form button, .ot-alarm-filters button.active) {
  border-color: rgba(10, 127, 141, .28);
  background: rgba(196, 231, 235, .82);
  color: #087e8b;
}

body.light-theme :is(.ot-alarm-empty-copy, .ot-alarm-notes p, .ot-alarm-timeline small, .ot-evidence-list small, .ot-alarm-detail-status small) {
  color: #526e7b;
}

@media (min-width: 761px) {
  .ot-device-popover.alarm-mode {
    top: 122px;
    right: 448px;
    bottom: 48px;
    left: auto;
    width: min(440px, calc(100vw - 468px));
    max-height: none;
    transform: none;
  }

  .ot-panel {
    transition: width .24s ease, height .24s ease, opacity .2s ease, transform .24s ease;
  }

  .ot-panel.collapsed {
    right: 68px;
    bottom: auto;
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .ot-panel.collapsed .ot-panel-head {
    min-height: 54px;
    justify-content: center;
    padding: 10px;
    border-bottom: 0;
  }

  .ot-panel.collapsed :is(.ot-panel-icon, .ot-panel-head-copy, .ot-kpis, .ot-tabbar, .ot-panel-body) {
    display: none;
  }

  .ot-panel.collapsed .ot-panel-toggle {
    width: 34px;
    height: 34px;
    border-color: rgba(61, 219, 226, .26);
    color: #46dce5;
  }

  .ot-panel.collapsed .ot-panel-toggle::before {
    content: '+';
  }

  .ot-hud .ot-eyebrow,
  .ot-panel .ot-eyebrow,
  .ot-section-head b {
    font-size: 9px;
  }

  .ot-hud p,
  .ot-source-card b,
  .ot-health-row strong,
  .ot-event b,
  .ot-device-row b,
  .ot-alarm-row b,
  .ot-honeypot b {
    font-size: 9.5px;
  }

  .ot-tab,
  .ot-zone-nav button,
  .ot-view-modes button,
  .ot-kpi span,
  .ot-kpi small,
  .ot-source-card span,
  .ot-health-row small,
  .ot-event small,
  .ot-device-row small,
  .ot-alarm-row small,
  .ot-honeypot small {
    font-size: 8px;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .ot-panel {
    right: 58px;
    width: 320px;
  }

  .ot-hud {
    left: 58px;
    width: 238px;
  }

  .ot-zone-nav {
    left: 58px;
    max-width: calc(100vw - 440px);
  }

  .ot-view-modes {
    left: calc(50% - 160px);
  }
}

@media (max-width: 760px) {
  body.ot-mode #mapCanvas {
    filter: none;
  }

  body.ot-mode :is(.ot-panel, .ot-hud, .ot-notice, .ot-zone-nav, .ot-view-modes, .ot-device-popover) {
    backdrop-filter: none;
  }

  body.ot-mode .map-controls {
    right: 8px;
    bottom: calc(284px + env(safe-area-inset-bottom));
  }

  .ot-notice {
    top: 136px;
    width: calc(100vw - 24px);
    max-width: none;
    min-height: 31px;
    padding: 5px 9px;
    border-radius: 11px;
    font-size: 6px;
    line-height: 1.35;
  }

  .ot-hud {
    top: 176px;
    left: 10px;
    width: min(238px, calc(100vw - 86px));
    padding: 10px 12px;
  }

  .ot-hud h2 {
    font-size: 14px;
  }

  .ot-hud p {
    display: none;
  }

  .ot-hud-flags {
    margin-top: 5px;
  }

  .ot-pill {
    min-height: 19px;
    font-size: 5px;
  }

  .ot-panel {
    top: auto;
    right: 7px;
    bottom: calc(104px + env(safe-area-inset-bottom));
    left: 7px;
    width: auto;
    height: min(58dvh, 510px);
    max-height: calc(100dvh - 242px);
    border-radius: 21px 21px 10px 10px;
    transition: height .25s ease, max-height .25s ease, transform .25s ease;
  }

  .ot-panel.collapsed {
    height: 66px;
    max-height: 66px;
    transform: none;
  }

  .ot-panel.collapsed .ot-panel-toggle::before {
    content: '+';
  }

  .ot-panel.collapsed :is(.ot-kpis, .ot-tabbar, .ot-panel-body) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .ot-panel-head {
    min-height: 64px;
    cursor: pointer;
  }

  .ot-kpis {
    padding-top: 8px;
  }

  .ot-kpi {
    min-height: 48px;
  }

  .ot-tabbar {
    padding-bottom: 8px;
  }

  .ot-panel-body {
    padding-bottom: 14px;
  }

  .ot-zone-nav {
    right: 8px;
    bottom: calc(178px + env(safe-area-inset-bottom));
    left: 8px;
    max-width: none;
  }

  .ot-panel:not(.collapsed) ~ .ot-zone-nav {
    opacity: 0;
    pointer-events: none;
  }

  .ot-view-modes {
    bottom: calc(230px + env(safe-area-inset-bottom));
  }

  .ot-panel:not(.collapsed) ~ .ot-view-modes {
    opacity: 0;
    pointer-events: none;
  }

  .ot-view-modes button,
  .ot-zone-nav button {
    height: 44px;
    padding: 0 12px;
    font-size: 7px;
  }

  .ot-device-popover {
    bottom: calc(286px + env(safe-area-inset-bottom));
  }

  .ot-device-popover.alarm-mode {
    right: 7px;
    bottom: calc(182px + env(safe-area-inset-bottom));
    left: 7px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 202px - env(safe-area-inset-bottom));
    transform: none;
  }

  .ot-alarm-action-grid button,
  .ot-alarm-note-form button,
  .ot-alarm-assignee,
  .ot-inline-action,
  .ot-alarm-filters button,
  .ot-empty-state button {
    min-height: 44px;
  }

  .ot-alarm-detail-status {
    flex-wrap: wrap;
  }

  .ot-alarm-detail-status small {
    width: 100%;
    margin-left: 0;
  }

  body.ot-mode:not(.ot-panel-collapsed) :is(.ot-notice, .ot-hud) {
    opacity: 0;
    pointer-events: none;
  }

  body.ot-mode:not(.ot-panel-collapsed) .ot-notice {
    transform: translate(-50%, -8px);
  }

  body.ot-mode:not(.ot-panel-collapsed) .ot-hud {
    transform: translateY(-8px);
  }

  body.ot-mode .cursor-status {
    display: none;
  }

  body.ot-mode .map-source {
    bottom: calc(174px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .ot-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .ot-kpi:nth-child(n + 3) {
    display: none;
  }

  .ot-source-legend,
  .ot-scenario-grid {
    grid-template-columns: 1fr;
  }

  .ot-alarm-summary,
  .ot-alarm-action-grid,
  .ot-alarm-sla,
  .ot-alarm-note-form {
    grid-template-columns: 1fr 1fr;
  }

  .ot-alarm-sla > div:first-child,
  .ot-alarm-sla-track,
  .ot-alarm-note-form textarea,
  .ot-alarm-note-form button {
    grid-column: 1 / -1;
  }

  .ot-alarm-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Expanded OT device inventory */
.ot-device-overview {
  display: grid;
  gap: 9px;
}

.ot-device-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.ot-device-summary > div {
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: rgba(8, 15, 24, .58);
  text-align: center;
}

.ot-device-summary span,
.ot-device-toolbar label > span {
  display: block;
  overflow: hidden;
  color: #607783;
  font: 730 5.5px Manrope, sans-serif;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-device-summary b {
  display: block;
  margin-top: 3px;
  color: #d9c36e;
  font: 760 13px Manrope, sans-serif;
}

.ot-device-search-wrap {
  margin: 0;
}

.ot-device-filter-chips {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.ot-device-filter-chips::-webkit-scrollbar {
  display: none;
}

.ot-device-filter-chips button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(124, 151, 170, .14);
  border-radius: 9px;
  background: rgba(7, 13, 22, .72);
  color: #637b88;
  font: 740 6px Manrope, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}

.ot-device-filter-chips button.active {
  border-color: rgba(64, 216, 232, .32);
  background: rgba(20, 58, 69, .76);
  color: #40d8e8;
}

.ot-device-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.ot-device-toolbar label {
  min-width: 0;
}

.ot-device-toolbar select {
  width: 100%;
  height: 31px;
  margin-top: 4px;
  padding: 0 20px 0 7px;
  border: 1px solid rgba(124, 151, 170, .14);
  border-radius: 9px;
  background: #08111b;
  color: #8ea5b0;
  font: 650 6.5px Manrope, sans-serif;
  outline: 0;
}

.ot-device-row.inventory {
  grid-template-columns: 9px minmax(0, 1fr) auto;
  min-height: 62px;
}

.ot-device-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #56dfa5;
  box-shadow: 0 0 9px rgba(86, 223, 165, .58);
}

.ot-device-status-dot.warning {
  background: #f3b24a;
  box-shadow: 0 0 9px rgba(243, 178, 74, .58);
}

.ot-device-status-dot.critical {
  background: #ff655d;
  box-shadow: 0 0 10px rgba(255, 101, 93, .68);
}

.ot-device-status-dot.offline {
  background: #71828d;
  box-shadow: none;
}

.ot-device-row-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.ot-device-row-meta > small {
  margin: 0;
  color: #718994;
  font-size: 6px;
  letter-spacing: .07em;
}

.ot-device-health {
  color: #50d9c9;
  font: 780 9px Manrope, sans-serif;
}

.ot-device-risk {
  color: #7a909b;
  font: 760 5.5px Manrope, sans-serif;
  letter-spacing: .06em;
}

.ot-device-risk.high { color: #f2b552; }
.ot-device-risk.critical { color: #ff766e; }

.ot-device-empty-state {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 20px 14px;
  border: 1px dashed rgba(124, 151, 170, .16);
  border-radius: 12px;
  color: #6d828d;
  text-align: center;
}

.ot-device-empty-state[hidden] { display: none; }
.ot-device-empty-state b { color: #a9bdc6; font: 720 9px Manrope, sans-serif; }
.ot-device-empty-state p { margin: 0; font: 600 7px Manrope, sans-serif; }
.ot-device-empty-state button {
  min-height: 32px;
  margin-top: 5px;
  padding: 0 12px;
  border: 1px solid rgba(64, 216, 232, .22);
  border-radius: 9px;
  background: rgba(20, 58, 69, .72);
  color: #40d8e8;
  font: 740 6.5px Manrope, sans-serif;
  cursor: pointer;
}

.ot-device-popover.inventory-mode {
  width: 510px;
  max-height: min(74dvh, 700px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 219, 226, .24) transparent;
}

.ot-device-live-summary {
  margin: 7px 0 0;
  color: #718894;
  font: 650 6.5px Manrope, sans-serif;
  letter-spacing: .04em;
}

.ot-device-detail-tabs {
  position: sticky;
  z-index: 2;
  top: -13px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 10px -4px 0;
  padding: 8px 4px;
  background: rgba(6, 12, 21, .96);
}

.ot-device-detail-tabs button {
  min-height: 34px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 9px;
  background: rgba(9, 17, 27, .74);
  color: #637b88;
  font: 740 6.5px Manrope, sans-serif;
  cursor: pointer;
}

.ot-device-detail-tabs button.active {
  border-color: rgba(64, 216, 232, .34);
  background: rgba(20, 58, 69, .78);
  color: #40d8e8;
}

.ot-device-detail-section {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}

.ot-device-health-hero {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 10px;
  border: 1px solid rgba(74, 215, 202, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 42, 48, .74), rgba(8, 16, 26, .74));
}

.ot-device-health-ring {
  width: 62px;
  height: 62px;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(#4ddcc8 var(--health), rgba(95, 119, 131, .16) 0);
}

.ot-device-health-ring > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  border-radius: 50%;
  background: #08111b;
  text-align: center;
}

.ot-device-health-ring b { color: #dce8f0; font: 780 15px Manrope, sans-serif; }
.ot-device-health-ring small { color: #607783; font: 700 5px Manrope, sans-serif; letter-spacing: .09em; }
.ot-device-health-hero > div:last-child > span { display: block; color: #50d9c9; font: 750 6px Manrope, sans-serif; letter-spacing: .1em; }
.ot-device-health-hero > div:last-child > b { display: block; margin-top: 5px; color: #dce8f0; font: 760 12px Manrope, sans-serif; }
.ot-device-health-hero > div:last-child > small { display: block; margin-top: 4px; color: #67808c; font: 600 7px Manrope, sans-serif; }
.ot-device-health-hero.warning { border-color: rgba(243, 178, 74, .22); }
.ot-device-health-hero.critical { border-color: rgba(255, 101, 93, .28); }
.ot-device-health-hero.offline { filter: saturate(.5); }

.ot-device-meta.rich {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ot-device-detail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.ot-device-detail-heading span { display: block; color: #40d8e8; font: 730 5.5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-device-detail-heading b { display: block; margin-top: 3px; color: #b8cad2; font: 720 9px Manrope, sans-serif; }
.ot-device-detail-heading > small { color: #627984; font: 600 6.5px Manrope, sans-serif; }

.ot-device-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ot-device-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 11px;
  background: rgba(9, 17, 27, .7);
}

.ot-device-metric > span { color: #607783; font: 720 5.5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-device-metric > b { display: block; margin-top: 6px; color: #dce8f0; font: 780 15px Manrope, sans-serif; }
.ot-device-metric > b small { margin-left: 2px; color: #78909b; font-size: 7px; }
.ot-device-metric > i { display: block; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgba(92, 118, 130, .15); }
.ot-device-metric > i em { display: block; height: 100%; border-radius: inherit; background: #4ddcc8; transition: width .35s ease; }
.ot-device-metric > small { display: block; margin-top: 6px; color: #607783; font: 600 6px Manrope, sans-serif; }
.ot-device-metric.warning > i em { background: #f3b24a; }
.ot-device-metric.critical > i em { background: #ff655d; }

.ot-device-context-note,
.ot-device-no-data {
  margin: 0;
  padding: 9px;
  border-radius: 9px;
  background: rgba(8, 15, 24, .5);
  color: #687f8b;
  font: 600 7px Manrope, sans-serif;
  line-height: 1.45;
}

.ot-device-network-identity,
.ot-device-security-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ot-device-network-identity > div,
.ot-device-security-kpis > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: rgba(9, 17, 27, .7);
}

.ot-device-network-identity span,
.ot-device-security-kpis span { color: #607783; font: 720 5px Manrope, sans-serif; letter-spacing: .08em; }
.ot-device-network-identity b,
.ot-device-security-kpis b { display: block; overflow: hidden; margin-top: 4px; color: #aebfc8; font: 670 7px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

.ot-device-network-list,
.ot-device-mini-events {
  display: grid;
  gap: 6px;
}

.ot-device-network-list button,
.ot-device-mini-events > div {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: rgba(9, 17, 27, .7);
  color: #aebfc8;
  text-align: left;
}

.ot-device-network-list button { cursor: pointer; }
.ot-device-network-list i,
.ot-device-mini-events i { width: 6px; height: 6px; border-radius: 50%; background: #4ddcc8; box-shadow: 0 0 8px rgba(77, 220, 200, .5); }
.ot-device-network-list i.suspicious,
.ot-device-mini-events .critical i { background: #ff655d; box-shadow: 0 0 8px rgba(255, 101, 93, .55); }
.ot-device-network-list b,
.ot-device-mini-events b { display: block; font: 720 8px Manrope, sans-serif; }
.ot-device-network-list small,
.ot-device-mini-events small { display: block; margin-top: 3px; color: #637a86; font: 600 6.5px Manrope, sans-serif; }
.ot-device-network-list em { color: #6f8793; font: normal 740 5.5px Manrope, sans-serif; }

.ot-device-security-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(64, 216, 232, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 42, 48, .74), rgba(8, 16, 26, .74));
}

.ot-device-security-score > span { color: #607783; font: 720 6px Manrope, sans-serif; letter-spacing: .1em; }
.ot-device-security-score > b { grid-row: 1 / 3; grid-column: 2; color: #4ddcc8; font: 780 24px Manrope, sans-serif; }
.ot-device-security-score > b small { color: #6e8793; font-size: 8px; }
.ot-device-security-score > em { margin-top: 4px; color: #9db0ba; font: normal 740 7px Manrope, sans-serif; }
.ot-device-security-score.high > b { color: #f3b24a; }
.ot-device-security-score.critical > b { color: #ff655d; }

.ot-device-actions.detail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: sticky;
  bottom: -13px;
  z-index: 3;
  margin: 10px -4px 0;
  padding: 8px 4px;
  background: rgba(6, 12, 21, .96);
}

:is(.ot-device-filter-chips button, .ot-device-toolbar select, .ot-device-empty-state button, .ot-device-detail-tabs button, .ot-device-network-list button):focus-visible {
  outline: 2px solid #40d8e8;
  outline-offset: 2px;
}

body.light-theme :is(.ot-device-summary > div, .ot-device-toolbar select, .ot-device-filter-chips button, .ot-device-empty-state, .ot-device-metric, .ot-device-network-identity > div, .ot-device-security-kpis > div, .ot-device-network-list button, .ot-device-mini-events > div, .ot-device-context-note) {
  border-color: rgba(57, 87, 102, .14);
  background: rgba(235, 243, 245, .84);
  color: #395966;
}

body.light-theme .ot-device-filter-chips button.active,
body.light-theme .ot-device-detail-tabs button.active {
  background: rgba(196, 231, 235, .82);
  color: #087e8b;
}

body.light-theme .ot-device-popover.inventory-mode,
body.light-theme .ot-device-detail-tabs,
body.light-theme .ot-device-actions.detail {
  background: rgba(247, 250, 251, .98);
}

body.light-theme .ot-device-health-hero,
body.light-theme .ot-device-security-score {
  background: linear-gradient(135deg, rgba(217, 239, 239, .92), rgba(237, 244, 246, .92));
}

body.light-theme .ot-device-health-ring > span { background: #f5f9fa; }
body.light-theme :is(.ot-device-health-ring b, .ot-device-health-hero > div:last-child > b, .ot-device-metric > b) { color: #17313f; }

@media (min-width: 761px) {
  .ot-device-popover.inventory-mode {
    top: 122px;
    right: 448px;
    bottom: 48px;
    left: auto;
    width: min(510px, calc(100vw - 468px));
    max-height: none;
    transform: none;
  }
}

@media (max-width: 760px) {
  .ot-device-popover.inventory-mode {
    right: 7px;
    bottom: calc(182px + env(safe-area-inset-bottom));
    left: 7px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 202px - env(safe-area-inset-bottom));
    transform: none;
  }

  .ot-device-filter-chips button,
  .ot-device-toolbar select,
  .ot-device-empty-state button,
  .ot-device-detail-tabs button,
  .ot-device-actions.detail button {
    min-height: 44px;
  }

  .ot-device-toolbar {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ot-device-metric-grid {
    grid-template-columns: 1fr;
  }

  .ot-device-network-identity,
  .ot-device-security-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .ot-device-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ot-device-meta.rich,
  .ot-device-actions.detail {
    grid-template-columns: 1fr;
  }

  .ot-device-detail-tabs button {
    padding: 0 4px;
    font-size: 5.8px;
  }
}

/* OT network topology and communication analysis */
.ot-network-overview {
  display: grid;
  gap: 9px;
}

.ot-network-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.ot-network-summary > div {
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: rgba(6, 13, 22, .62);
  text-align: center;
}

.ot-network-summary span {
  display: block;
  overflow: hidden;
  color: #607783;
  font: 720 5.5px Manrope, sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-network-summary b {
  display: inline-block;
  margin-top: 4px;
  color: #46dce5;
  font: 780 13px Manrope, sans-serif;
}

.ot-network-summary small {
  margin-left: 2px;
  color: #627985;
  font: 650 5px Manrope, sans-serif;
}

.ot-network-search-wrap {
  min-height: 39px;
  margin: 0;
}

.ot-network-search {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #c4d4dc;
  font: 650 8px Manrope, sans-serif;
}

.ot-network-filter-chips {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ot-network-filter-chips::-webkit-scrollbar,
.ot-network-toolbar::-webkit-scrollbar { display: none; }

.ot-network-filter-chips button,
.ot-network-empty-state button {
  min-width: max-content;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(124, 151, 170, .14);
  border-radius: 999px;
  background: rgba(8, 15, 24, .68);
  color: #6f8692;
  font: 750 6px Manrope, sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
}

.ot-network-filter-chips button.active {
  border-color: rgba(64, 216, 232, .34);
  background: rgba(20, 58, 69, .78);
  color: #40d8e8;
}

.ot-network-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(94px, 1fr));
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ot-network-toolbar label { min-width: 0; }
.ot-network-toolbar label > span {
  display: block;
  margin: 0 0 4px 2px;
  color: #5f7682;
  font: 720 5px Manrope, sans-serif;
  letter-spacing: .08em;
}

.ot-network-toolbar select {
  width: 100%;
  min-height: 34px;
  padding: 0 22px 0 8px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 9px;
  outline: 0;
  background: #09121d;
  color: #8ba0aa;
  font: 650 6px Manrope, sans-serif;
}

.ot-network-topology-card {
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(64, 216, 232, .14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(7, 19, 29, .86), rgba(5, 11, 19, .78));
}

.ot-network-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px 4px;
}

.ot-network-card-head span {
  display: block;
  color: #40d8e8;
  font: 740 5.5px Manrope, sans-serif;
  letter-spacing: .11em;
}

.ot-network-card-head b {
  display: block;
  margin-top: 3px;
  color: #b7c9d1;
  font: 720 8px Manrope, sans-serif;
}

.ot-network-card-head small {
  color: #657c88;
  font: 630 6px Manrope, sans-serif;
}

.ot-network-map {
  display: block;
  width: 100%;
  height: 164px;
  overflow: visible;
}

.ot-network-grid path {
  fill: none;
  stroke: rgba(98, 132, 146, .09);
  stroke-width: .65;
}

.ot-network-map-links line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.6;
  cursor: pointer;
  transition: opacity .2s ease, stroke-width .2s ease, filter .2s ease;
}

.ot-network-map-links line.reference { stroke: #3ddbe3; opacity: .68; }
.ot-network-map-links line.maintenance { stroke: #e8c864; opacity: .84; }
.ot-network-map-links line.review { stroke: #ff6b63; opacity: .9; stroke-dasharray: 4 3; }
.ot-network-map-links line.selected,
.ot-network-map-links line:focus-visible {
  stroke-width: 4;
  opacity: 1;
  filter: drop-shadow(0 0 5px currentColor);
  outline: none;
}

.ot-network-map-links .ot-network-map-hit {
  stroke: transparent;
  stroke-width: 14;
  opacity: 1;
  pointer-events: stroke;
  filter: none;
}

.ot-network-map-links .ot-network-map-hit:focus-visible {
  stroke-width: 14;
  filter: none;
}

.ot-network-map-links .ot-network-map-hit:focus-visible + .ot-network-map-line {
  stroke-width: 4;
  opacity: 1;
  filter: drop-shadow(0 0 5px currentColor);
}

.ot-network-map-nodes g { cursor: pointer; outline: none; }
.ot-network-map-nodes circle:not(.ot-network-node-hit) {
  fill: #0b2631;
  stroke: #44dce5;
  stroke-width: 1.3;
  filter: drop-shadow(0 0 4px rgba(68, 220, 229, .35));
}
.ot-network-map-nodes .ot-network-node-hit { fill: transparent; stroke: none; pointer-events: all; }
.ot-network-map-nodes g.risky circle:not(.ot-network-node-hit) { fill: #30151c; stroke: #ff6b63; }
.ot-network-map-nodes g:focus-visible circle:not(.ot-network-node-hit) { stroke-width: 3; }
.ot-network-map-nodes text {
  fill: #77909b;
  font: 650 4px Manrope, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

.ot-network-legend {
  display: flex;
  gap: 11px;
  padding: 0 11px 10px;
  color: #667e89;
  font: 650 5.5px Manrope, sans-serif;
}

.ot-network-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ot-network-legend i { width: 12px; height: 2px; border-radius: 2px; background: #3ddbe3; }
.ot-network-legend i.maintenance { background: #e8c864; }
.ot-network-legend i.review { background: #ff6b63; }

.ot-network-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 6px;
}
.ot-network-result-meta span { color: #627985; font: 730 5.5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-network-result-meta b { color: #8aa0aa; font: 680 6.5px Manrope, sans-serif; }

.ot-network-link-list { display: grid; gap: 6px; }

.ot-network-link-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
  padding: 8px 9px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 12px;
  background: rgba(8, 15, 24, .58);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ot-network-link-row[hidden] { display: none; }
.ot-network-link-row:hover,
.ot-network-link-row.active {
  border-color: rgba(64, 216, 232, .3);
  background: rgba(12, 40, 48, .6);
}
.ot-network-link-row.critical { border-left: 2px solid #ff655d; }
.ot-network-link-row.warning { border-left: 2px solid #f1a848; }
.ot-network-link-row.maintenance { border-left: 2px solid #e8c864; }

.ot-network-health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ddcc8;
  box-shadow: 0 0 8px rgba(77, 220, 200, .5);
}
.ot-network-link-row.warning .ot-network-health-dot { background: #f1a848; box-shadow: 0 0 8px rgba(241, 168, 72, .5); }
.ot-network-link-row.critical .ot-network-health-dot { background: #ff655d; box-shadow: 0 0 9px rgba(255, 101, 93, .55); }
.ot-network-link-row.maintenance .ot-network-health-dot { background: #e8c864; box-shadow: 0 0 8px rgba(232, 200, 100, .48); }

.ot-network-link-copy { min-width: 0; }
.ot-network-link-copy b {
  display: block;
  overflow: hidden;
  color: #becfd6;
  font: 720 8px Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ot-network-link-copy b em { color: #40d8e8; font-style: normal; }
.ot-network-link-copy small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #637a86;
  font: 600 6.5px Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-network-link-metrics {
  display: grid;
  min-width: 58px;
  justify-items: end;
  gap: 2px;
}
.ot-network-link-metrics > b { color: #d6e3e8; font: 760 9px Manrope, sans-serif; }
.ot-network-link-metrics > b small { display: inline; margin-left: 2px; color: #667e89; font-size: 5px; }
.ot-network-link-metrics > em { color: #4ddcc8; font: normal 750 5px Manrope, sans-serif; letter-spacing: .06em; }
.ot-network-link-metrics > em.risk-high { color: #f1a848; }
.ot-network-link-metrics > em.risk-critical { color: #ff655d; }
.ot-network-link-metrics > small { color: #687f8a; font: 650 5px Manrope, sans-serif; }

.ot-network-empty-state {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 20px 14px;
  border: 1px dashed rgba(124, 151, 170, .16);
  border-radius: 12px;
  color: #687f8a;
  text-align: center;
}
.ot-network-empty-state[hidden] { display: none; }
.ot-network-empty-state b { color: #aebfc8; font: 720 9px Manrope, sans-serif; }
.ot-network-empty-state p { margin: 0; font: 600 7px Manrope, sans-serif; }
.ot-network-passive-note { margin: 9px 2px 0; color: #5f7682; font: 600 6px Manrope, sans-serif; line-height: 1.5; }

.ot-device-popover.network-mode {
  width: 510px;
  max-height: min(74dvh, 700px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 219, 226, .24) transparent;
}

.ot-link-detail-tabs {
  position: sticky;
  z-index: 2;
  top: -13px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 10px -4px 0;
  padding: 8px 4px;
  background: rgba(6, 12, 21, .96);
}

.ot-link-detail-tabs button {
  min-height: 34px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 9px;
  background: rgba(9, 17, 27, .74);
  color: #637b88;
  font: 740 6.5px Manrope, sans-serif;
  cursor: pointer;
}
.ot-link-detail-tabs button.active { border-color: rgba(64, 216, 232, .34); background: rgba(20, 58, 69, .78); color: #40d8e8; }
.ot-link-detail-section { display: grid; gap: 9px; margin-top: 4px; }

.ot-link-route-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(64, 216, 232, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 42, 48, .74), rgba(8, 16, 26, .74));
}
.ot-link-route-hero.review { border-color: rgba(255, 101, 93, .26); background: linear-gradient(135deg, rgba(63, 24, 29, .62), rgba(8, 16, 26, .74)); }
.ot-link-route-hero > i { color: #40d8e8; font: normal 800 18px Manrope, sans-serif; }
.ot-link-route-hero span { color: #607783; font: 720 5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-link-route-hero b { display: block; margin-top: 4px; overflow: hidden; color: #dce8ed; font: 760 9px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-link-route-hero small { display: block; margin-top: 3px; color: #6a818c; font: 600 6px Manrope, sans-serif; line-height: 1.35; }

.ot-link-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ot-link-status-grid > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: rgba(9, 17, 27, .7);
}
.ot-link-status-grid span { color: #607783; font: 720 5px Manrope, sans-serif; letter-spacing: .08em; }
.ot-link-status-grid b { display: block; margin-top: 4px; color: #b6c8d0; font: 700 7px Manrope, sans-serif; }

.ot-link-traffic-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(64, 216, 232, .16);
  border-radius: 12px;
  background: rgba(8, 22, 31, .62);
}
.ot-link-traffic-head span { color: #40d8e8; font: 730 5.5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-link-traffic-head b { display: block; margin-top: 4px; color: #dce8ed; font: 780 17px Manrope, sans-serif; }
.ot-link-traffic-head small { display: block; margin-top: 3px; color: #697f8a; font: 600 6px Manrope, sans-serif; }
.ot-network-sparkline { width: 100%; height: 58px; }
.ot-network-sparkline path { fill: none; stroke: rgba(92, 118, 130, .18); stroke-width: 1; }
.ot-network-sparkline polyline { fill: none; stroke: #40d8e8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(64, 216, 232, .35)); }

.ot-link-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ot-link-metric { padding: 10px; border: 1px solid rgba(124, 151, 170, .13); border-radius: 11px; background: rgba(9, 17, 27, .7); }
.ot-link-metric > span { color: #607783; font: 720 5.5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-link-metric > b { display: block; margin-top: 6px; color: #dce8f0; font: 780 15px Manrope, sans-serif; }
.ot-link-metric > b small { margin-left: 2px; color: #78909b; font-size: 7px; }
.ot-link-metric > i { display: block; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgba(92, 118, 130, .15); }
.ot-link-metric > i em { display: block; height: 100%; border-radius: inherit; background: #4ddcc8; }
.ot-link-metric.warning > i em { background: #f1a848; }
.ot-link-metric.critical > i em { background: #ff655d; }

.ot-link-policy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(64, 216, 232, .18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 42, 48, .74), rgba(8, 16, 26, .74));
}
.ot-link-policy-card.review { border-color: rgba(255, 101, 93, .28); background: linear-gradient(135deg, rgba(65, 23, 29, .62), rgba(8, 16, 26, .74)); }
.ot-link-policy-card span { color: #607783; font: 720 5.5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-link-policy-card b { display: block; margin-top: 5px; color: #40d8e8; font: 760 12px Manrope, sans-serif; }
.ot-link-policy-card.review b { color: #ff766e; }
.ot-link-policy-card small { display: block; margin-top: 3px; color: #6d838e; font: 600 6.5px Manrope, sans-serif; }
.ot-link-policy-card > strong { color: #e8c864; font: 780 22px Manrope, sans-serif; text-align: right; }
.ot-link-policy-card > strong small { color: #6f8590; font-size: 5px; }
.ot-link-policy-note { margin: 0; padding: 9px; border-radius: 9px; background: rgba(44, 30, 12, .42); color: #a58d64; font: 600 7px Manrope, sans-serif; line-height: 1.5; }

.ot-link-related-alarms { display: grid; gap: 6px; }
.ot-link-related-alarms button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid rgba(255, 101, 93, .16); border-radius: 9px; background: rgba(44, 18, 24, .42); color: #aebfc8; text-align: left; cursor: pointer; }
.ot-link-related-alarms span { color: #ff766e; font: 740 5.5px Manrope, sans-serif; }
.ot-link-related-alarms b { overflow: hidden; font: 700 7px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-link-related-alarms small { color: #718792; font: 650 5.5px Manrope, sans-serif; }

.ot-link-actions {
  position: sticky;
  z-index: 3;
  bottom: -13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px -4px 0;
  padding: 8px 4px;
  background: rgba(6, 12, 21, .96);
}
.ot-link-actions button { min-height: 34px; border: 1px solid rgba(64, 216, 232, .18); border-radius: 9px; background: rgba(11, 37, 47, .72); color: #45d8e6; font: 740 5.8px Manrope, sans-serif; cursor: pointer; }

:is(.ot-network-filter-chips button, .ot-network-toolbar select, .ot-network-link-row, .ot-network-empty-state button, .ot-link-detail-tabs button, .ot-link-actions button, .ot-link-related-alarms button):focus-visible {
  outline: 2px solid #40d8e8;
  outline-offset: 2px;
}

body.light-theme :is(.ot-network-summary > div, .ot-network-toolbar select, .ot-network-filter-chips button, .ot-network-topology-card, .ot-network-link-row, .ot-network-empty-state, .ot-link-status-grid > div, .ot-link-traffic-head, .ot-link-metric, .ot-link-policy-card, .ot-link-related-alarms button) {
  border-color: rgba(57, 87, 102, .14);
  background: rgba(235, 243, 245, .88);
  color: #395966;
}
body.light-theme .ot-network-filter-chips button.active,
body.light-theme .ot-link-detail-tabs button.active { background: rgba(196, 231, 235, .9); color: #087e8b; }
body.light-theme .ot-network-search-wrap { border-color: rgba(57, 87, 102, .16); background: rgba(235, 243, 245, .92); }
body.light-theme .ot-network-search { color: #17313f; }
body.light-theme .ot-network-search::placeholder { color: #6c858f; }
body.light-theme .ot-device-popover.network-mode,
body.light-theme .ot-link-detail-tabs,
body.light-theme .ot-link-actions { background: rgba(247, 250, 251, .98); }
body.light-theme :is(.ot-network-link-copy b, .ot-link-route-hero b, .ot-link-traffic-head b, .ot-link-metric > b, .ot-link-status-grid b) { color: #17313f; }
body.light-theme .ot-link-route-hero,
body.light-theme .ot-link-policy-card { background: linear-gradient(135deg, rgba(217, 239, 239, .92), rgba(237, 244, 246, .92)); }
body.light-theme .ot-link-route-hero.review,
body.light-theme .ot-link-policy-card.review { background: linear-gradient(135deg, rgba(250, 226, 226, .92), rgba(237, 244, 246, .92)); }

@media (min-width: 761px) {
  .ot-device-popover.network-mode {
    top: 122px;
    right: 448px;
    bottom: 48px;
    left: auto;
    width: min(510px, calc(100vw - 468px));
    max-height: none;
    transform: none;
  }
}

@media (max-width: 760px) {
  .ot-device-popover.network-mode {
    right: 7px;
    bottom: calc(182px + env(safe-area-inset-bottom));
    left: 7px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 202px - env(safe-area-inset-bottom));
    transform: none;
  }
  .ot-network-filter-chips button,
  .ot-network-toolbar select,
  .ot-network-empty-state button,
  .ot-link-detail-tabs button,
  .ot-link-actions button { min-height: 44px; }
  .ot-network-toolbar { grid-template-columns: repeat(4, minmax(112px, 1fr)); }
  .ot-link-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-link-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-link-traffic-head { grid-template-columns: minmax(0, 1fr) 120px; }
}

@media (max-width: 390px) {
  .ot-network-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-network-map { height: 148px; }
  .ot-link-route-hero { grid-template-columns: 1fr; }
  .ot-link-route-hero > i { transform: rotate(90deg); text-align: center; }
  .ot-link-traffic-head { grid-template-columns: 1fr; }
  .ot-network-sparkline { height: 44px; }
  .ot-link-actions { grid-template-columns: 1fr 1fr; }
  .ot-link-actions button:first-child { grid-column: 1 / -1; }
  .ot-link-detail-tabs button { padding: 0 4px; font-size: 5.8px; }
}

/* IEC 62443 inspired zone / conduit risk view */
.ot-segment-overview { display: grid; gap: 10px; }

.ot-segment-disclaimer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(232, 200, 100, .22);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(54, 43, 19, .58), rgba(9, 17, 27, .72));
}
.ot-segment-disclaimer b { color: #e8c864; font: 760 6px Manrope, sans-serif; letter-spacing: .1em; white-space: nowrap; }
.ot-segment-disclaimer span { color: #9c9274; font: 610 6.5px Manrope, sans-serif; line-height: 1.45; }

.ot-segment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ot-segment-summary > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(124, 151, 170, .12);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(11, 22, 34, .88), rgba(7, 14, 24, .72));
}
.ot-segment-summary span { display: block; color: #607783; font: 720 5px Manrope, sans-serif; letter-spacing: .09em; }
.ot-segment-summary b { display: block; margin-top: 4px; color: #e8c864; font: 780 16px Manrope, sans-serif; }

.ot-segment-mode-chips,
.ot-segment-filter-chips {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 1px 3px;
  scrollbar-width: none;
}
.ot-segment-mode-chips::-webkit-scrollbar,
.ot-segment-filter-chips::-webkit-scrollbar { display: none; }
.ot-segment-mode-chips button,
.ot-segment-filter-chips button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 999px;
  background: rgba(8, 16, 26, .72);
  color: #6f8792;
  font: 750 5.8px Manrope, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
.ot-segment-mode-chips button.active,
.ot-segment-filter-chips button.active {
  border-color: rgba(64, 216, 232, .4);
  background: rgba(13, 55, 65, .8);
  color: #49dce9;
  box-shadow: inset 0 0 0 1px rgba(64, 216, 232, .05), 0 0 16px rgba(64, 216, 232, .08);
}

.ot-segment-search-wrap {
  min-height: 39px;
  margin: 0;
  border-color: rgba(124, 151, 170, .14);
  border-radius: 10px;
  background: rgba(6, 13, 22, .78);
}
.ot-segment-search { width: 100%; border: 0; outline: 0; background: transparent; color: #d5e3e9; font: 650 8px Manrope, sans-serif; }
.ot-segment-search::placeholder { color: #566d79; }

.ot-segment-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.ot-segment-toolbar label { display: grid; gap: 4px; min-width: 0; }
.ot-segment-toolbar label > span { color: #586f7b; font: 720 5px Manrope, sans-serif; letter-spacing: .1em; }
.ot-segment-toolbar select {
  width: 100%;
  min-height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 9px;
  background: rgba(7, 15, 25, .82);
  color: #9fb1ba;
  font: 680 6.5px Manrope, sans-serif;
  cursor: pointer;
}
.ot-segment-result { display: flex; align-items: center; justify-content: space-between; color: #59717c; font: 710 5.5px Manrope, sans-serif; letter-spacing: .08em; }
.ot-segment-result b { color: #8da3ad; font-size: 6px; }

.ot-security-zone-list,
.ot-conduit-list,
.ot-segment-gap-stack { display: grid; gap: 7px; margin-top: 9px; }
.ot-segment-gap-stack .ot-section-head { margin: 8px 2px 0; }

.ot-security-zone-card {
  position: relative;
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  grid-template-areas: "rail copy kpis" "rail coverage coverage";
  gap: 8px 10px;
  min-height: 76px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(10, 19, 30, .9), rgba(6, 13, 22, .74));
  color: #9db0b9;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ot-security-zone-card:hover { border-color: rgba(64, 216, 232, .28); background: linear-gradient(145deg, rgba(13, 30, 40, .94), rgba(6, 13, 22, .78)); }
.ot-security-zone-card.active { border-color: rgba(64, 216, 232, .52); box-shadow: inset 0 0 0 1px rgba(64, 216, 232, .08), 0 8px 22px rgba(0, 0, 0, .16); }
.ot-zone-risk-rail { grid-area: rail; width: 3px; border-radius: 4px; background: #43d6c3; box-shadow: 0 0 9px rgba(67, 214, 195, .28); }
.ot-security-zone-card.review .ot-zone-risk-rail,
.ot-security-zone-card.limited .ot-zone-risk-rail { background: #e8c864; box-shadow: 0 0 9px rgba(232, 200, 100, .28); }
.ot-security-zone-card.gap .ot-zone-risk-rail { background: #ff655d; box-shadow: 0 0 9px rgba(255, 101, 93, .28); }
.ot-security-zone-card.monitored .ot-zone-risk-rail { background: #b56be6; box-shadow: 0 0 9px rgba(181, 107, 230, .28); }
.ot-security-zone-copy { grid-area: copy; min-width: 0; }
.ot-security-zone-copy > small { display: block; color: #59717d; font: 720 5px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ot-security-zone-copy > b { display: block; margin-top: 4px; overflow: hidden; color: #d8e4e9; font: 760 8.5px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-security-zone-copy > em { display: block; margin-top: 4px; overflow: hidden; color: #6e8490; font: normal 620 5.8px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-security-zone-kpis { grid-area: kpis; display: grid; justify-items: end; gap: 3px; }
.ot-security-zone-kpis > b { color: #40d8e8; font: 770 7px Manrope, sans-serif; }
.ot-security-zone-kpis > em { color: #4ddcc8; font: normal 750 5.5px Manrope, sans-serif; }
.ot-security-zone-kpis > em.risk-high { color: #f1a848; }
.ot-security-zone-kpis > em.risk-critical { color: #ff655d; }
.ot-security-zone-kpis > small { color: #687f8a; font: 700 4.8px Manrope, sans-serif; letter-spacing: .04em; }
.ot-zone-coverage { grid-area: coverage; display: grid; grid-template-columns: minmax(50px, 1fr) auto; align-items: center; gap: 8px; }
.ot-zone-coverage > i { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(93, 119, 132, .16); }
.ot-zone-coverage > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1da6ad, #4ddcc8); }
.ot-zone-coverage > small { color: #617984; font: 700 4.8px Manrope, sans-serif; white-space: nowrap; }

.ot-conduit-row {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 9px;
  min-height: 68px;
  padding: 9px 10px;
  border: 1px solid rgba(124, 151, 170, .13);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(10, 19, 30, .9), rgba(6, 13, 22, .74));
  color: #98acb6;
  text-align: left;
  cursor: pointer;
}
.ot-conduit-row > i { width: 3px; border-radius: 4px; background: #43d6c3; box-shadow: 0 0 9px rgba(67, 214, 195, .28); }
.ot-conduit-row.review > i { background: #e8c864; box-shadow: 0 0 9px rgba(232, 200, 100, .28); }
.ot-conduit-row.gap > i { background: #ff655d; box-shadow: 0 0 9px rgba(255, 101, 93, .28); }
.ot-conduit-row.active { border-color: rgba(64, 216, 232, .5); background: linear-gradient(145deg, rgba(14, 43, 51, .9), rgba(6, 13, 22, .78)); }
.ot-conduit-row > span { min-width: 0; align-self: center; }
.ot-conduit-row > span > small { display: block; overflow: hidden; color: #617984; font: 650 5.2px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-conduit-row > span > b { display: block; margin: 4px 0; overflow: hidden; color: #d8e4e9; font: 750 8px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-conduit-row > span > b em { color: #40d8e8; font-style: normal; }
.ot-conduit-row > strong { display: grid; align-content: center; justify-items: end; min-width: 46px; }
.ot-conduit-row > strong > b { color: #e8c864; font: 780 15px Manrope, sans-serif; }
.ot-conduit-row > strong > small { color: #607883; font: 700 4.8px Manrope, sans-serif; }
.ot-conduit-row > strong > em { margin-top: 3px; color: #8297a1; font: normal 720 4.6px Manrope, sans-serif; }

.ot-internal-gap-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  min-height: 56px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 101, 93, .18);
  border-radius: 11px;
  background: rgba(48, 18, 24, .43);
  color: #a9bac2;
  text-align: left;
  cursor: pointer;
}
.ot-internal-gap-row span { grid-row: 1 / 3; align-self: center; padding: 5px 7px; border-radius: 7px; background: rgba(255, 101, 93, .1); color: #ff766e; font: 740 5px Manrope, sans-serif; }
.ot-internal-gap-row b { color: #d7e2e7; font: 720 7px Manrope, sans-serif; }
.ot-internal-gap-row small { color: #708690; font: 610 5.5px Manrope, sans-serif; }

.ot-segment-empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 22px 14px;
  border: 1px dashed rgba(124, 151, 170, .18);
  border-radius: 12px;
  color: #667e8a;
  text-align: center;
}
.ot-segment-empty-state b { color: #b5c5cc; font: 740 8.5px Manrope, sans-serif; }
.ot-segment-empty-state p { margin: 0; font: 600 6.5px Manrope, sans-serif; }
.ot-segment-empty-state button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(64, 216, 232, .24); border-radius: 999px; background: rgba(13, 55, 65, .7); color: #48dbe8; font: 730 5.8px Manrope, sans-serif; cursor: pointer; }

/* Segment zone/conduit detail drawer */
.ot-device-popover.segment-mode {
  width: 510px;
  max-height: min(74dvh, 700px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 219, 226, .24) transparent;
}
.ot-segment-detail-tabs {
  position: sticky;
  z-index: 2;
  top: -13px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 10px -4px 0;
  padding: 8px 4px;
  background: rgba(6, 12, 21, .96);
}
.ot-segment-detail-tabs button { min-height: 34px; border: 1px solid rgba(124, 151, 170, .13); border-radius: 9px; background: rgba(9, 17, 27, .74); color: #637b88; font: 740 6px Manrope, sans-serif; cursor: pointer; }
.ot-segment-detail-tabs button.active { border-color: rgba(64, 216, 232, .34); background: rgba(20, 58, 69, .78); color: #40d8e8; }
.ot-segment-detail-section { display: grid; gap: 9px; margin-top: 5px; }
.ot-segment-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(64, 216, 232, .18); border-radius: 12px; background: linear-gradient(135deg, rgba(13, 42, 48, .74), rgba(8, 16, 26, .74)); }
.ot-segment-detail-hero.gap { border-color: rgba(255, 101, 93, .26); background: linear-gradient(135deg, rgba(63, 24, 29, .62), rgba(8, 16, 26, .74)); }
.ot-segment-detail-hero span { color: #607783; font: 720 5.5px Manrope, sans-serif; letter-spacing: .09em; }
.ot-segment-detail-hero b { display: block; margin-top: 4px; color: #dce8ed; font: 760 11px Manrope, sans-serif; }
.ot-segment-detail-hero small { display: block; margin-top: 4px; color: #6a818c; font: 610 6.2px Manrope, sans-serif; }
.ot-segment-detail-hero > strong { color: #e8c864; font: 780 22px Manrope, sans-serif; text-align: right; }
.ot-segment-detail-hero > strong small { color: #6f8590; font-size: 5px; }
.ot-segment-sl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ot-segment-sl-grid > div { padding: 9px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 10px; background: rgba(9, 17, 27, .7); }
.ot-segment-sl-grid span { color: #607783; font: 720 5px Manrope, sans-serif; letter-spacing: .08em; }
.ot-segment-sl-grid b { display: block; margin-top: 5px; color: #d7e4e9; font: 760 9px Manrope, sans-serif; }
.ot-segment-detail-coverage { display: grid; gap: 5px; padding: 10px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 10px; background: rgba(9, 17, 27, .66); }
.ot-segment-detail-coverage > div { display: flex; justify-content: space-between; color: #708691; font: 680 6px Manrope, sans-serif; }
.ot-segment-detail-coverage > div b { color: #48d8ca; font-size: 7px; }
.ot-segment-detail-coverage > i { height: 4px; overflow: hidden; border-radius: 5px; background: rgba(93, 119, 132, .16); }
.ot-segment-detail-coverage > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1da6ad, #4ddcc8); }
.ot-segment-asset-list,
.ot-segment-boundary-list,
.ot-segment-control-list { display: grid; gap: 6px; }
.ot-segment-asset-row,
.ot-segment-boundary-row,
.ot-segment-control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 48px; padding: 8px 9px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 9px; background: rgba(8, 16, 26, .68); color: #9caeb7; text-align: left; }
button.ot-segment-asset-row,
button.ot-segment-boundary-row { cursor: pointer; }
:is(.ot-segment-asset-row, .ot-segment-boundary-row, .ot-segment-control-row) b { display: block; color: #d3e0e5; font: 710 7px Manrope, sans-serif; }
:is(.ot-segment-asset-row, .ot-segment-boundary-row, .ot-segment-control-row) small { display: block; margin-top: 3px; color: #69808a; font: 610 5.5px Manrope, sans-serif; }
:is(.ot-segment-asset-row, .ot-segment-boundary-row, .ot-segment-control-row) > em { padding: 5px 7px; border-radius: 999px; background: rgba(77, 220, 200, .1); color: #4ddcc8; font: normal 740 4.8px Manrope, sans-serif; white-space: nowrap; }
.ot-segment-control-row.gap > em,
.ot-segment-boundary-row.gap > em { background: rgba(255, 101, 93, .1); color: #ff766e; }
.ot-segment-control-row.partial > em { background: rgba(232, 200, 100, .1); color: #e8c864; }
.ot-segment-actions { position: sticky; z-index: 3; bottom: -13px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px -4px 0; padding: 8px 4px; background: rgba(6, 12, 21, .96); }
.ot-segment-actions button { min-height: 34px; border: 1px solid rgba(64, 216, 232, .18); border-radius: 9px; background: rgba(11, 37, 47, .72); color: #45d8e6; font: 740 5.6px Manrope, sans-serif; cursor: pointer; }
.ot-segment-passive-note { margin: 0; padding: 9px; border-radius: 9px; background: rgba(44, 30, 12, .38); color: #a58d64; font: 600 6.2px Manrope, sans-serif; line-height: 1.5; }

:is(.ot-segment-mode-chips button, .ot-segment-filter-chips button, .ot-segment-toolbar select, .ot-security-zone-card, .ot-conduit-row, .ot-internal-gap-row, .ot-segment-empty-state button, .ot-segment-detail-tabs button, .ot-segment-actions button, .ot-segment-asset-row, .ot-segment-boundary-row):focus-visible {
  outline: 2px solid #40d8e8;
  outline-offset: 2px;
}

body.light-theme :is(.ot-segment-summary > div, .ot-segment-toolbar select, .ot-segment-mode-chips button, .ot-segment-filter-chips button, .ot-security-zone-card, .ot-conduit-row, .ot-internal-gap-row, .ot-segment-empty-state, .ot-segment-sl-grid > div, .ot-segment-detail-coverage, .ot-segment-asset-row, .ot-segment-boundary-row, .ot-segment-control-row) {
  border-color: rgba(57, 87, 102, .15);
  background: rgba(235, 243, 245, .9);
  color: #395966;
}
body.light-theme .ot-segment-disclaimer { border-color: rgba(156, 122, 28, .28); background: linear-gradient(135deg, rgba(249, 240, 208, .94), rgba(237, 244, 246, .9)); }
body.light-theme .ot-segment-disclaimer b { color: #8c6913; }
body.light-theme .ot-segment-disclaimer span { color: #6e654c; }
body.light-theme .ot-segment-mode-chips button.active,
body.light-theme .ot-segment-filter-chips button.active,
body.light-theme .ot-segment-detail-tabs button.active { border-color: rgba(0, 95, 105, .35); background: #c4e7eb; color: #005f69; }
body.light-theme .ot-segment-summary b { color: #765600; }
body.light-theme .ot-security-zone-kpis > b,
body.light-theme .ot-conduit-row > span > b em { color: #006d78; }
body.light-theme .ot-security-zone-kpis > em { color: #006f5f; }
body.light-theme .ot-security-zone-kpis > em.risk-high { color: #8a4d00; }
body.light-theme .ot-security-zone-kpis > em.risk-critical { color: #a52e29; }
body.light-theme .ot-segment-search-wrap { border-color: rgba(57, 87, 102, .16); background: rgba(235, 243, 245, .94); }
body.light-theme .ot-segment-search { color: #17313f; }
body.light-theme .ot-segment-search::placeholder { color: #6c858f; }
body.light-theme :is(.ot-security-zone-copy > b, .ot-conduit-row > span > b, .ot-internal-gap-row b, .ot-segment-detail-hero b, .ot-segment-sl-grid b, .ot-segment-asset-row b, .ot-segment-boundary-row b, .ot-segment-control-row b) { color: #17313f; }
body.light-theme .ot-security-zone-card.active,
body.light-theme .ot-conduit-row.active { background: linear-gradient(145deg, rgba(207, 236, 239, .96), rgba(235, 243, 245, .92)); }
body.light-theme .ot-device-popover.segment-mode,
body.light-theme .ot-segment-detail-tabs,
body.light-theme .ot-segment-actions { background: rgba(247, 250, 251, .98); }
body.light-theme .ot-segment-detail-hero { background: linear-gradient(135deg, rgba(217, 239, 239, .94), rgba(237, 244, 246, .94)); }
body.light-theme .ot-segment-detail-hero.gap { background: linear-gradient(135deg, rgba(250, 226, 226, .94), rgba(237, 244, 246, .94)); }
body.light-theme .ot-segment-passive-note { background: rgba(245, 234, 201, .62); color: #746641; }

@media (min-width: 761px) {
  .ot-device-popover.segment-mode {
    top: 122px;
    right: 448px;
    bottom: 48px;
    left: auto;
    width: min(510px, calc(100vw - 468px));
    max-height: none;
    transform: none;
  }
}

@media (max-width: 760px) {
  .ot-device-popover.segment-mode {
    right: 7px;
    bottom: calc(182px + env(safe-area-inset-bottom));
    left: 7px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 202px - env(safe-area-inset-bottom));
    transform: none;
  }
  .ot-segment-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-segment-summary > div { min-height: 54px; }
  .ot-segment-mode-chips button,
  .ot-segment-filter-chips button,
  .ot-segment-toolbar select,
  .ot-security-zone-card,
  .ot-conduit-row,
  .ot-internal-gap-row,
  .ot-segment-empty-state button,
  .ot-segment-detail-tabs button,
  .ot-segment-actions button,
  .ot-segment-asset-row,
  .ot-segment-boundary-row { min-height: 44px; }
  .ot-segment-disclaimer { grid-template-columns: 1fr; gap: 4px; }
  .ot-segment-disclaimer b { white-space: normal; }
}

@media (max-width: 390px) {
  .ot-segment-toolbar { grid-template-columns: 1fr; }
  .ot-security-zone-card { grid-template-columns: 3px minmax(0, 1fr); grid-template-areas: "rail copy" "rail kpis" "rail coverage"; }
  .ot-security-zone-kpis { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; }
  .ot-conduit-row { grid-template-columns: 3px minmax(0, 1fr); }
  .ot-conduit-row > strong { grid-column: 2; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 6px; }
  .ot-segment-detail-tabs button { padding: 0 3px; font-size: 5.5px; }
  .ot-segment-sl-grid { grid-template-columns: 1fr 1fr; }
  .ot-segment-sl-grid > div:first-child { grid-column: 1 / -1; }
  .ot-segment-actions { grid-template-columns: 1fr 1fr; }
  .ot-segment-actions button:first-child { grid-column: 1 / -1; }
}

/* Segment detail content bindings */
.ot-segment-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 2px; }
.ot-segment-detail-heading > div span { display: block; color: #607783; font: 720 5.4px Manrope, sans-serif; letter-spacing: .09em; }
.ot-segment-detail-heading > div b { display: block; margin-top: 3px; color: #d7e4e9; font: 750 8px Manrope, sans-serif; }
.ot-segment-detail-heading > small { color: #617985; font: 620 5.5px Manrope, sans-serif; text-align: right; }
.ot-segment-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ot-segment-internal-list { display: grid; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255, 101, 93, .14); }
.ot-segment-internal-list > span { color: #ff766e; font: 740 5.2px Manrope, sans-serif; letter-spacing: .08em; }
.ot-segment-internal-list button { display: grid; gap: 3px; min-height: 44px; padding: 8px 9px; border: 1px solid rgba(255, 101, 93, .18); border-radius: 9px; background: rgba(48, 18, 24, .42); color: #d6e2e7; text-align: left; cursor: pointer; }
.ot-segment-internal-list button b { font: 720 7px Manrope, sans-serif; }
.ot-segment-internal-list button small { color: #738994; font: 610 5.5px Manrope, sans-serif; }
.ot-segment-compliance-note { margin-top: 8px; }
.ot-segment-boundary-hero.review { border-color: rgba(232, 200, 100, .24); }
.ot-segment-boundary-hero.gap { border-color: rgba(255, 101, 93, .26); background: linear-gradient(135deg, rgba(63, 24, 29, .62), rgba(8, 16, 26, .74)); }
.ot-segment-conduit-hero.gap { border-color: rgba(255, 101, 93, .25); }
:is(.ot-segment-internal-list button, .ot-segment-asset-list button, .ot-segment-boundary-list button):focus-visible { outline: 2px solid #40d8e8; outline-offset: 2px; }
body.light-theme .ot-segment-detail-heading > div b { color: #17313f; }
body.light-theme .ot-segment-internal-list button { border-color: rgba(180, 69, 61, .2); background: rgba(250, 226, 226, .85); color: #6f2c29; }
body.light-theme .ot-segment-detail-hero > strong { color: #765600; }
body.light-theme :is(.ot-segment-mode-chips button, .ot-segment-filter-chips button, .ot-segment-toolbar select, .ot-security-zone-card, .ot-conduit-row, .ot-segment-detail-tabs button, .ot-segment-actions button, .ot-segment-asset-row, .ot-segment-boundary-row, .ot-segment-internal-list button):focus-visible { outline-color: #005f69; }

.ot-segment-mode-chips button,
.ot-segment-filter-chips button,
.ot-segment-toolbar select,
.ot-segment-detail-tabs button,
.ot-segment-actions button,
.ot-segment-empty-state button { min-height: 44px; }

@media (max-width: 760px) {
  .ot-view-modes {
    right: 8px;
    left: 8px;
    max-width: calc(100vw - 16px);
    justify-content: flex-start;
    overflow-x: auto;
    transform: none;
    scrollbar-width: none;
  }
  .ot-view-modes::-webkit-scrollbar { display: none; }
  .ot-panel-toggle,
  .ot-tab,
  .ot-device-popover.segment-mode .ot-device-close { width: auto; min-width: 44px; height: 44px; min-height: 44px; }
  .ot-segment-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-segment-internal-list button { min-height: 44px; }
  .ot-device-popover.segment-mode {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top));
    right: 7px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 7px;
    width: auto;
    max-width: none;
    max-height: none;
    border-radius: 20px 20px 14px 14px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .68);
    transform: none;
  }
  .ot-segment-disclaimer b,
  .ot-segment-summary span,
  .ot-segment-result,
  .ot-segment-toolbar label > span,
  .ot-security-zone-copy > small,
  .ot-security-zone-kpis > small,
  .ot-zone-coverage > small,
  .ot-conduit-row > span > small,
  .ot-conduit-row > strong > small,
  .ot-conduit-row > strong > em,
  .ot-segment-detail-heading > div span,
  .ot-segment-detail-heading > small,
  .ot-segment-detail-hero span,
  .ot-segment-sl-grid span,
  .ot-device-popover.segment-mode .ot-device-meta dt { font-size: 10px; }
  .ot-segment-disclaimer span,
  .ot-security-zone-copy > em,
  .ot-internal-gap-row small,
  .ot-segment-detail-hero small,
  .ot-segment-asset-row small,
  .ot-segment-boundary-row small,
  .ot-segment-control-row small,
  .ot-segment-passive-note,
  .ot-device-popover.segment-mode .ot-passive-note,
  .ot-device-popover.segment-mode .ot-device-meta dd { font-size: 12px; }
  .ot-segment-mode-chips button,
  .ot-segment-filter-chips button,
  .ot-segment-detail-tabs button,
  .ot-segment-actions button { font-size: 12px; }
  .ot-security-zone-copy > b,
  .ot-conduit-row > span > b,
  .ot-segment-detail-heading > div b,
  .ot-segment-asset-row b,
  .ot-segment-boundary-row b,
  .ot-segment-control-row b { font-size: 13px; }
  .ot-security-zone-kpis > b,
  .ot-security-zone-kpis > em,
  .ot-segment-sl-grid b { font-size: 12px; }
  .ot-segment-search,
  .ot-segment-toolbar select { font-size: 16px; }
  .ot-segment-detail-hero b { font-size: 15px; }
}

/* Anomaly correlation and attack-path analysis */
.ot-anomaly-overview { display: grid; gap: 8px; }
.ot-anomaly-disclaimer { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid rgba(232, 200, 100, .22); border-radius: 10px; background: linear-gradient(135deg, rgba(48, 36, 17, .58), rgba(8, 16, 26, .7)); }
.ot-anomaly-disclaimer b { color: #e8c864; font: 760 6px Manrope, sans-serif; letter-spacing: .09em; }
.ot-anomaly-disclaimer span { color: #a69770; font: 610 5.7px Manrope, sans-serif; line-height: 1.45; }
.ot-anomaly-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ot-anomaly-summary > div { min-width: 0; padding: 8px 7px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 9px; background: rgba(8, 16, 26, .68); }
.ot-anomaly-summary span { display: block; overflow: hidden; color: #617983; font: 720 4.6px Manrope, sans-serif; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
.ot-anomaly-summary b { display: block; margin-top: 4px; color: #e8c864; font: 780 13px Manrope, sans-serif; }
.ot-anomaly-search-wrap { min-height: 36px; border-color: rgba(64, 216, 232, .14); background: rgba(6, 15, 25, .75); }
.ot-anomaly-search { color: #d9e7eb; font: 640 7px Manrope, sans-serif; }
.ot-anomaly-search::placeholder { color: #58717c; }
.ot-anomaly-filter-chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.ot-anomaly-filter-chips::-webkit-scrollbar { display: none; }
.ot-anomaly-filter-chips button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 999px; background: rgba(8, 16, 26, .7); color: #768c96; font: 740 5px Manrope, sans-serif; letter-spacing: .06em; cursor: pointer; }
.ot-anomaly-filter-chips button.active { border-color: rgba(64, 216, 232, .34); background: rgba(17, 76, 88, .62); color: #4ee0e9; }
.ot-anomaly-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ot-anomaly-toolbar label { min-width: 0; }
.ot-anomaly-toolbar label > span { display: block; margin: 0 0 4px 2px; color: #607783; font: 720 4.7px Manrope, sans-serif; letter-spacing: .07em; }
.ot-anomaly-toolbar select { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 8px; background: rgba(8, 16, 26, .76); color: #a9bbc2; font: 640 5.8px Manrope, sans-serif; }
.ot-anomaly-result { display: flex; align-items: center; gap: 7px; min-height: 24px; color: #5f7781; font: 700 5px Manrope, sans-serif; letter-spacing: .06em; }
.ot-anomaly-result b { margin-right: auto; color: #a9bbc2; font-size: 5.8px; }
.ot-anomaly-result button { min-height: 28px; border: 0; background: transparent; color: #43d8e6; font: 740 5px Manrope, sans-serif; cursor: pointer; }
.ot-attack-path-section { margin-top: 8px; }
.ot-attack-path-list,
.ot-anomaly-list { display: grid; gap: 7px; }
.ot-attack-path-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 66px; padding: 10px; border: 1px solid rgba(255, 101, 93, .18); border-radius: 11px; background: linear-gradient(145deg, rgba(49, 17, 23, .54), rgba(7, 15, 25, .75)); color: #9caeb7; text-align: left; cursor: pointer; }
.ot-attack-path-card.high { border-color: rgba(232, 200, 100, .2); background: linear-gradient(145deg, rgba(48, 36, 17, .44), rgba(7, 15, 25, .75)); }
.ot-attack-path-card.active { border-color: rgba(64, 216, 232, .42); box-shadow: inset 0 0 0 1px rgba(64, 216, 232, .12), 0 0 24px rgba(35, 183, 198, .08); }
.ot-attack-path-card span { min-width: 0; }
.ot-attack-path-card span small { display: block; color: #ff8179; font: 720 4.8px Manrope, sans-serif; letter-spacing: .07em; }
.ot-attack-path-card span b { display: block; margin-top: 4px; color: #d6e3e8; font: 720 7px Manrope, sans-serif; line-height: 1.35; }
.ot-attack-path-card span em { display: block; overflow: hidden; margin-top: 4px; color: #728893; font: normal 610 5.3px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-attack-path-card strong { display: grid; justify-items: end; gap: 2px; }
.ot-attack-path-card strong b { color: #e8c864; font: 780 12px Manrope, sans-serif; }
.ot-attack-path-card strong small { color: #657d88; font: 720 4.4px Manrope, sans-serif; }
.ot-attack-path-card strong em { margin-top: 3px; padding: 4px 6px; border-radius: 999px; background: rgba(255, 101, 93, .1); color: #ff8179; font: normal 740 4.6px Manrope, sans-serif; }
.ot-anomaly-card { position: relative; display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; grid-template-areas: "rail copy meta" "rail action action"; gap: 8px 9px; min-height: 86px; padding: 10px; overflow: hidden; border: 1px solid rgba(124, 151, 170, .12); border-radius: 11px; background: rgba(8, 16, 26, .72); }
.ot-anomaly-card.active { border-color: rgba(64, 216, 232, .38); background: linear-gradient(145deg, rgba(11, 47, 58, .64), rgba(8, 16, 26, .78)); }
.ot-anomaly-card-rail { grid-area: rail; width: 3px; height: 100%; border-radius: 999px; background: #e8c864; }
.ot-anomaly-card.high .ot-anomaly-card-rail { background: #f2a54b; }
.ot-anomaly-card.critical .ot-anomaly-card-rail { background: #ff625a; box-shadow: 0 0 12px rgba(255, 98, 90, .32); }
.ot-anomaly-copy { grid-area: copy; min-width: 0; }
.ot-anomaly-copy > span { color: #718892; font: 720 4.8px Manrope, sans-serif; letter-spacing: .07em; }
.ot-anomaly-copy > b { display: block; margin-top: 4px; color: #d6e3e8; font: 720 7px Manrope, sans-serif; line-height: 1.35; }
.ot-anomaly-copy > small,
.ot-anomaly-copy > em { display: block; overflow: hidden; margin-top: 4px; color: #718893; font: normal 610 5.3px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.ot-anomaly-card-meta { grid-area: meta; display: grid; justify-items: end; align-content: start; gap: 3px; }
.ot-anomaly-status { padding: 4px 6px; border-radius: 999px; background: rgba(232, 200, 100, .1); color: #e8c864; font: 740 4.5px Manrope, sans-serif; white-space: nowrap; }
.ot-anomaly-status.investigating { background: rgba(64, 216, 232, .1); color: #46dce8; }
.ot-anomaly-status.monitoring { background: rgba(104, 192, 153, .1); color: #69d5a4; }
.ot-anomaly-status.escalated { background: rgba(255, 101, 93, .11); color: #ff766e; }
.ot-anomaly-status.suppressed { background: rgba(116, 134, 145, .12); color: #889da6; }
.ot-anomaly-card-meta > b { color: #e8c864; font: 760 8px Manrope, sans-serif; }
.ot-anomaly-card-meta > small { color: #637a85; font: 610 4.8px Manrope, sans-serif; white-space: nowrap; }
.ot-anomaly-card > button { grid-area: action; justify-self: end; min-height: 30px; padding: 0 10px; border: 1px solid rgba(64, 216, 232, .18); border-radius: 8px; background: rgba(11, 47, 58, .62); color: #45d8e6; font: 740 5px Manrope, sans-serif; cursor: pointer; }
.ot-anomaly-empty-state { display: grid; justify-items: center; gap: 7px; padding: 24px 14px; border: 1px dashed rgba(124, 151, 170, .18); border-radius: 12px; text-align: center; }
.ot-anomaly-empty-state b { color: #d2dfe4; font: 730 8px Manrope, sans-serif; }
.ot-anomaly-empty-state p { margin: 0; color: #6b828d; font: 610 6px Manrope, sans-serif; }
.ot-anomaly-empty-state button { min-height: 34px; border: 1px solid rgba(64, 216, 232, .18); border-radius: 8px; background: rgba(11, 47, 58, .62); color: #45d8e6; font: 740 5px Manrope, sans-serif; }
.ot-device-popover.anomaly-mode { display: flex; flex-direction: column; overflow: hidden; }
.ot-anomaly-qualification { margin: 0 0 8px; padding: 8px 9px; border: 1px solid rgba(232, 200, 100, .2); border-radius: 9px; background: rgba(48, 36, 17, .42); color: #ad9a69; font: 620 5.8px Manrope, sans-serif; line-height: 1.45; }
.ot-anomaly-detail-tabs { position: sticky; z-index: 3; top: -13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 -4px 8px; padding: 8px 4px; background: rgba(6, 12, 21, .97); }
.ot-anomaly-detail-tabs button { min-height: 32px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 8px; background: rgba(8, 16, 26, .7); color: #718892; font: 740 5px Manrope, sans-serif; cursor: pointer; }
.ot-anomaly-detail-tabs button.active { border-color: rgba(64, 216, 232, .32); background: rgba(17, 76, 88, .62); color: #4ee0e9; }
#otAnomalyDetailPanel { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.ot-anomaly-detail-section { display: grid; gap: 9px; }
.ot-anomaly-detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.ot-anomaly-detail-heading span { display: block; color: #607783; font: 720 5.2px Manrope, sans-serif; letter-spacing: .08em; }
.ot-anomaly-detail-heading b { display: block; margin-top: 4px; color: #d6e3e8; font: 730 8px Manrope, sans-serif; }
.ot-anomaly-detail-heading small { color: #6c838e; font: 610 5.4px Manrope, sans-serif; text-align: right; }
.ot-anomaly-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(232, 200, 100, .22); border-radius: 12px; background: linear-gradient(135deg, rgba(49, 35, 15, .58), rgba(8, 16, 26, .74)); }
.ot-anomaly-hero.high { border-color: rgba(242, 165, 75, .24); }
.ot-anomaly-hero.critical { border-color: rgba(255, 101, 93, .28); background: linear-gradient(135deg, rgba(63, 20, 27, .64), rgba(8, 16, 26, .74)); }
.ot-anomaly-hero span { color: #ff8179; font: 740 5.2px Manrope, sans-serif; letter-spacing: .08em; }
.ot-anomaly-hero b { display: block; margin-top: 4px; color: #dbe7eb; font: 740 10px Manrope, sans-serif; line-height: 1.35; }
.ot-anomaly-hero small { display: block; margin-top: 5px; color: #718893; font: 610 5.5px Manrope, sans-serif; }
.ot-anomaly-hero > strong { color: #e8c864; font: 780 20px Manrope, sans-serif; text-align: right; }
.ot-anomaly-hero > strong small { color: #6c838e; font-size: 4.8px; }
.ot-anomaly-recommendation,
.ot-anomaly-correlation { padding: 10px; border: 1px solid rgba(64, 216, 232, .14); border-radius: 10px; background: rgba(10, 30, 40, .58); }
.ot-anomaly-recommendation span,
.ot-anomaly-correlation span { color: #45d8e6; font: 740 5px Manrope, sans-serif; letter-spacing: .08em; }
.ot-anomaly-recommendation p,
.ot-anomaly-correlation p { margin: 5px 0 0; color: #9badb5; font: 620 6.2px Manrope, sans-serif; line-height: 1.5; }
.ot-attack-path-stepper,
.ot-anomaly-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ot-attack-path-stepper li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding-bottom: 8px; }
.ot-attack-path-stepper li:not(:last-child)::after { position: absolute; top: 24px; bottom: 0; left: 11px; width: 1px; background: linear-gradient(#ff655e, rgba(255, 101, 93, .12)); content: ''; }
.ot-attack-path-stepper li > i { position: relative; z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255, 101, 93, .35); border-radius: 50%; background: #15151d; color: #ff8179; font: normal 760 6px Manrope, sans-serif; }
.ot-attack-path-stepper li.active > i { border-color: #49dce7; color: #49dce7; box-shadow: 0 0 14px rgba(73, 220, 231, .22); }
.ot-attack-path-stepper button { display: grid; gap: 3px; min-height: 54px; padding: 8px 9px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 9px; background: rgba(8, 16, 26, .7); color: #9caeb7; text-align: left; cursor: pointer; }
.ot-attack-path-stepper button span { color: #718892; font: 720 5px Manrope, sans-serif; }
.ot-attack-path-stepper button b { color: #d7e4e8; font: 720 7px Manrope, sans-serif; }
.ot-attack-path-stepper button small { color: #687f89; font: 610 5.4px Manrope, sans-serif; }
.ot-anomaly-evidence-list { display: grid; gap: 6px; }
.ot-anomaly-evidence-list > div { padding: 9px; border: 1px solid rgba(124, 151, 170, .12); border-radius: 9px; background: rgba(8, 16, 26, .68); }
.ot-anomaly-evidence-list span { color: #607783; font: 720 4.8px Manrope, sans-serif; letter-spacing: .07em; }
.ot-anomaly-evidence-list b { display: block; margin-top: 4px; color: #d4e1e5; font: 710 7px Manrope, sans-serif; line-height: 1.4; }
.ot-anomaly-evidence-list small { display: block; margin-top: 4px; color: #6c838e; font: 610 5.4px Manrope, sans-serif; }
.ot-anomaly-timeline li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(124, 151, 170, .1); }
.ot-anomaly-timeline li > i { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #e8c864; }
.ot-anomaly-timeline li.high > i { background: #f2a54b; }
.ot-anomaly-timeline li.critical > i { background: #ff625a; box-shadow: 0 0 10px rgba(255, 98, 90, .34); }
.ot-anomaly-timeline b { color: #d5e2e6; font: 710 7px Manrope, sans-serif; }
.ot-anomaly-timeline small { display: block; margin-top: 4px; color: #6b828c; font: 610 5.4px Manrope, sans-serif; }
.ot-anomaly-actions { position: sticky; z-index: 4; bottom: -13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px -4px 0; padding: 8px 4px; background: rgba(6, 12, 21, .97); }
.ot-anomaly-actions button { min-height: 34px; border: 1px solid rgba(124, 151, 170, .14); border-radius: 9px; background: rgba(8, 16, 26, .78); color: #91a5ae; font: 740 5.4px Manrope, sans-serif; cursor: pointer; }
.ot-anomaly-actions button.primary { border-color: rgba(64, 216, 232, .25); background: rgba(17, 76, 88, .68); color: #4ee0e9; }

:is(.ot-anomaly-filter-chips button, .ot-anomaly-toolbar select, .ot-anomaly-result button, .ot-attack-path-card, .ot-anomaly-card > button, .ot-anomaly-empty-state button, .ot-anomaly-detail-tabs button, .ot-attack-path-stepper button, .ot-anomaly-actions button):focus-visible { outline: 2px solid #40d8e8; outline-offset: 2px; }

body.light-theme :is(.ot-anomaly-summary > div, .ot-anomaly-toolbar select, .ot-anomaly-filter-chips button, .ot-attack-path-card, .ot-anomaly-card, .ot-anomaly-empty-state, .ot-attack-path-stepper button, .ot-anomaly-evidence-list > div) { border-color: rgba(57, 87, 102, .15); background: rgba(235, 243, 245, .92); color: #395966; }
body.light-theme .ot-anomaly-disclaimer { border-color: rgba(156, 122, 28, .26); background: linear-gradient(135deg, rgba(249, 240, 208, .94), rgba(237, 244, 246, .92)); }
body.light-theme .ot-anomaly-disclaimer b { color: #8c6913; }
body.light-theme .ot-anomaly-disclaimer span { color: #6e654c; }
body.light-theme .ot-anomaly-search-wrap { border-color: rgba(57, 87, 102, .16); background: rgba(235, 243, 245, .94); }
body.light-theme .ot-anomaly-search { color: #17313f; }
body.light-theme .ot-anomaly-filter-chips button.active,
body.light-theme .ot-anomaly-detail-tabs button.active { border-color: rgba(0, 95, 105, .35); background: #c4e7eb; color: #005f69; }
body.light-theme :is(.ot-anomaly-copy > b, .ot-attack-path-card span b, .ot-anomaly-detail-heading b, .ot-anomaly-hero b, .ot-attack-path-stepper button b, .ot-anomaly-evidence-list b, .ot-anomaly-timeline b, .ot-anomaly-empty-state b) { color: #17313f; }
body.light-theme .ot-device-popover.anomaly-mode,
body.light-theme .ot-anomaly-detail-tabs,
body.light-theme .ot-anomaly-actions { background: rgba(247, 250, 251, .98); }
body.light-theme .ot-anomaly-qualification { border-color: rgba(156, 122, 28, .24); background: rgba(245, 234, 201, .7); color: #746641; }
body.light-theme .ot-anomaly-hero { background: linear-gradient(135deg, rgba(247, 236, 204, .92), rgba(237, 244, 246, .94)); }
body.light-theme .ot-anomaly-hero.critical { background: linear-gradient(135deg, rgba(250, 226, 226, .94), rgba(237, 244, 246, .94)); }
body.light-theme :is(.ot-anomaly-recommendation, .ot-anomaly-correlation) { border-color: rgba(0, 95, 105, .18); background: rgba(216, 239, 241, .74); }

@media (min-width: 761px) {
  .ot-device-popover.anomaly-mode { top: 122px; right: 448px; bottom: 48px; left: auto; width: min(560px, calc(100vw - 468px)); max-height: none; transform: none; }
}

@media (max-width: 760px) {
  .ot-device-popover.anomaly-mode { position: fixed; top: calc(72px + env(safe-area-inset-top)); right: 7px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 7px; width: auto; max-width: none; max-height: none; border-radius: 20px 20px 14px 14px; box-shadow: 0 28px 90px rgba(0, 0, 0, .68); transform: none; }
  .ot-anomaly-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-anomaly-summary > div { min-height: 54px; }
  .ot-anomaly-toolbar { grid-template-columns: 1fr; }
  .ot-anomaly-filter-chips button,
  .ot-anomaly-toolbar select,
  .ot-attack-path-card,
  .ot-anomaly-card > button,
  .ot-anomaly-empty-state button,
  .ot-anomaly-detail-tabs button,
  .ot-attack-path-stepper button,
  .ot-anomaly-actions button,
  .ot-device-popover.anomaly-mode .ot-device-close { min-width: 44px; min-height: 44px; }
  .ot-anomaly-disclaimer b,
  .ot-anomaly-summary span,
  .ot-anomaly-toolbar label > span,
  .ot-anomaly-result,
  .ot-anomaly-copy > span,
  .ot-anomaly-detail-heading span,
  .ot-anomaly-evidence-list span { font-size: 10px; }
  .ot-anomaly-disclaimer span,
  .ot-anomaly-copy > small,
  .ot-anomaly-copy > em,
  .ot-anomaly-card-meta > small,
  .ot-anomaly-qualification,
  .ot-anomaly-detail-heading small,
  .ot-anomaly-recommendation p,
  .ot-anomaly-correlation p,
  .ot-attack-path-stepper button small,
  .ot-anomaly-evidence-list small,
  .ot-anomaly-timeline small { font-size: 12px; }
  .ot-anomaly-search,
  .ot-anomaly-toolbar select { font-size: 16px; }
  .ot-anomaly-filter-chips button,
  .ot-anomaly-card > button,
  .ot-anomaly-detail-tabs button,
  .ot-anomaly-actions button { font-size: 12px; }
  .ot-anomaly-copy > b,
  .ot-attack-path-card span b,
  .ot-anomaly-detail-heading b,
  .ot-attack-path-stepper button b,
  .ot-anomaly-evidence-list b,
  .ot-anomaly-timeline b { font-size: 13px; }
  .ot-anomaly-hero b { font-size: 15px; }
}

@media (max-width: 390px) {
  .ot-anomaly-card { grid-template-columns: 3px minmax(0, 1fr); grid-template-areas: "rail copy" "rail meta" "rail action"; }
  .ot-anomaly-card-meta { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 7px; }
  .ot-anomaly-card > button { justify-self: stretch; }
  .ot-anomaly-detail-tabs button { padding: 0 3px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-anomaly-card-rail,
  .ot-attack-path-stepper li > i { box-shadow: none !important; }
}