/* Themed A/B buttons on MCB */
 .point-A,
 .point-B,
 .point-P,
 .point-Q,
 .point-R,
 .point-I,
 .point-J,
 .point-L,
 .point-M,
 .point-C,
 .point-D,
 .point-K,
 .point-Y,
 .point-E,
 .point-F,
 .point-G,
 .point-H
 {
   position: absolute;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   border: 2px solid rgba(17, 17, 17, 0.45);
   background: linear-gradient(145deg, #fdf5e6, #e5d5bc 55%, #cdb89d);
   box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.6),
     inset 0 -3px 8px rgba(0, 0, 0, 0.12),
     0 8px 16px rgba(0, 0, 0, 0.18);
   color: #2f241a;
   font-weight: 700;
   letter-spacing: 0.08em;
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 }
 .point-A:hover,
 .point-B:hover,
 .point-P:hover,
 .point-Q:hover,
 .point-R:hover,
 /* .point-I:hover,
 .point-J:hover,
 .point-L:hover,
 .point-M:hover,
 .point-C:hover,
 .point-D:hover, */
 .point-K:hover,
 .point-Y:hover,
 .point-E:hover,
 .point-F:hover,
 .point-G:hover,
 .point-H:hover
 
{
   transform: translateY(-2px);
   box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.7),
     inset 0 -3px 8px rgba(0, 0, 0, 0.14),
     0 12px 18px rgba(0, 0, 0, 0.22);
   filter: saturate(1.04);
 }


 .point-A:active,
 .point-B:active
 {
   transform: translateY(0);
   box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.55),
     inset 0 -3px 8px rgba(0, 0, 0, 0.12),
     0 6px 12px rgba(0, 0, 0, 0.18);
 }

 #pointA {
   position: absolute;
   left: 48px;
   top: 200px;
 }

 #pointB {
   position: absolute;
   left: 83px;
   top:200px;
 }
 #pointP {
   position: absolute;
   left:55px;
   top:235px;
 }
 #pointQ {
   position: absolute;
   left:95px;
   top:235px;
 }
 #pointR {
   position: absolute;
   left:135px;
   top:235px;
 }
/* Meter connectors (I, J, L, M) and generator connectors (C, D)
   Align the hidden jsPlumb endpoints with the visible buttons so
   wires originate exactly from the button centers. */
#pointI {
  position: absolute;
  left:53px;
  top: 195px;
  transform: translate(-50%, -50%);
}

#pointJ {
  position: absolute;
  left: 165px;
  top: 195px;
  transform: translate(-50%, -50%);
}

#pointL {
  position: absolute;
  left: 300px;
  top: 198px;
  transform: translate(-50%, -50%);
  transform-box: border-box;
  z-index: 9999;
  pointer-events: auto;
  will-change: auto;
}

#pointM {
  position: absolute;
  left: 420px;
  top: 198px;
  transform: translate(-50%, -50%);
  transform-box: border-box;
  z-index: 9999;
  pointer-events: auto;
  will-change: auto;
}

#pointC {
  position: absolute;
  left: 15px;
  top: 15px;
  transform: translate(-50%, -50%);
}

#pointD {
  position: absolute;
  left: 227px;
  top: 15px;
  transform: translate(-50%, -50%);
}

  #pointK {
   position: absolute;
   left:15px;
   top:226px;
 
 }

  #pointY {
   position: absolute;
   left:226px;
   top:226px;
 
 }
 #pointE {
   position: absolute;
   left:40px;
   top:74px;
 
 }

 #pointF {
   position: absolute;
   left:215px;
   top:74px;
 
 }

#pointG {
   position: absolute;
   left:38px;
   top:9px;
 
 }

#pointH {
   position: absolute;
   left:213px;
   top:9px;
 
 }


 

 

 .point-A {
   position: absolute;
   width: 24px;
   height: 24px;
   left: 35px;
   top: 218px;
   font-weight: bold;
 }

 .point-B {
   font-weight: bold;
   position: absolute;
   width: 24px;
   height: 24px;
   left: 70px;
   top: 218px;
 }
.point-P {
   position: absolute;
   width: 24px;
   height: 24px;
   left: 43px;
   top: 258px;
   font-weight: bold;
 }
 .point-Q{
   position: absolute;
   width: 24px;
   height: 24px;
   left:83px;
   top: 258px;
   font-weight: bold;
 }
 .point-R{
   position: absolute;
   width: 24px;
   height: 24px;
   left: 122px;
   top: 258px;
   font-weight: bold;
 }
.point-I{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 49px;
  top: 220px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}
.point-J{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 160px;
  top: 220px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}
.point-L{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 298px;
  top: 225px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}
.point-M{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 415px;
  top: 225px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

.point-C{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 40px;
  top: 15px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

.point-D{
  position: absolute;
  width: 24px;
  height: 24px;
  left: 202px;
  top: 15px;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

 .point-K{
   position: absolute;
   width: 24px;
   height: 24px;
   left:24px;
   top:212px;
   font-weight: bold;
 }

 .point-Y{
   position: absolute;
   width: 24px;
   height: 24px;
   left:185px;
   top:211px;
   font-weight: bold;
 }

 .point-E{
   position: absolute;
   width: 24px;
   height: 24px;
   left:28px;
   top:90px;
   font-weight: bold;
 }
  
 .point-F{
   position: absolute;
   width: 24px;
   height: 24px;
   left:203px;
   top:90px;
   font-weight: bold;
 }

  .point-G{
   position: absolute;
   width: 24px;
   height: 24px;
   left:27px;
   top:30px;
   font-weight: bold;
 }
   .point-H{
   position: absolute;
   width: 24px;
   height: 24px;
   left:203px;
   top:30px;
   font-weight: bold;
 }
  
/* Keep meter endpoints and buttons aligned when the panel scales */
#pointI, #pointJ, #pointL, #pointM {

  width: clamp(10px, 1.6vw, 14px);
  height: clamp(10px, 1.6vw, 14px);
  transform: translate(-50%, -50%);
}

.point-I, .point-J, .point-L, .point-M {
  width: clamp(18px, 3vw, 24px);
  height: clamp(18px, 3vw, 24px);
  transform: translate(-50%, -50%);
}



.point-I {
  left: 8.5%;
  top: 98%;
}
#pointI {
  left: 8.8%;
  top: 85%;
}



.point-J {
  left: 20.9%;
  top: 98%;
}
#pointJ {
  left: 21.3%;
  top: 85%;
}



.point-L {
  left: 42.3%;
  top: 100%;
}
#pointL {
  left: 42.5%;
  top: 85%;
}



.point-M {
  left: 55.3%;
  top: 100%;
}
#pointM {
  left: 55.5%;
  top: 85%;
}