.cn-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  .cn-hero {
    text-align: center;
    margin-bottom: 32px;
  }

  .cn-hero h1 {
    font-size: 2.4rem;
    margin-bottom: 10px;
  }

  .cn-hero p {
    font-size: 1.1rem;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .cn-breadcrumb {
    margin-bottom: 25px;
    font-size: 0.95rem;
  }

  .cn-breadcrumb a {
    text-decoration: none;
    font-weight: bold;
  }

  .cn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
  }

  .cn-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .cn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  }

  .cn-card-image {
    height: 150px;
    background: linear-gradient(135deg, #1d3557, #457b9d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
  }

  .cn-card-body {
    padding: 20px;
  }

  .cn-card-body h2 {
    margin: 0 0 8px;
    font-size: 1.3rem;
  }

  .cn-card-body p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.95rem;
  }

  .cn-note {
    margin-top: 35px;
    padding: 18px;
    border-left: 5px solid #1d3557;
    background: #f5f8fb;
    line-height: 1.6;
  }

  .cn-room-wrap {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 24px;
    align-items: start;
  }

  .cn-room-visual {
    position: relative;
    min-height: 430px;
    border-radius: 18px;
    border: 1px solid #ddd;
    overflow: hidden;
    background:
      linear-gradient(to bottom, #eef5fb 0%, #eef5fb 62%, #d7c2a6 62%, #d7c2a6 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .cn-bed {
    position: absolute;
    left: 12%;
    bottom: 16%;
    width: 42%;
    height: 26%;
    border-radius: 14px;
    background: #ffffff;
    border: 4px solid #1d3557;
  }

  .cn-bed:before {
    content: "";
    position: absolute;
    left: 6%;
    top: 8%;
    width: 28%;
    height: 30%;
    border-radius: 8px;
    background: #dbeafe;
    border: 2px solid #1d3557;
  }

  .cn-door {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 20%;
    height: 46%;
    background: #8b5e3c;
    border-radius: 12px 12px 0 0;
  }

  .cn-hotspot {
    position: absolute;
    border: none;
    border-radius: 999px;
    padding: 10px 13px;
    font-weight: bold;
    cursor: pointer;
    background: #c62828;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

  .cn-hotspot:hover {
    transform: scale(1.05);
  }

  .cn-panel {
    border-radius: 18px;
    border: 1px solid #ddd;
    background: #fff;
    padding: 22px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }

  .cn-panel h2 {
    margin-top: 0;
  }

  .cn-panel ul {
    padding-left: 20px;
  }

  .cn-device-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .cn-device-buttons button {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    background: #1d3557;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }

  @media (max-width: 850px) {
    .cn-room-wrap {
      grid-template-columns: 1fr;
    }
  }
/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 1: Residential Bedroom
========================================================= */

.cn-room-visual {
  position: relative;
}

/* Hide decorative scene objects by default */
.cn-visual-scene > div {
  display: none;
}

/* Bedroom background */
.cn-room-visual.cn-room-bedroom {
  background:
    linear-gradient(to bottom, #dfefff 0%, #dfefff 58%, #caa982 58%, #caa982 100%);
}

/* Bedroom scene container */
.cn-room-bedroom .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Back wall trim */
.cn-room-bedroom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

/* Window */
.cn-room-bedroom .cn-bedroom-window {
  display: block;
  position: absolute;
  top: 15%;
  left: 12%;
  width: 22%;
  height: 24%;
  border: 5px solid #1d3557;
  border-radius: 10px;
  background: linear-gradient(135deg, #bde0fe, #ffffff);
  z-index: 2;
}

.cn-room-bedroom .cn-bedroom-window span {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #1d3557;
  transform: translateX(-50%);
}

.cn-room-bedroom .cn-bedroom-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: #1d3557;
  transform: translateY(-50%);
}

/* Bed */
.cn-room-bedroom .cn-bedroom-bed {
  display: block;
  position: absolute;
  left: 16%;
  bottom: 15%;
  width: 45%;
  height: 28%;
  border: 5px solid #1d3557;
  border-radius: 18px;
  background: #f8fafc;
  z-index: 3;
}

.cn-room-bedroom .cn-bedroom-pillow {
  display: block;
  position: absolute;
  left: 7%;
  top: 10%;
  width: 27%;
  height: 30%;
  border-radius: 10px;
  border: 3px solid #1d3557;
  background: #dbeafe;
}

.cn-room-bedroom .cn-bedroom-blanket {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 66%;
  height: 70%;
  border-radius: 16px 0 12px 0;
  background: linear-gradient(135deg, #457b9d, #1d3557);
  opacity: 0.92;
}

/* Nightstand */
.cn-room-bedroom .cn-bedroom-nightstand {
  display: block;
  position: absolute;
  left: 63%;
  bottom: 16%;
  width: 10%;
  height: 18%;
  border-radius: 8px;
  border: 4px solid #1d3557;
  background: #8b5e3c;
  z-index: 3;
}

/* Door */
.cn-room-bedroom .cn-bedroom-door {
  display: block;
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 18%;
  height: 48%;
  border-radius: 14px 14px 0 0;
  border: 5px solid #5c3b23;
  background: #9b6a43;
  z-index: 2;
}

.cn-room-bedroom .cn-bedroom-door span {
  display: block;
  position: absolute;
  right: 14%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #facc15;
}

/* Visual device shapes */
.cn-room-bedroom .cn-bedroom-smoke-device {
  display: block;
  position: absolute;
  top: 8%;
  left: 50%;
  width: 34px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 3;
}

.cn-room-bedroom .cn-bedroom-horn-strobe {
  display: block;
  position: absolute;
  top: 30%;
  right: 14%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 3;
}

.cn-room-bedroom .cn-bedroom-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

.cn-room-bedroom .cn-bedroom-co-device {
  display: block;
  position: absolute;
  left: 13%;
  top: 46%;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 3;
}

.cn-room-bedroom .cn-bedroom-co-device::after {
  content: "CO";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #1d3557;
}

/* Hotspots stay above the drawing */
.cn-hotspot {
  z-index: 10;
}

/* Bedroom hotspot color tweak */
.cn-room-bedroom .cn-hotspot {
  background: #c62828;
}

.cn-room-bedroom .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Classroom Final Visibility + Layout Fix
========================================================= */

.cn-room-classroom .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-classroom .cn-classroom-board,
.cn-room-classroom .cn-classroom-teacher-desk,
.cn-room-classroom .cn-classroom-desk,
.cn-room-classroom .cn-classroom-door,
.cn-room-classroom .cn-classroom-smoke-device,
.cn-room-classroom .cn-classroom-horn-strobe,
.cn-room-classroom .cn-classroom-coverage-ring {
  display: block !important;
  position: absolute;
}

/* Whiteboard */
.cn-room-classroom .cn-classroom-board {
  top: 15%;
  left: 9%;
  width: 34%;
  height: 22%;
  border: 5px solid #1d3557;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #dbeafe);
  z-index: 2;
}

.cn-room-classroom .cn-classroom-board::after {
  content: "BOARD";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(29, 53, 87, 0.35);
}

/* Teacher desk */
.cn-room-classroom .cn-classroom-teacher-desk {
  top: 43%;
  left: 14%;
  width: 24%;
  height: 12%;
  border-radius: 10px;
  border: 4px solid #1d3557;
  background: #9b6a43;
  z-index: 3;
}

/* Student desks */
.cn-room-classroom .cn-classroom-desk {
  width: 13%;
  height: 11%;
  border-radius: 8px;
  border: 4px solid #1d3557;
  background: #f8fafc;
  z-index: 3;
}

.cn-room-classroom .cn-classroom-desk-1 {
  left: 18%;
  bottom: 24%;
}

.cn-room-classroom .cn-classroom-desk-2 {
  left: 36%;
  bottom: 24%;
}

.cn-room-classroom .cn-classroom-desk-3 {
  left: 54%;
  bottom: 24%;
}

.cn-room-classroom .cn-classroom-desk-4 {
  left: 18%;
  bottom: 8%;
}

.cn-room-classroom .cn-classroom-desk-5 {
  left: 36%;
  bottom: 8%;
}

.cn-room-classroom .cn-classroom-desk-6 {
  left: 54%;
  bottom: 8%;
}

/* Door */
.cn-room-classroom .cn-classroom-door {
  right: 8%;
  bottom: 0;
  width: 17%;
  height: 46%;
  border-radius: 14px 14px 0 0;
  border: 5px solid #5c3b23;
  background: #9b6a43;
  z-index: 2;
}

.cn-room-classroom .cn-classroom-door span {
  display: block;
  position: absolute;
  right: 14%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #facc15;
}

/* Smoke detector */
.cn-room-classroom .cn-classroom-smoke-device {
  top: 8%;
  left: 52%;
  width: 34px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 3;
}

/* Horn/strobe */
.cn-room-classroom .cn-classroom-horn-strobe {
  top: 27%;
  right: 13%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 3;
}

.cn-room-classroom .cn-classroom-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Coverage ring */
.cn-room-classroom .cn-classroom-coverage-ring {
  top: 42%;
  left: 36%;
  width: 36%;
  height: 36%;
  border: 4px dashed rgba(198, 40, 40, 0.55);
  border-radius: 50%;
  z-index: 2;
}

/* Keep hotspots above the drawing */
.cn-room-classroom .cn-hotspot {
  z-index: 10;
}
/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 3: Industrial Fire Pump Room
========================================================= */

.cn-room-visual.cn-room-fire-pump-room {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 58%, #b8c0c8 58%, #b8c0c8 100%);
}

.cn-room-fire-pump-room .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-fire-pump-room::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-fire-pump-room .cn-pump-back-pipe,
.cn-room-fire-pump-room .cn-pump-floor-drain,
.cn-room-fire-pump-room .cn-pump-controller,
.cn-room-fire-pump-room .cn-pump-power-panel,
.cn-room-fire-pump-room .cn-pump-motor,
.cn-room-fire-pump-room .cn-pump-body,
.cn-room-fire-pump-room .cn-pump-base,
.cn-room-fire-pump-room .cn-pump-main-pipe,
.cn-room-fire-pump-room .cn-pump-riser,
.cn-room-fire-pump-room .cn-pump-valve,
.cn-room-fire-pump-room .cn-pump-tamper-box,
.cn-room-fire-pump-room .cn-pump-gauge {
  display: block !important;
  position: absolute;
}

/* Rear pipe */
.cn-room-fire-pump-room .cn-pump-back-pipe {
  left: 8%;
  top: 37%;
  width: 82%;
  height: 26px;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 2;
}

/* Fire pump controller cabinet */
.cn-room-fire-pump-room .cn-pump-controller {
  left: 10%;
  top: 14%;
  width: 22%;
  height: 33%;
  border-radius: 10px;
  border: 5px solid #7f1d1d;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: white;
  z-index: 4;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-fire-pump-room .cn-pump-controller span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* Power panel */
.cn-room-fire-pump-room .cn-pump-power-panel {
  right: 10%;
  top: 14%;
  width: 18%;
  height: 28%;
  border-radius: 10px;
  border: 5px solid #1d3557;
  background: #334155;
  color: white;
  z-index: 4;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-fire-pump-room .cn-pump-power-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* Pump base */
.cn-room-fire-pump-room .cn-pump-base {
  left: 31%;
  bottom: 14%;
  width: 40%;
  height: 9%;
  border-radius: 10px;
  background: #475569;
  border: 4px solid #1d3557;
  z-index: 3;
}

/* Pump motor */
.cn-room-fire-pump-room .cn-pump-motor {
  left: 33%;
  bottom: 24%;
  width: 20%;
  height: 19%;
  border-radius: 18px;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  border: 5px solid #1d3557;
  z-index: 4;
}

.cn-room-fire-pump-room .cn-pump-motor::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: 25%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
}

/* Pump body */
.cn-room-fire-pump-room .cn-pump-body {
  left: 54%;
  bottom: 23%;
  width: 17%;
  height: 21%;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 5px solid #1d3557;
  z-index: 4;
}

/* Main pipe out of pump */
.cn-room-fire-pump-room .cn-pump-main-pipe {
  left: 67%;
  bottom: 32%;
  width: 20%;
  height: 22px;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 3;
}

/* Vertical riser */
.cn-room-fire-pump-room .cn-pump-riser {
  right: 14%;
  bottom: 32%;
  width: 24px;
  height: 43%;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 3;
}

/* Valve */
.cn-room-fire-pump-room .cn-pump-valve {
  left: 45%;
  top: 39%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #facc15;
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-fire-pump-room .cn-pump-valve::before,
.cn-room-fire-pump-room .cn-pump-valve::after {
  content: "";
  position: absolute;
  background: #1d3557;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cn-room-fire-pump-room .cn-pump-valve::before {
  width: 80%;
  height: 6px;
}

.cn-room-fire-pump-room .cn-pump-valve::after {
  width: 6px;
  height: 80%;
}

/* Tamper switch box */
.cn-room-fire-pump-room .cn-pump-tamper-box {
  left: 52%;
  top: 44%;
  width: 38px;
  height: 28px;
  border-radius: 7px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Gauge */
.cn-room-fire-pump-room .cn-pump-gauge {
  right: 22%;
  top: 35%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-fire-pump-room .cn-pump-gauge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 4px;
  height: 15px;
  background: #c62828;
  transform-origin: bottom center;
  transform: rotate(40deg);
}

/* Floor drain */
.cn-room-fire-pump-room .cn-pump-floor-drain {
  right: 9%;
  bottom: 8%;
  width: 58px;
  height: 18px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    #1d3557,
    #1d3557 5px,
    #94a3b8 5px,
    #94a3b8 10px
  );
  border: 3px solid #1d3557;
  z-index: 4;
}

/* Fire pump room hotspots */
.cn-room-fire-pump-room .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-fire-pump-room .cn-hotspot:hover {
  transform: scale(1.06);
}

/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 4: K-12 Gymnasium
========================================================= */

.cn-room-visual.cn-room-gymnasium {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 55%, #c99455 55%, #c99455 100%);
}

.cn-room-gymnasium .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-gymnasium::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-gymnasium .cn-gym-back-wall,
.cn-room-gymnasium .cn-gym-scoreboard,
.cn-room-gymnasium .cn-gym-basketball-hoop,
.cn-room-gymnasium .cn-gym-court-line,
.cn-room-gymnasium .cn-gym-court-circle,
.cn-room-gymnasium .cn-gym-floor-key,
.cn-room-gymnasium .cn-gym-bleacher,
.cn-room-gymnasium .cn-gym-beam-device-left,
.cn-room-gymnasium .cn-gym-beam-device-right,
.cn-room-gymnasium .cn-gym-beam-path,
.cn-room-gymnasium .cn-gym-horn-strobe,
.cn-room-gymnasium .cn-gym-speaker,
.cn-room-gymnasium .cn-gym-ceiling-marker {
  display: block !important;
  position: absolute;
}

/* Scoreboard */
.cn-room-gymnasium .cn-gym-scoreboard {
  top: 13%;
  left: 42%;
  width: 18%;
  height: 16%;
  border-radius: 10px;
  border: 5px solid #1d3557;
  background: #111827;
  color: #facc15;
  z-index: 3;
}

.cn-room-gymnasium .cn-gym-scoreboard span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Basketball hoop */
.cn-room-gymnasium .cn-gym-basketball-hoop {
  top: 28%;
  left: 47%;
  width: 8%;
  height: 8%;
  border-radius: 8px;
  border: 4px solid #1d3557;
  background: #ffffff;
  z-index: 3;
}

.cn-room-gymnasium .cn-gym-basketball-hoop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 42px;
  height: 18px;
  border: 5px solid #ef4444;
  border-top: none;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.cn-room-gymnasium .cn-gym-basketball-hoop span {
  position: absolute;
  left: 50%;
  bottom: -48px;
  width: 4px;
  height: 28px;
  background: rgba(29, 53, 87, 0.35);
  transform: translateX(-50%);
}

/* Court markings */
.cn-room-gymnasium .cn-gym-court-line-center {
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 45%;
  background: rgba(255,255,255,0.85);
  z-index: 2;
}

.cn-room-gymnasium .cn-gym-court-circle {
  left: 39%;
  bottom: 18%;
  width: 24%;
  height: 24%;
  border: 5px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  z-index: 2;
}

.cn-room-gymnasium .cn-gym-floor-key {
  right: 8%;
  bottom: 0;
  width: 22%;
  height: 28%;
  border: 5px solid rgba(255,255,255,0.85);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  z-index: 2;
}

/* Bleachers */
.cn-room-gymnasium .cn-gym-bleacher {
  left: 8%;
  height: 7%;
  border-radius: 8px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 3;
}

.cn-room-gymnasium .cn-gym-bleacher-1 {
  bottom: 10%;
  width: 22%;
}

.cn-room-gymnasium .cn-gym-bleacher-2 {
  bottom: 18%;
  width: 25%;
}

.cn-room-gymnasium .cn-gym-bleacher-3 {
  bottom: 26%;
  width: 28%;
}

/* Beam detector pair */
.cn-room-gymnasium .cn-gym-beam-device-left {
  top: 18%;
  left: 12%;
  width: 36px;
  height: 24px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-gymnasium .cn-gym-beam-device-right {
  top: 18%;
  right: 12%;
  width: 36px;
  height: 24px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-gymnasium .cn-gym-beam-path {
  top: 20%;
  left: 16%;
  right: 16%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.8),
    rgba(198, 40, 40, 0.8) 12px,
    transparent 12px,
    transparent 24px
  );
  z-index: 3;
}

/* Horn/strobe */
.cn-room-gymnasium .cn-gym-horn-strobe {
  top: 31%;
  right: 13%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 4;
}

.cn-room-gymnasium .cn-gym-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Speaker / mass notification */
.cn-room-gymnasium .cn-gym-speaker {
  left: 43%;
  bottom: 21%;
  width: 58px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-gymnasium .cn-gym-speaker::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid #1d3557;
}

.cn-room-gymnasium .cn-gym-speaker::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 11px;
  width: 14px;
  height: 14px;
  border-top: 4px solid #c62828;
  border-right: 4px solid #c62828;
  transform: rotate(45deg);
}

/* Ceiling height marker */
.cn-room-gymnasium .cn-gym-ceiling-marker {
  top: 7%;
  left: 46%;
  width: 54px;
  height: 54px;
  border-left: 5px solid #1d3557;
  border-top: 5px solid #1d3557;
  z-index: 4;
}

.cn-room-gymnasium .cn-gym-ceiling-marker::after {
  content: "HIGH";
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 0.65rem;
  font-weight: 900;
  color: #1d3557;
}

/* Gym hotspots */
.cn-room-gymnasium .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-gymnasium .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 5: Healthcare Corridor
========================================================= */

.cn-room-visual.cn-room-corridor.cn-app-healthcare {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 48%, #d8dee9 48%, #d8dee9 100%);
}

.cn-room-corridor.cn-app-healthcare .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-corridor.cn-app-healthcare::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-corridor-hall,
.cn-room-corridor.cn-app-healthcare .cn-hc-room-door,
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-door-left,
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-door-right,
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-boundary,
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-detector,
.cn-room-corridor.cn-app-healthcare .cn-hc-horn-strobe,
.cn-room-corridor.cn-app-healthcare .cn-hc-door-holder,
.cn-room-corridor.cn-app-healthcare .cn-hc-exit-sign {
  display: block !important;
  position: absolute;
}

/* Corridor floor path */
.cn-room-corridor.cn-app-healthcare .cn-hc-corridor-hall {
  left: 5%;
  right: 5%;
  bottom: 11%;
  height: 34%;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Patient room doors */
.cn-room-corridor.cn-app-healthcare .cn-hc-room-door {
  top: 16%;
  width: 15%;
  height: 30%;
  border-radius: 12px 12px 0 0;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  z-index: 3;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-room-door span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.85rem;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-room-door::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 53%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #facc15;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-room-door-1 {
  left: 8%;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-room-door-2 {
  left: 29%;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-room-door-3 {
  left: 50%;
}

/* Smoke doors */
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-door-left,
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-door-right {
  bottom: 11%;
  width: 8%;
  height: 35%;
  background: rgba(255,255,255,0.82);
  border: 5px solid #1d3557;
  z-index: 4;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-door-left {
  left: 72%;
  border-radius: 12px 0 0 12px;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-door-right {
  left: 80%;
  border-radius: 0 12px 12px 0;
}

/* Smoke compartment boundary marker */
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-boundary {
  left: 75%;
  top: 9%;
  bottom: 8%;
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 14px,
    transparent 14px,
    transparent 26px
  );
  z-index: 5;
}

/* Smoke detector */
.cn-room-corridor.cn-app-healthcare .cn-hc-smoke-detector {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-corridor.cn-app-healthcare .cn-hc-horn-strobe {
  top: 20%;
  right: 13%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Door holder / release */
.cn-room-corridor.cn-app-healthcare .cn-hc-door-holder {
  top: 42%;
  left: 21%;
  width: 38px;
  height: 26px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

.cn-room-corridor.cn-app-healthcare .cn-hc-door-holder::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 8px;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: #1d3557;
}

/* Exit sign */
.cn-room-corridor.cn-app-healthcare .cn-hc-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* Healthcare corridor hotspots */
.cn-room-corridor.cn-app-healthcare .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-corridor.cn-app-healthcare .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Industrial Warehouse Floor
   Note: detailed warehouse objects are currently inline-styled
   in room-template.php to avoid CSS conflicts.
========================================================= */

.cn-room-visual.cn-room-warehouse-floor.cn-app-industrial {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8a27d 56%, #b8a27d 100%);
}

.cn-room-warehouse-floor.cn-app-industrial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-warehouse-floor.cn-app-industrial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-warehouse-floor.cn-app-industrial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-warehouse-floor.cn-app-industrial .cn-hotspot:hover {
  transform: scale(1.06);
}

/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 7: Residential Kitchen
========================================================= */

.cn-room-visual.cn-room-kitchen {
  background:
    linear-gradient(to bottom, #fff7ed 0%, #fff7ed 58%, #d6b98f 58%, #d6b98f 100%);
}

.cn-room-kitchen .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-kitchen::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-kitchen .cn-kit-window,
.cn-room-kitchen .cn-kit-counter,
.cn-room-kitchen .cn-kit-stove,
.cn-room-kitchen .cn-kit-sink,
.cn-room-kitchen .cn-kit-fridge,
.cn-room-kitchen .cn-kit-smoke-device,
.cn-room-kitchen .cn-kit-heat-device,
.cn-room-kitchen .cn-kit-co-device,
.cn-room-kitchen .cn-kit-nuisance-zone {
  display: block !important;
  position: absolute;
}

/* Window */
.cn-room-kitchen .cn-kit-window {
  top: 13%;
  right: 12%;
  width: 22%;
  height: 22%;
  border: 5px solid #1d3557;
  border-radius: 10px;
  background: linear-gradient(135deg, #bde0fe, #ffffff);
  z-index: 2;
}

.cn-room-kitchen .cn-kit-window span {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #1d3557;
  transform: translateX(-50%);
}

.cn-room-kitchen .cn-kit-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: #1d3557;
  transform: translateY(-50%);
}

/* Counter */
.cn-room-kitchen .cn-kit-counter {
  left: 8%;
  bottom: 16%;
  width: 55%;
  height: 18%;
  border-radius: 12px;
  border: 5px solid #1d3557;
  background: #9b6a43;
  z-index: 3;
}

.cn-room-kitchen .cn-kit-counter::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: -18px;
  height: 20px;
  border-radius: 10px;
  background: #334155;
  border: 4px solid #1d3557;
}

/* Stove / cooking appliance */
.cn-room-kitchen .cn-kit-stove {
  left: 14%;
  bottom: 33%;
  width: 20%;
  height: 20%;
  border-radius: 12px;
  border: 5px solid #1d3557;
  background: #f8fafc;
  z-index: 4;
}

.cn-room-kitchen .cn-kit-stove::before,
.cn-room-kitchen .cn-kit-stove::after {
  content: "";
  position: absolute;
  top: 18%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 4px solid #1d3557;
  background: #e5e7eb;
}

.cn-room-kitchen .cn-kit-stove::before {
  left: 15%;
}

.cn-room-kitchen .cn-kit-stove::after {
  right: 15%;
}

.cn-room-kitchen .cn-kit-stove span {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 14%;
  height: 12px;
  border-radius: 999px;
  background: #ef4444;
}

/* Sink */
.cn-room-kitchen .cn-kit-sink {
  left: 40%;
  bottom: 34%;
  width: 18%;
  height: 17%;
  border-radius: 12px;
  border: 5px solid #1d3557;
  background: #dbeafe;
  z-index: 4;
}

.cn-room-kitchen .cn-kit-sink::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -25px;
  width: 24px;
  height: 24px;
  border-top: 5px solid #1d3557;
  border-right: 5px solid #1d3557;
  border-radius: 0 12px 0 0;
  transform: translateX(-50%);
}

/* Refrigerator */
.cn-room-kitchen .cn-kit-fridge {
  right: 10%;
  bottom: 16%;
  width: 18%;
  height: 48%;
  border-radius: 12px;
  border: 5px solid #1d3557;
  background: #e5e7eb;
  z-index: 3;
}

.cn-room-kitchen .cn-kit-fridge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  height: 5px;
  background: #1d3557;
}

.cn-room-kitchen .cn-kit-fridge::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 18%;
  width: 6px;
  height: 32px;
  border-radius: 999px;
  background: #1d3557;
}

/* Smoke detector */
.cn-room-kitchen .cn-kit-smoke-device {
  top: 8%;
  left: 51%;
  width: 34px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Heat detector */
.cn-room-kitchen .cn-kit-heat-device {
  top: 24%;
  left: 20%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-kitchen .cn-kit-heat-device::after {
  content: "H";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
  color: #c62828;
}

/* CO detector */
.cn-room-kitchen .cn-kit-co-device {
  top: 42%;
  right: 16%;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

.cn-room-kitchen .cn-kit-co-device::after {
  content: "CO";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #1d3557;
}

/* Nuisance alarm / cooking plume zone */
.cn-room-kitchen .cn-kit-nuisance-zone {
  left: 12%;
  bottom: 48%;
  width: 28%;
  height: 25%;
  border-radius: 50%;
  border: 4px dashed rgba(198, 40, 40, 0.5);
  background: rgba(239, 68, 68, 0.08);
  z-index: 2;
}

/* Kitchen hotspots */
.cn-room-kitchen .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-kitchen .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 8: Residential R-2 Common Corridor
========================================================= */

.cn-room-visual.cn-room-common-corridor.cn-app-residential {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 50%, #d7c2a6 50%, #d7c2a6 100%);
}

.cn-room-common-corridor.cn-app-residential .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-common-corridor.cn-app-residential::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-corridor-hall,
.cn-room-common-corridor.cn-app-residential .cn-r2-door,
.cn-room-common-corridor.cn-app-residential .cn-r2-smoke-device,
.cn-room-common-corridor.cn-app-residential .cn-r2-horn-strobe,
.cn-room-common-corridor.cn-app-residential .cn-r2-pull-station,
.cn-room-common-corridor.cn-app-residential .cn-r2-egress-arrow,
.cn-room-common-corridor.cn-app-residential .cn-r2-exit-sign {
  display: block !important;
  position: absolute;
}

/* Corridor path */
.cn-room-common-corridor.cn-app-residential .cn-r2-corridor-hall {
  left: 5%;
  right: 5%;
  bottom: 10%;
  height: 34%;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Apartment doors */
.cn-room-common-corridor.cn-app-residential .cn-r2-door {
  top: 16%;
  width: 16%;
  height: 32%;
  border-radius: 12px 12px 0 0;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  z-index: 3;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-door span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.85rem;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-door::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 53%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #facc15;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-door-201 {
  left: 8%;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-door-202 {
  left: 31%;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-door-203 {
  left: 54%;
}

/* Corridor smoke detector */
.cn-room-common-corridor.cn-app-residential .cn-r2-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-common-corridor.cn-app-residential .cn-r2-horn-strobe {
  top: 23%;
  right: 14%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Pull station */
.cn-room-common-corridor.cn-app-residential .cn-r2-pull-station {
  top: 43%;
  left: 16%;
  width: 34px;
  height: 44px;
  border-radius: 6px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  z-index: 5;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-pull-station::before {
  content: "PULL";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  text-align: center;
  color: white;
  font-size: 0.55rem;
  font-weight: 900;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-pull-station::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  height: 10px;
  border-radius: 3px;
  background: #ffffff;
}

/* Egress arrow */
.cn-room-common-corridor.cn-app-residential .cn-r2-egress-arrow {
  left: 33%;
  bottom: 20%;
  width: 34%;
  height: 12%;
  z-index: 4;
}

.cn-room-common-corridor.cn-app-residential .cn-r2-egress-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 16%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
  transform: translateY(-50%);
}

.cn-room-common-corridor.cn-app-residential .cn-r2-egress-arrow::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-top: 8px solid #16a34a;
  border-right: 8px solid #16a34a;
  transform: translateY(-50%) rotate(45deg);
}

.cn-room-common-corridor.cn-app-residential .cn-r2-egress-arrow span {
  position: absolute;
  left: 18%;
  top: -18px;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Exit sign */
.cn-room-common-corridor.cn-app-residential .cn-r2-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* R-2 corridor hotspots */
.cn-room-common-corridor.cn-app-residential .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-common-corridor.cn-app-residential .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 9: Residential Elevator Lobby
========================================================= */

.cn-room-visual.cn-room-elevator-lobby.cn-app-residential {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 52%, #d7c2a6 52%, #d7c2a6 100%);
}

.cn-room-elevator-lobby.cn-app-residential .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-elevator-lobby.cn-app-residential::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-lobby-floor,
.cn-room-elevator-lobby.cn-app-residential .cn-el-door,
.cn-room-elevator-lobby.cn-app-residential .cn-el-header,
.cn-room-elevator-lobby.cn-app-residential .cn-el-call-panel,
.cn-room-elevator-lobby.cn-app-residential .cn-el-smoke-device,
.cn-room-elevator-lobby.cn-app-residential .cn-el-recall-arrow,
.cn-room-elevator-lobby.cn-app-residential .cn-el-machine-room,
.cn-room-elevator-lobby.cn-app-residential .cn-el-shunt-panel,
.cn-room-elevator-lobby.cn-app-residential .cn-el-power-line {
  display: block !important;
  position: absolute;
}

/* Lobby floor */
.cn-room-elevator-lobby.cn-app-residential .cn-el-lobby-floor {
  left: 7%;
  right: 7%;
  bottom: 10%;
  height: 34%;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Elevator header */
.cn-room-elevator-lobby.cn-app-residential .cn-el-header {
  left: 27%;
  top: 13%;
  width: 28%;
  height: 34px;
  border-radius: 8px;
  background: #1d3557;
  color: #ffffff;
  text-align: center;
  line-height: 34px;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  z-index: 5;
}

/* Elevator doors */
.cn-room-elevator-lobby.cn-app-residential .cn-el-door {
  top: 23%;
  width: 14%;
  height: 45%;
  background: #e5e7eb;
  border: 5px solid #1d3557;
  z-index: 4;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-door-left {
  left: 27%;
  border-radius: 12px 0 0 0;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-door-right {
  left: 41%;
  border-left: none;
  border-radius: 0 12px 0 0;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-door-left::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #1d3557;
}

/* Call panel */
.cn-room-elevator-lobby.cn-app-residential .cn-el-call-panel {
  left: 57%;
  top: 38%;
  width: 34px;
  height: 58px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-call-panel span {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #facc15;
  transform: translateX(-50%);
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-call-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #94a3b8;
  transform: translateX(-50%);
}

/* Lobby smoke detector */
.cn-room-elevator-lobby.cn-app-residential .cn-el-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Recall arrow */
.cn-room-elevator-lobby.cn-app-residential .cn-el-recall-arrow {
  left: 31%;
  top: 38%;
  width: 22%;
  height: 16%;
  z-index: 6;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-recall-arrow::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 22%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: #c62828;
  transform: translateY(-50%);
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-recall-arrow::after {
  content: "";
  position: absolute;
  right: 14%;
  top: 50%;
  width: 24px;
  height: 24px;
  border-top: 8px solid #c62828;
  border-right: 8px solid #c62828;
  transform: translateY(-50%) rotate(45deg);
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-recall-arrow span {
  position: absolute;
  left: 20%;
  top: -16px;
  color: #7f1d1d;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Machine room / controller reference */
.cn-room-elevator-lobby.cn-app-residential .cn-el-machine-room {
  right: 9%;
  bottom: 13%;
  width: 18%;
  height: 27%;
  border-radius: 12px;
  background: #334155;
  border: 5px solid #1d3557;
  color: #ffffff;
  z-index: 4;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-machine-room span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Shunt trip / power shutdown panel */
.cn-room-elevator-lobby.cn-app-residential .cn-el-shunt-panel {
  right: 11%;
  top: 22%;
  width: 16%;
  height: 22%;
  border-radius: 10px;
  background: #7f1d1d;
  border: 5px solid #450a0a;
  color: #ffffff;
  z-index: 5;
}

.cn-room-elevator-lobby.cn-app-residential .cn-el-shunt-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Power line from shunt to machine room */
.cn-room-elevator-lobby.cn-app-residential .cn-el-power-line {
  right: 19%;
  top: 44%;
  width: 5px;
  height: 30%;
  background: repeating-linear-gradient(
    to bottom,
    #c62828,
    #c62828 10px,
    transparent 10px,
    transparent 18px
  );
  z-index: 3;
}

/* Elevator lobby hotspots */
.cn-room-elevator-lobby.cn-app-residential .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-elevator-lobby.cn-app-residential .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Code Navigator Visual Room Layouts
   Phase 10: Mechanical Room
========================================================= */

.cn-room-visual.cn-room-mechanical-room {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-mechanical-room .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-mechanical-room::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-mechanical-room .cn-mech-duct,
.cn-room-mechanical-room .cn-mech-duct-detector,
.cn-room-mechanical-room .cn-mech-air-handler,
.cn-room-mechanical-room .cn-mech-fan,
.cn-room-mechanical-room .cn-mech-shutdown-relay,
.cn-room-mechanical-room .cn-mech-control-line,
.cn-room-mechanical-room .cn-mech-sprinkler-riser,
.cn-room-mechanical-room .cn-mech-waterflow,
.cn-room-mechanical-room .cn-mech-tamper-valve,
.cn-room-mechanical-room .cn-mech-tamper-switch,
.cn-room-mechanical-room .cn-mech-pipe-horizontal {
  display: block !important;
  position: absolute;
}

/* Ductwork */
.cn-room-mechanical-room .cn-mech-duct {
  left: 7%;
  top: 18%;
  width: 38%;
  height: 12%;
  border-radius: 10px;
  background: #94a3b8;
  border: 5px solid #1d3557;
  z-index: 3;
}

.cn-room-mechanical-room .cn-mech-duct::before,
.cn-room-mechanical-room .cn-mech-duct::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: rgba(29, 53, 87, 0.6);
}

.cn-room-mechanical-room .cn-mech-duct::before {
  left: 30%;
}

.cn-room-mechanical-room .cn-mech-duct::after {
  left: 65%;
}

/* Duct detector */
.cn-room-mechanical-room .cn-mech-duct-detector {
  left: 16%;
  top: 14%;
  width: 58px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-mechanical-room .cn-mech-duct-detector span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 900;
  color: #1d3557;
}

/* Air handler */
.cn-room-mechanical-room .cn-mech-air-handler {
  left: 12%;
  bottom: 14%;
  width: 30%;
  height: 28%;
  border-radius: 14px;
  background: linear-gradient(135deg, #64748b, #475569);
  border: 5px solid #1d3557;
  z-index: 3;
}

.cn-room-mechanical-room .cn-mech-air-handler::before {
  content: "AHU";
  position: absolute;
  left: 10px;
  top: 8px;
  color: white;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.cn-room-mechanical-room .cn-mech-air-handler::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 22%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f8fafc 0 15%, transparent 16%),
    conic-gradient(#1d3557 0 25%, #94a3b8 25% 50%, #1d3557 50% 75%, #94a3b8 75% 100%);
  border: 4px solid #1d3557;
}

/* Fan icon */
.cn-room-mechanical-room .cn-mech-fan {
  left: 20%;
  bottom: 23%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid #1d3557;
  background: #e5e7eb;
  z-index: 4;
}

.cn-room-mechanical-room .cn-mech-fan::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: conic-gradient(#1d3557 0 25%, transparent 25% 50%, #1d3557 50% 75%, transparent 75% 100%);
}

/* Shutdown relay */
.cn-room-mechanical-room .cn-mech-shutdown-relay {
  left: 43%;
  top: 31%;
  width: 70px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  border: 4px solid #c62828;
  z-index: 5;
}

.cn-room-mechanical-room .cn-mech-shutdown-relay span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #c62828;
}

/* Control line */
.cn-room-mechanical-room .cn-mech-control-line {
  left: 41%;
  top: 38%;
  width: 21%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.85),
    rgba(198, 40, 40, 0.85) 10px,
    transparent 10px,
    transparent 18px
  );
  z-index: 4;
}

/* Sprinkler riser */
.cn-room-mechanical-room .cn-mech-sprinkler-riser {
  right: 12%;
  bottom: 12%;
  width: 28px;
  height: 50%;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 3;
}

/* Horizontal pipe */
.cn-room-mechanical-room .cn-mech-pipe-horizontal {
  right: 12%;
  top: 43%;
  width: 27%;
  height: 22px;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 3;
}

/* Waterflow switch */
.cn-room-mechanical-room .cn-mech-waterflow {
  right: 16%;
  bottom: 23%;
  width: 48px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-mechanical-room .cn-mech-waterflow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #1d3557;
}

/* Tamper valve */
.cn-room-mechanical-room .cn-mech-tamper-valve {
  right: 19%;
  top: 40%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #facc15;
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-mechanical-room .cn-mech-tamper-valve::before,
.cn-room-mechanical-room .cn-mech-tamper-valve::after {
  content: "";
  position: absolute;
  background: #1d3557;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cn-room-mechanical-room .cn-mech-tamper-valve::before {
  width: 80%;
  height: 6px;
}

.cn-room-mechanical-room .cn-mech-tamper-valve::after {
  width: 6px;
  height: 80%;
}

/* Tamper switch */
.cn-room-mechanical-room .cn-mech-tamper-switch {
  right: 14%;
  top: 45%;
  width: 34px;
  height: 28px;
  border-radius: 7px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-mechanical-room .cn-mech-tamper-switch span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #1d3557;
}

/* Mechanical room hotspots */
.cn-room-mechanical-room .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-mechanical-room .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Commercial Server / IT Room
========================================================= */

.cn-room-visual.cn-room-server-room.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #9ca3af 56%, #9ca3af 100%);
}

.cn-room-server-room.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-server-room.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-server-room.cn-app-commercial .cn-srv-raised-floor,
.cn-room-server-room.cn-app-commercial .cn-srv-rack,
.cn-room-server-room.cn-app-commercial .cn-srv-smoke-device,
.cn-room-server-room.cn-app-commercial .cn-srv-clean-cylinder,
.cn-room-server-room.cn-app-commercial .cn-srv-agent-pipe,
.cn-room-server-room.cn-app-commercial .cn-srv-preaction-riser,
.cn-room-server-room.cn-app-commercial .cn-srv-preaction-valve,
.cn-room-server-room.cn-app-commercial .cn-srv-waterflow,
.cn-room-server-room.cn-app-commercial .cn-srv-shutdown-panel,
.cn-room-server-room.cn-app-commercial .cn-srv-control-line,
.cn-room-server-room.cn-app-commercial .cn-srv-airflow {
  display: block !important;
  position: absolute;
}

/* Raised floor */
.cn-room-server-room.cn-app-commercial .cn-srv-raised-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 34%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.15) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.15) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 42px 42px, 42px 42px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Server racks */
.cn-room-server-room.cn-app-commercial .cn-srv-rack {
  bottom: 17%;
  width: 15%;
  height: 44%;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  z-index: 4;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-server-room.cn-app-commercial .cn-srv-rack::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 10%;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 22px 0 #38bdf8,
    0 44px 0 #22c55e,
    0 66px 0 #facc15,
    0 88px 0 #38bdf8,
    0 110px 0 #22c55e;
}

.cn-room-server-room.cn-app-commercial .cn-srv-rack span {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 18%;
  border-radius: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #334155,
    #334155 6px,
    #111827 6px,
    #111827 12px
  );
}

.cn-room-server-room.cn-app-commercial .cn-srv-rack-1 {
  left: 31%;
}

.cn-room-server-room.cn-app-commercial .cn-srv-rack-2 {
  left: 48%;
}

.cn-room-server-room.cn-app-commercial .cn-srv-rack-3 {
  left: 65%;
}

/* Smoke / early warning detector */
.cn-room-server-room.cn-app-commercial .cn-srv-smoke-device {
  top: 8%;
  left: 50%;
  width: 38px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Clean agent cylinder */
.cn-room-server-room.cn-app-commercial .cn-srv-clean-cylinder {
  left: 9%;
  bottom: 15%;
  width: 15%;
  height: 43%;
  border-radius: 20px 20px 12px 12px;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 4;
}

.cn-room-server-room.cn-app-commercial .cn-srv-clean-cylinder span {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.cn-room-server-room.cn-app-commercial .cn-srv-clean-cylinder::before {
  content: "";
  position: absolute;
  left: 35%;
  right: 35%;
  top: -16px;
  height: 18px;
  border-radius: 6px 6px 0 0;
  background: #334155;
  border: 3px solid #1d3557;
}

/* Clean agent pipe */
.cn-room-server-room.cn-app-commercial .cn-srv-agent-pipe {
  left: 18%;
  top: 24%;
  width: 36%;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 3;
}

/* Preaction riser */
.cn-room-server-room.cn-app-commercial .cn-srv-preaction-riser {
  right: 9%;
  bottom: 13%;
  width: 26px;
  height: 48%;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 3;
}

/* Preaction valve */
.cn-room-server-room.cn-app-commercial .cn-srv-preaction-valve {
  right: 6%;
  bottom: 33%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #facc15;
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-server-room.cn-app-commercial .cn-srv-preaction-valve::before,
.cn-room-server-room.cn-app-commercial .cn-srv-preaction-valve::after {
  content: "";
  position: absolute;
  background: #1d3557;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cn-room-server-room.cn-app-commercial .cn-srv-preaction-valve::before {
  width: 80%;
  height: 6px;
}

.cn-room-server-room.cn-app-commercial .cn-srv-preaction-valve::after {
  width: 6px;
  height: 80%;
}

/* Waterflow / monitoring box */
.cn-room-server-room.cn-app-commercial .cn-srv-waterflow {
  right: 11%;
  bottom: 47%;
  width: 42px;
  height: 28px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

.cn-room-server-room.cn-app-commercial .cn-srv-waterflow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #1d3557;
}

/* Shutdown panel */
.cn-room-server-room.cn-app-commercial .cn-srv-shutdown-panel {
  right: 10%;
  top: 27%;
  width: 18%;
  height: 18%;
  border-radius: 10px;
  background: #7f1d1d;
  border: 5px solid #450a0a;
  color: #ffffff;
  z-index: 5;
}

.cn-room-server-room.cn-app-commercial .cn-srv-shutdown-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Shutdown control line */
.cn-room-server-room.cn-app-commercial .cn-srv-control-line {
  right: 25%;
  top: 36%;
  width: 20%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 10px,
    transparent 10px,
    transparent 18px
  );
  z-index: 4;
}

/* Airflow marker */
.cn-room-server-room.cn-app-commercial .cn-srv-airflow {
  left: 35%;
  top: 35%;
  width: 33%;
  height: 11%;
  border-radius: 999px;
  border: 4px dashed rgba(37, 99, 235, 0.55);
  background: rgba(59, 130, 246, 0.08);
  z-index: 3;
}

.cn-room-server-room.cn-app-commercial .cn-srv-airflow::after {
  content: "AIRFLOW";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: rgba(29, 53, 87, 0.7);
}

/* Server room hotspots */
.cn-room-server-room.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-server-room.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Commercial Open Office
========================================================= */

.cn-room-visual.cn-room-open-office.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 54%, #d7c2a6 54%, #d7c2a6 100%);
}

.cn-room-open-office.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-open-office.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-open-office.cn-app-commercial .cn-office-floor,
.cn-room-open-office.cn-app-commercial .cn-office-desk,
.cn-room-open-office.cn-app-commercial .cn-office-chair,
.cn-room-open-office.cn-app-commercial .cn-office-partition,
.cn-room-open-office.cn-app-commercial .cn-office-smoke-device,
.cn-room-open-office.cn-app-commercial .cn-office-horn-strobe,
.cn-room-open-office.cn-app-commercial .cn-office-pull-station,
.cn-room-open-office.cn-app-commercial .cn-office-coverage-ring,
.cn-room-open-office.cn-app-commercial .cn-office-exit-sign {
  display: block !important;
  position: absolute;
}

/* Office floor / open work area */
.cn-room-open-office.cn-app-commercial .cn-office-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Desks */
.cn-room-open-office.cn-app-commercial .cn-office-desk {
  width: 20%;
  height: 13%;
  border-radius: 10px;
  background: #f8fafc;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-open-office.cn-app-commercial .cn-office-desk::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 38%;
  height: 5px;
  border-radius: 999px;
  background: #94a3b8;
}

.cn-room-open-office.cn-app-commercial .cn-office-desk-1 {
  left: 18%;
  bottom: 28%;
}

.cn-room-open-office.cn-app-commercial .cn-office-desk-2 {
  left: 42%;
  bottom: 28%;
}

.cn-room-open-office.cn-app-commercial .cn-office-desk-3 {
  left: 18%;
  bottom: 12%;
}

.cn-room-open-office.cn-app-commercial .cn-office-desk-4 {
  left: 42%;
  bottom: 12%;
}

/* Chairs */
.cn-room-open-office.cn-app-commercial .cn-office-chair {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #334155;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-open-office.cn-app-commercial .cn-office-chair-1 {
  left: 25%;
  bottom: 22%;
}

.cn-room-open-office.cn-app-commercial .cn-office-chair-2 {
  left: 49%;
  bottom: 22%;
}

.cn-room-open-office.cn-app-commercial .cn-office-chair-3 {
  left: 25%;
  bottom: 6%;
}

.cn-room-open-office.cn-app-commercial .cn-office-chair-4 {
  left: 49%;
  bottom: 6%;
}

/* Low partitions */
.cn-room-open-office.cn-app-commercial .cn-office-partition {
  width: 5px;
  height: 36%;
  background: rgba(29, 53, 87, 0.45);
  border-radius: 999px;
  z-index: 3;
}

.cn-room-open-office.cn-app-commercial .cn-office-partition-1 {
  left: 40%;
  bottom: 11%;
}

.cn-room-open-office.cn-app-commercial .cn-office-partition-2 {
  left: 64%;
  bottom: 11%;
}

/* Open-area smoke detector */
.cn-room-open-office.cn-app-commercial .cn-office-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-open-office.cn-app-commercial .cn-office-horn-strobe {
  top: 25%;
  right: 13%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-open-office.cn-app-commercial .cn-office-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Pull station */
.cn-room-open-office.cn-app-commercial .cn-office-pull-station {
  top: 43%;
  left: 14%;
  width: 34px;
  height: 44px;
  border-radius: 6px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  z-index: 5;
}

.cn-room-open-office.cn-app-commercial .cn-office-pull-station::before {
  content: "PULL";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  text-align: center;
  color: white;
  font-size: 0.55rem;
  font-weight: 900;
}

.cn-room-open-office.cn-app-commercial .cn-office-pull-station::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  height: 10px;
  border-radius: 3px;
  background: #ffffff;
}

/* Notification coverage visual */
.cn-room-open-office.cn-app-commercial .cn-office-coverage-ring {
  left: 34%;
  bottom: 14%;
  width: 42%;
  height: 38%;
  border: 4px dashed rgba(198, 40, 40, 0.55);
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.05);
  z-index: 3;
}

/* Exit sign */
.cn-room-open-office.cn-app-commercial .cn-office-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* Open office hotspots */
.cn-room-open-office.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-open-office.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual Alias: Commercial Office Area
   Uses same drawing style as Open Office
========================================================= */

.cn-room-visual.cn-room-office-area.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 54%, #d7c2a6 54%, #d7c2a6 100%);
}

.cn-room-office-area.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-office-area.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-office-area.cn-app-commercial .cn-office-floor,
.cn-room-office-area.cn-app-commercial .cn-office-desk,
.cn-room-office-area.cn-app-commercial .cn-office-chair,
.cn-room-office-area.cn-app-commercial .cn-office-partition,
.cn-room-office-area.cn-app-commercial .cn-office-smoke-device,
.cn-room-office-area.cn-app-commercial .cn-office-horn-strobe,
.cn-room-office-area.cn-app-commercial .cn-office-pull-station,
.cn-room-office-area.cn-app-commercial .cn-office-coverage-ring,
.cn-room-office-area.cn-app-commercial .cn-office-exit-sign {
  display: block !important;
  position: absolute;
}

/* Office floor / open work area */
.cn-room-office-area.cn-app-commercial .cn-office-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Desks */
.cn-room-office-area.cn-app-commercial .cn-office-desk {
  width: 20%;
  height: 13%;
  border-radius: 10px;
  background: #f8fafc;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-office-area.cn-app-commercial .cn-office-desk::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 38%;
  height: 5px;
  border-radius: 999px;
  background: #94a3b8;
}

.cn-room-office-area.cn-app-commercial .cn-office-desk-1 {
  left: 18%;
  bottom: 28%;
}

.cn-room-office-area.cn-app-commercial .cn-office-desk-2 {
  left: 42%;
  bottom: 28%;
}

.cn-room-office-area.cn-app-commercial .cn-office-desk-3 {
  left: 18%;
  bottom: 12%;
}

.cn-room-office-area.cn-app-commercial .cn-office-desk-4 {
  left: 42%;
  bottom: 12%;
}

/* Chairs */
.cn-room-office-area.cn-app-commercial .cn-office-chair {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #334155;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-office-area.cn-app-commercial .cn-office-chair-1 {
  left: 25%;
  bottom: 22%;
}

.cn-room-office-area.cn-app-commercial .cn-office-chair-2 {
  left: 49%;
  bottom: 22%;
}

.cn-room-office-area.cn-app-commercial .cn-office-chair-3 {
  left: 25%;
  bottom: 6%;
}

.cn-room-office-area.cn-app-commercial .cn-office-chair-4 {
  left: 49%;
  bottom: 6%;
}

/* Low partitions */
.cn-room-office-area.cn-app-commercial .cn-office-partition {
  width: 5px;
  height: 36%;
  background: rgba(29, 53, 87, 0.45);
  border-radius: 999px;
  z-index: 3;
}

.cn-room-office-area.cn-app-commercial .cn-office-partition-1 {
  left: 40%;
  bottom: 11%;
}

.cn-room-office-area.cn-app-commercial .cn-office-partition-2 {
  left: 64%;
  bottom: 11%;
}

/* Open-area smoke detector */
.cn-room-office-area.cn-app-commercial .cn-office-smoke-device {
  top: 25%;
  left: 16%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-office-area.cn-app-commercial .cn-office-horn-strobe {
  top: 13%;
  left: 47%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-office-area.cn-app-commercial .cn-office-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Tenant fit-out marker */
.cn-room-office-area.cn-app-commercial .cn-office-pull-station {
  bottom: 18%;
  left: 33%;
  width: 58px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-office-area.cn-app-commercial .cn-office-pull-station::before {
  content: "FIT";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Notification coverage visual */
.cn-room-office-area.cn-app-commercial .cn-office-coverage-ring {
  left: 34%;
  bottom: 14%;
  width: 42%;
  height: 38%;
  border: 4px dashed rgba(198, 40, 40, 0.55);
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.05);
  z-index: 3;
}

/* Exit sign */
.cn-room-office-area.cn-app-commercial .cn-office-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* Office area hotspots */
.cn-room-office-area.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-office-area.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Commercial Conference Room
========================================================= */

.cn-room-visual.cn-room-conference-room.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 54%, #d7c2a6 54%, #d7c2a6 100%);
}

.cn-room-conference-room.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-conference-room.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-floor,
.cn-room-conference-room.cn-app-commercial .cn-conf-glass-wall,
.cn-room-conference-room.cn-app-commercial .cn-conf-screen,
.cn-room-conference-room.cn-app-commercial .cn-conf-table,
.cn-room-conference-room.cn-app-commercial .cn-conf-chair,
.cn-room-conference-room.cn-app-commercial .cn-conf-smoke-device,
.cn-room-conference-room.cn-app-commercial .cn-conf-horn-strobe,
.cn-room-conference-room.cn-app-commercial .cn-conf-coverage-ring,
.cn-room-conference-room.cn-app-commercial .cn-conf-occupant-load,
.cn-room-conference-room.cn-app-commercial .cn-conf-exit-sign {
  display: block !important;
  position: absolute;
}

/* Room floor */
.cn-room-conference-room.cn-app-commercial .cn-conf-floor {
  left: 7%;
  right: 7%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Glass wall / partition */
.cn-room-conference-room.cn-app-commercial .cn-conf-glass-wall {
  left: 8%;
  top: 18%;
  width: 22%;
  height: 31%;
  border-radius: 12px;
  border: 5px solid #1d3557;
  background:
    linear-gradient(135deg, rgba(191,219,254,0.7), rgba(255,255,255,0.55));
  z-index: 3;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-glass-wall::before,
.cn-room-conference-room.cn-app-commercial .cn-conf-glass-wall::after {
  content: "";
  position: absolute;
  background: rgba(29, 53, 87, 0.55);
}

.cn-room-conference-room.cn-app-commercial .cn-conf-glass-wall::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
}

.cn-room-conference-room.cn-app-commercial .cn-conf-glass-wall::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
}

/* Display / presentation screen */
.cn-room-conference-room.cn-app-commercial .cn-conf-screen {
  top: 16%;
  left: 38%;
  width: 28%;
  height: 17%;
  border-radius: 10px;
  border: 5px solid #1d3557;
  background: #111827;
  color: #ffffff;
  z-index: 4;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-screen span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Conference table */
.cn-room-conference-room.cn-app-commercial .cn-conf-table {
  left: 31%;
  bottom: 16%;
  width: 39%;
  height: 23%;
  border-radius: 999px;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  z-index: 4;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-table::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 45%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
}

/* Chairs */
.cn-room-conference-room.cn-app-commercial .cn-conf-chair {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #334155;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-chair-1 {
  left: 35%;
  bottom: 39%;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-chair-2 {
  left: 49%;
  bottom: 41%;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-chair-3 {
  left: 63%;
  bottom: 39%;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-chair-4 {
  left: 35%;
  bottom: 9%;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-chair-5 {
  left: 49%;
  bottom: 7%;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-chair-6 {
  left: 63%;
  bottom: 9%;
}

/* Smoke detector */
.cn-room-conference-room.cn-app-commercial .cn-conf-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-conference-room.cn-app-commercial .cn-conf-horn-strobe {
  top: 20%;
  right: 14%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Notification coverage */
.cn-room-conference-room.cn-app-commercial .cn-conf-coverage-ring {
  left: 34%;
  bottom: 13%;
  width: 42%;
  height: 39%;
  border: 4px dashed rgba(198, 40, 40, 0.55);
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.05);
  z-index: 3;
}

/* Occupant load marker */
.cn-room-conference-room.cn-app-commercial .cn-conf-occupant-load {
  top: 42%;
  left: 44%;
  width: 90px;
  height: 34px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  border: 3px dashed rgba(22, 101, 52, 0.65);
  z-index: 5;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-occupant-load::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #166534;
  box-shadow:
    22px 0 0 #166534,
    44px 0 0 #166534,
    66px 0 0 #166534;
}

.cn-room-conference-room.cn-app-commercial .cn-conf-occupant-load span {
  display: none;
}

/* Exit sign */
.cn-room-conference-room.cn-app-commercial .cn-conf-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* Conference room hotspots */
.cn-room-conference-room.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-conference-room.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Commercial Electrical Room
========================================================= */

.cn-room-visual.cn-room-electrical-room.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-electrical-room.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-electrical-room.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-floor,
.cn-room-electrical-room.cn-app-commercial .cn-elec-facp,
.cn-room-electrical-room.cn-app-commercial .cn-elec-annunciator,
.cn-room-electrical-room.cn-app-commercial .cn-elec-power-panel,
.cn-room-electrical-room.cn-app-commercial .cn-elec-dedicated-circuit,
.cn-room-electrical-room.cn-app-commercial .cn-elec-smoke-device,
.cn-room-electrical-room.cn-app-commercial .cn-elec-heat-device,
.cn-room-electrical-room.cn-app-commercial .cn-elec-horn-strobe,
.cn-room-electrical-room.cn-app-commercial .cn-elec-clearance-zone,
.cn-room-electrical-room.cn-app-commercial .cn-elec-conduit,
.cn-room-electrical-room.cn-app-commercial .cn-elec-battery-box {
  display: block !important;
  position: absolute;
}

/* Floor / working area */
.cn-room-electrical-room.cn-app-commercial .cn-elec-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* FACP cabinet */
.cn-room-electrical-room.cn-app-commercial .cn-elec-facp {
  left: 10%;
  bottom: 18%;
  width: 18%;
  height: 42%;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-facp span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-facp::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 14%;
  height: 18px;
  border-radius: 5px;
  background: #111827;
  box-shadow:
    0 34px 0 #111827,
    0 68px 0 #111827;
}

/* Annunciator / remote display */
.cn-room-electrical-room.cn-app-commercial .cn-elec-annunciator {
  left: 31%;
  top: 29%;
  width: 13%;
  height: 16%;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-annunciator span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #1d3557;
}

/* Electrical power panel */
.cn-room-electrical-room.cn-app-commercial .cn-elec-power-panel {
  right: 10%;
  bottom: 18%;
  width: 20%;
  height: 46%;
  border-radius: 12px;
  background: #334155;
  border: 5px solid #1d3557;
  color: #ffffff;
  z-index: 5;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-power-panel span {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-power-panel::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 36%;
  height: 5px;
  background: #94a3b8;
  box-shadow:
    0 18px 0 #94a3b8,
    0 36px 0 #94a3b8,
    0 54px 0 #94a3b8,
    0 72px 0 #94a3b8;
}

/* Dedicated circuit visual */
.cn-room-electrical-room.cn-app-commercial .cn-elec-dedicated-circuit {
  right: 22%;
  top: 25%;
  width: 27%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-dedicated-circuit::after {
  content: "DEDICATED CIRCUIT";
  position: absolute;
  left: 10%;
  top: -24px;
  font-size: 0.65rem;
  font-weight: 900;
  color: #7f1d1d;
}

/* Smoke detector */
.cn-room-electrical-room.cn-app-commercial .cn-elec-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Heat detector */
.cn-room-electrical-room.cn-app-commercial .cn-elec-heat-device {
  top: 21%;
  left: 47%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-heat-device::after {
  content: "H";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
  color: #c62828;
}

/* Horn/strobe */
.cn-room-electrical-room.cn-app-commercial .cn-elec-horn-strobe {
  top: 30%;
  left: 16%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 6;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Clearance working space */
.cn-room-electrical-room.cn-app-commercial .cn-elec-clearance-zone {
  left: 34%;
  bottom: 12%;
  width: 34%;
  height: 38%;
  border-radius: 14px;
  border: 4px dashed rgba(22, 101, 52, 0.65);
  background: rgba(22, 163, 74, 0.08);
  z-index: 3;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-clearance-zone span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Conduits */
.cn-room-electrical-room.cn-app-commercial .cn-elec-conduit {
  height: 5px;
  background: #64748b;
  border-radius: 999px;
  border: 2px solid #1d3557;
  z-index: 4;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-conduit-1 {
  left: 28%;
  top: 40%;
  width: 28%;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-conduit-2 {
  left: 28%;
  top: 46%;
  width: 26%;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-conduit-3 {
  left: 28%;
  top: 52%;
  width: 24%;
}

/* Battery cabinet */
.cn-room-electrical-room.cn-app-commercial .cn-elec-battery-box {
  left: 31%;
  bottom: 18%;
  width: 14%;
  height: 18%;
  border-radius: 10px;
  background: #111827;
  border: 4px solid #1d3557;
  color: #ffffff;
  z-index: 5;
}

.cn-room-electrical-room.cn-app-commercial .cn-elec-battery-box span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Electrical room hotspots */
.cn-room-electrical-room.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-electrical-room.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Commercial Business / Office Corridor
========================================================= */

.cn-room-visual.cn-room-corridor.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 50%, #d7c2a6 50%, #d7c2a6 100%);
}

.cn-room-corridor.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-corridor.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-corridor.cn-app-commercial .cn-com-corridor-hall,
.cn-room-corridor.cn-app-commercial .cn-com-door,
.cn-room-corridor.cn-app-commercial .cn-com-smoke-device,
.cn-room-corridor.cn-app-commercial .cn-com-horn-strobe,
.cn-room-corridor.cn-app-commercial .cn-com-pull-station,
.cn-room-corridor.cn-app-commercial .cn-com-egress-arrow,
.cn-room-corridor.cn-app-commercial .cn-com-exit-sign,
.cn-room-corridor.cn-app-commercial .cn-com-tenant-line {
  display: block !important;
  position: absolute;
}

/* Corridor path */
.cn-room-corridor.cn-app-commercial .cn-com-corridor-hall {
  left: 5%;
  right: 5%;
  bottom: 10%;
  height: 34%;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Suite / room doors */
.cn-room-corridor.cn-app-commercial .cn-com-door {
  top: 16%;
  width: 17%;
  height: 32%;
  border-radius: 12px 12px 0 0;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  z-index: 3;
}

.cn-room-corridor.cn-app-commercial .cn-com-door span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.72rem;
}

.cn-room-corridor.cn-app-commercial .cn-com-door::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 53%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #facc15;
}

.cn-room-corridor.cn-app-commercial .cn-com-door-101 {
  left: 8%;
}

.cn-room-corridor.cn-app-commercial .cn-com-door-102 {
  left: 31%;
}

.cn-room-corridor.cn-app-commercial .cn-com-door-103 {
  left: 54%;
}

/* Tenant separation / suite demising marker */
.cn-room-corridor.cn-app-commercial .cn-com-tenant-line {
  left: 29%;
  top: 12%;
  bottom: 12%;
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(29, 53, 87, 0.55),
    rgba(29, 53, 87, 0.55) 12px,
    transparent 12px,
    transparent 24px
  );
  z-index: 4;
}

/* Corridor smoke detector */
.cn-room-corridor.cn-app-commercial .cn-com-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-corridor.cn-app-commercial .cn-com-horn-strobe {
  top: 23%;
  right: 14%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-corridor.cn-app-commercial .cn-com-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Pull station */
.cn-room-corridor.cn-app-commercial .cn-com-pull-station {
  top: 44%;
  left: 15%;
  width: 34px;
  height: 44px;
  border-radius: 6px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  z-index: 5;
}

.cn-room-corridor.cn-app-commercial .cn-com-pull-station::before {
  content: "PULL";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  text-align: center;
  color: white;
  font-size: 0.55rem;
  font-weight: 900;
}

.cn-room-corridor.cn-app-commercial .cn-com-pull-station::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  height: 10px;
  border-radius: 3px;
  background: #ffffff;
}

/* Egress arrow */
.cn-room-corridor.cn-app-commercial .cn-com-egress-arrow {
  left: 33%;
  bottom: 20%;
  width: 34%;
  height: 12%;
  z-index: 4;
}

.cn-room-corridor.cn-app-commercial .cn-com-egress-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 16%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
  transform: translateY(-50%);
}

.cn-room-corridor.cn-app-commercial .cn-com-egress-arrow::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-top: 8px solid #16a34a;
  border-right: 8px solid #16a34a;
  transform: translateY(-50%) rotate(45deg);
}

.cn-room-corridor.cn-app-commercial .cn-com-egress-arrow span {
  position: absolute;
  left: 18%;
  top: -18px;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Exit sign */
.cn-room-corridor.cn-app-commercial .cn-com-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* Commercial corridor hotspots */
.cn-room-corridor.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-corridor.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual Alias: Commercial Business / Office Common Corridor
========================================================= */

.cn-room-visual.cn-room-common-corridor.cn-app-commercial {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 50%, #d7c2a6 50%, #d7c2a6 100%);
}

.cn-room-common-corridor.cn-app-commercial .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-common-corridor.cn-app-commercial::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-corridor-hall,
.cn-room-common-corridor.cn-app-commercial .cn-com-door,
.cn-room-common-corridor.cn-app-commercial .cn-com-smoke-device,
.cn-room-common-corridor.cn-app-commercial .cn-com-horn-strobe,
.cn-room-common-corridor.cn-app-commercial .cn-com-pull-station,
.cn-room-common-corridor.cn-app-commercial .cn-com-egress-arrow,
.cn-room-common-corridor.cn-app-commercial .cn-com-exit-sign,
.cn-room-common-corridor.cn-app-commercial .cn-com-tenant-line {
  display: block !important;
  position: absolute;
}

/* Corridor path */
.cn-room-common-corridor.cn-app-commercial .cn-com-corridor-hall {
  left: 5%;
  right: 5%;
  bottom: 10%;
  height: 34%;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Suite / room doors */
.cn-room-common-corridor.cn-app-commercial .cn-com-door {
  top: 16%;
  width: 17%;
  height: 32%;
  border-radius: 12px 12px 0 0;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  z-index: 3;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-door span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  text-align: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.72rem;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-door::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 53%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #facc15;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-door-101 {
  left: 8%;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-door-102 {
  left: 31%;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-door-103 {
  left: 54%;
}

/* Tenant separation / suite demising marker */
.cn-room-common-corridor.cn-app-commercial .cn-com-tenant-line {
  left: 29%;
  top: 12%;
  bottom: 12%;
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(29, 53, 87, 0.55),
    rgba(29, 53, 87, 0.55) 12px,
    transparent 12px,
    transparent 24px
  );
  z-index: 4;
}

/* Corridor smoke detector */
.cn-room-common-corridor.cn-app-commercial .cn-com-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 5;
}

/* Horn/strobe */
.cn-room-common-corridor.cn-app-commercial .cn-com-horn-strobe {
  top: 23%;
  right: 14%;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 5;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-horn-strobe::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Pull station */
.cn-room-common-corridor.cn-app-commercial .cn-com-pull-station {
  top: 44%;
  left: 15%;
  width: 34px;
  height: 44px;
  border-radius: 6px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  z-index: 5;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-pull-station::before {
  content: "PULL";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  text-align: center;
  color: white;
  font-size: 0.55rem;
  font-weight: 900;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-pull-station::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  height: 10px;
  border-radius: 3px;
  background: #ffffff;
}

/* Door holder / release concept marker */
.cn-room-common-corridor.cn-app-commercial .cn-com-egress-arrow {
  left: 33%;
  bottom: 20%;
  width: 34%;
  height: 12%;
  z-index: 4;
}

.cn-room-common-corridor.cn-app-commercial .cn-com-egress-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 16%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
  transform: translateY(-50%);
}

.cn-room-common-corridor.cn-app-commercial .cn-com-egress-arrow::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-top: 8px solid #16a34a;
  border-right: 8px solid #16a34a;
  transform: translateY(-50%) rotate(45deg);
}

.cn-room-common-corridor.cn-app-commercial .cn-com-egress-arrow span {
  position: absolute;
  left: 18%;
  top: -18px;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Exit sign */
.cn-room-common-corridor.cn-app-commercial .cn-com-exit-sign {
  right: 7%;
  top: 9%;
  width: 58px;
  height: 28px;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  border: 3px solid #166534;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  z-index: 5;
}

/* Commercial common corridor hotspots */
.cn-room-common-corridor.cn-app-commercial .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-common-corridor.cn-app-commercial .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Healthcare Patient Room
========================================================= */

.cn-room-visual.cn-room-patient-room.cn-app-healthcare {
  background:
    linear-gradient(to bottom, #eef7ff 0%, #eef7ff 58%, #d8dee9 58%, #d8dee9 100%);
}

.cn-room-patient-room.cn-app-healthcare .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-patient-room.cn-app-healthcare::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-floor,
.cn-room-patient-room.cn-app-healthcare .cn-patient-window,
.cn-room-patient-room.cn-app-healthcare .cn-patient-headwall,
.cn-room-patient-room.cn-app-healthcare .cn-patient-bed,
.cn-room-patient-room.cn-app-healthcare .cn-patient-pillow,
.cn-room-patient-room.cn-app-healthcare .cn-patient-blanket,
.cn-room-patient-room.cn-app-healthcare .cn-patient-side-table,
.cn-room-patient-room.cn-app-healthcare .cn-patient-chair,
.cn-room-patient-room.cn-app-healthcare .cn-patient-door,
.cn-room-patient-room.cn-app-healthcare .cn-patient-smoke-device,
.cn-room-patient-room.cn-app-healthcare .cn-patient-private-mode-device,
.cn-room-patient-room.cn-app-healthcare .cn-patient-staff-station,
.cn-room-patient-room.cn-app-healthcare .cn-patient-nurse-call,
.cn-room-patient-room.cn-app-healthcare .cn-patient-sleep-zone,
.cn-room-patient-room.cn-app-healthcare .cn-patient-response-path {
  display: block !important;
  position: absolute;
}

/* Floor / patient care area */
.cn-room-patient-room.cn-app-healthcare .cn-patient-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Window */
.cn-room-patient-room.cn-app-healthcare .cn-patient-window {
  top: 13%;
  left: 10%;
  width: 22%;
  height: 22%;
  border: 5px solid #1d3557;
  border-radius: 10px;
  background: linear-gradient(135deg, #bde0fe, #ffffff);
  z-index: 3;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-window span {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #1d3557;
  transform: translateX(-50%);
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: #1d3557;
  transform: translateY(-50%);
}

/* Headwall */
.cn-room-patient-room.cn-app-healthcare .cn-patient-headwall {
  left: 13%;
  bottom: 44%;
  width: 31%;
  height: 12%;
  border-radius: 10px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-headwall span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 900;
  color: rgba(29, 53, 87, 0.6);
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-headwall::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    28px 0 0 #38bdf8,
    56px 0 0 #facc15;
  transform: translateY(-50%);
}

/* Patient bed */
.cn-room-patient-room.cn-app-healthcare .cn-patient-bed {
  left: 16%;
  bottom: 16%;
  width: 44%;
  height: 28%;
  border: 5px solid #1d3557;
  border-radius: 18px;
  background: #f8fafc;
  z-index: 5;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-pillow {
  left: 7%;
  top: 10%;
  width: 27%;
  height: 30%;
  border-radius: 10px;
  border: 3px solid #1d3557;
  background: #dbeafe;
  z-index: 6;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-blanket {
  right: 0;
  bottom: 0;
  width: 66%;
  height: 70%;
  border-radius: 16px 0 12px 0;
  background: linear-gradient(135deg, #60a5fa, #1d4ed8);
  opacity: 0.88;
  z-index: 6;
}

/* Sleep zone highlight */
.cn-room-patient-room.cn-app-healthcare .cn-patient-sleep-zone {
  left: 22%;
  bottom: 20%;
  width: 32%;
  height: 22%;
  border-radius: 999px;
  border: 4px dashed rgba(198, 40, 40, 0.45);
  background: rgba(239, 68, 68, 0.06);
  z-index: 4;
}

/* Side table */
.cn-room-patient-room.cn-app-healthcare .cn-patient-side-table {
  left: 62%;
  bottom: 18%;
  width: 10%;
  height: 18%;
  border-radius: 8px;
  border: 4px solid #1d3557;
  background: #9b6a43;
  z-index: 5;
}

/* Visitor chair */
.cn-room-patient-room.cn-app-healthcare .cn-patient-chair {
  right: 23%;
  bottom: 16%;
  width: 12%;
  height: 18%;
  border-radius: 12px;
  background: #334155;
  border: 4px solid #1d3557;
  z-index: 5;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-chair::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -24px;
  height: 26px;
  border-radius: 10px 10px 0 0;
  background: #475569;
  border: 4px solid #1d3557;
}

/* Patient room door */
.cn-room-patient-room.cn-app-healthcare .cn-patient-door {
  right: 8%;
  bottom: 0;
  width: 16%;
  height: 48%;
  border-radius: 14px 14px 0 0;
  border: 5px solid #5c3b23;
  background: #9b6a43;
  z-index: 3;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-door span {
  display: block;
  position: absolute;
  right: 14%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #facc15;
}

/* Smoke detector */
.cn-room-patient-room.cn-app-healthcare .cn-patient-smoke-device {
  top: 8%;
  left: 50%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

/* Private mode notification device */
.cn-room-patient-room.cn-app-healthcare .cn-patient-private-mode-device {
  top: 27%;
  right: 14%;
  width: 70px;
  height: 38px;
  border-radius: 9px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 6;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-private-mode-device span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.58rem;
  font-weight: 900;
  color: #c62828;
}

/* Staff response station */
.cn-room-patient-room.cn-app-healthcare .cn-patient-staff-station {
  top: 39%;
  left: 13%;
  width: 62px;
  height: 36px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-staff-station span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 900;
  color: #1d3557;
}

/* Nurse call button */
.cn-room-patient-room.cn-app-healthcare .cn-patient-nurse-call {
  left: 47%;
  bottom: 43%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ef4444;
  border: 4px solid #7f1d1d;
  z-index: 6;
}

.cn-room-patient-room.cn-app-healthcare .cn-patient-nurse-call::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
}

/* Staff response path */
.cn-room-patient-room.cn-app-healthcare .cn-patient-response-path {
  left: 52%;
  bottom: 25%;
  width: 28%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(22, 163, 74, 0.9),
    rgba(22, 163, 74, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Patient room hotspots */
.cn-room-patient-room.cn-app-healthcare .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-patient-room.cn-app-healthcare .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Clean Agent Room
========================================================= */

.cn-room-visual.cn-room-clean-agent-room.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-clean-agent-room.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-floor,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-protected-room,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-releasing-panel,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-cylinder,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-pipe,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-nozzle,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-abort-switch,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-manual-release,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-predischarge-device,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-countdown,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-sequence-line,
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-warning-zone {
  display: block !important;
  position: absolute;
}

/* Floor / protected room area */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Protected space outline */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-protected-room {
  left: 29%;
  bottom: 14%;
  width: 42%;
  height: 42%;
  border-radius: 16px;
  border: 4px dashed rgba(198, 40, 40, 0.55);
  background: rgba(239, 68, 68, 0.05);
  z-index: 3;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-protected-room span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  text-align: center;
  color: rgba(127, 29, 29, 0.65);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Releasing panel */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-releasing-panel {
  left: 9%;
  bottom: 16%;
  width: 18%;
  height: 43%;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-releasing-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-releasing-panel::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 14%;
  height: 16px;
  border-radius: 5px;
  background: #111827;
  box-shadow:
    0 34px 0 #111827,
    0 68px 0 #111827;
}

/* Agent cylinder */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-cylinder {
  right: 10%;
  bottom: 15%;
  width: 16%;
  height: 47%;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-cylinder span {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-cylinder::before {
  content: "";
  position: absolute;
  left: 34%;
  right: 34%;
  top: -18px;
  height: 20px;
  border-radius: 6px 6px 0 0;
  background: #334155;
  border: 3px solid #1d3557;
}

/* Agent pipe */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-pipe {
  right: 22%;
  top: 26%;
  width: 48%;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 4;
}

/* Nozzles */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-nozzle {
  top: 29%;
  width: 28px;
  height: 22px;
  border-radius: 0 0 10px 10px;
  background: #f8fafc;
  border: 3px solid #1d3557;
  z-index: 5;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-nozzle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 40px;
  height: 20px;
  border-radius: 50%;
  border: 3px dashed rgba(59, 130, 246, 0.55);
  transform: translateX(-50%);
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-nozzle-1 {
  left: 42%;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-nozzle-2 {
  left: 58%;
}

/* Abort switch */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-abort-switch {
  top: 35%;
  left: 16%;
  width: 70px;
  height: 40px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-abort-switch span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: #1d3557;
}

/* Manual release */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-manual-release {
  top: 47%;
  left: 16%;
  width: 70px;
  height: 46px;
  border-radius: 9px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  color: white;
  z-index: 6;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-manual-release span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 900;
}

/* Pre-discharge notification */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-predischarge-device {
  top: 22%;
  right: 14%;
  width: 52px;
  height: 38px;
  border-radius: 9px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 6;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-predischarge-device span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c62828;
  font-size: 0.7rem;
  font-weight: 900;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-predischarge-device::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Countdown display */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-countdown {
  left: 43%;
  bottom: 18%;
  width: 86px;
  height: 54px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-countdown span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 900;
}

/* Sequence line */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-sequence-line {
  left: 25%;
  top: 38%;
  width: 56%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Warning zone */
.cn-room-clean-agent-room.cn-app-special-systems .cn-agent-warning-zone {
  left: 32%;
  bottom: 21%;
  width: 34%;
  height: 24%;
  border-radius: 999px;
  border: 4px dashed rgba(250, 204, 21, 0.8);
  background: rgba(250, 204, 21, 0.08);
  z-index: 4;
}

/* Clean agent room hotspots */
.cn-room-clean-agent-room.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-clean-agent-room.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Preaction Valve Room
========================================================= */

.cn-room-visual.cn-room-preaction-valve-room.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-preaction-valve-room.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-floor,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-releasing-panel,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detector-left,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detector-right,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detection-line,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-valve-body,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-riser,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-main-pipe,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-solenoid,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-waterflow,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-valve,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-switch,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-low-air,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-air-compressor,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-compressor-line,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-sequence-display,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-control-line,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-zone-outline {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Protected/preaction zone outline */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-zone-outline {
  left: 32%;
  bottom: 15%;
  width: 36%;
  height: 40%;
  border-radius: 16px;
  border: 4px dashed rgba(37, 99, 235, 0.55);
  background: rgba(59, 130, 246, 0.06);
  z-index: 3;
}

/* Preaction releasing panel */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-releasing-panel {
  left: 9%;
  bottom: 16%;
  width: 18%;
  height: 43%;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-releasing-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-releasing-panel::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 14%;
  height: 16px;
  border-radius: 5px;
  background: #111827;
  box-shadow:
    0 34px 0 #111827,
    0 68px 0 #111827;
}

/* Detection devices */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detector-left,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detector-right {
  top: 8%;
  width: 36px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detector-left {
  left: 42%;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detector-right {
  left: 56%;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-detection-line {
  left: 25%;
  top: 15%;
  width: 48%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Valve body */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-valve-body {
  right: 18%;
  bottom: 25%;
  width: 82px;
  height: 92px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-valve-body::after {
  content: "VALVE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 0.68rem;
  font-weight: 900;
}

/* Riser and main pipe */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-riser {
  right: 12%;
  bottom: 12%;
  width: 28px;
  height: 52%;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-main-pipe {
  right: 12%;
  top: 38%;
  width: 43%;
  height: 22px;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 4;
}

/* Solenoid */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-solenoid {
  right: 28%;
  top: 38%;
  width: 48px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-solenoid span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Waterflow */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-waterflow {
  right: 14%;
  bottom: 19%;
  width: 48px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-waterflow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Tamper valve */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-valve {
  right: 17%;
  top: 27%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #facc15;
  border: 5px solid #1d3557;
  z-index: 6;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-valve::before,
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-valve::after {
  content: "";
  position: absolute;
  background: #1d3557;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-valve::before {
  width: 80%;
  height: 6px;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-valve::after {
  width: 6px;
  height: 80%;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-switch {
  right: 13%;
  top: 32%;
  width: 34px;
  height: 28px;
  border-radius: 7px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 7;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-tamper-switch span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Low air supervisory */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-low-air {
  top: 42%;
  left: 40%;
  width: 64px;
  height: 42px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-low-air span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #1d3557;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Air compressor */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-air-compressor {
  left: 36%;
  bottom: 17%;
  width: 18%;
  height: 17%;
  border-radius: 14px;
  background: #475569;
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-air-compressor::after {
  content: "AIR";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 0.85rem;
  font-weight: 900;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-compressor-line {
  left: 52%;
  bottom: 28%;
  width: 22%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(29, 53, 87, 0.85),
    rgba(29, 53, 87, 0.85) 10px,
    transparent 10px,
    transparent 18px
  );
  z-index: 4;
}

/* Sequence display */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-sequence-display {
  left: 43%;
  bottom: 17%;
  width: 82px;
  height: 50px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-sequence-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
}

/* Control line */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-pre-control-line {
  left: 25%;
  top: 35%;
  width: 48%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Hotspots */
.cn-room-preaction-valve-room.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-preaction-valve-room.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Protected Space Entrance
========================================================= */

.cn-room-visual.cn-room-protected-space-entrance.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-protected-space-entrance.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-floor,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-protected-room,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-door,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-warning-sign,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-abort-switch,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-manual-release,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-predischarge-device,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-strobe-flash,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-egress-arrow,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-countdown,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-sequence-line,
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-discharge-zone {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Protected room outline */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-protected-room {
  left: 36%;
  bottom: 14%;
  width: 42%;
  height: 45%;
  border-radius: 16px;
  border: 5px solid #1d3557;
  background: rgba(255,255,255,0.45);
  z-index: 3;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-protected-room span {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  text-align: center;
  color: rgba(29, 53, 87, 0.7);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Entrance door */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-door {
  right: 12%;
  bottom: 10%;
  width: 18%;
  height: 49%;
  border-radius: 14px 14px 0 0;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  z-index: 5;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-door span {
  position: absolute;
  right: 13%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #facc15;
}

/* Warning sign */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-warning-sign {
  top: 10%;
  left: 37%;
  width: 28%;
  height: 14%;
  border-radius: 10px;
  background: #facc15;
  border: 5px solid #1d3557;
  z-index: 6;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-warning-sign span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #1d3557;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Abort switch */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-abort-switch {
  top: 31%;
  left: 14%;
  width: 72px;
  height: 40px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-abort-switch span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Manual release */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-manual-release {
  top: 45%;
  left: 14%;
  width: 72px;
  height: 48px;
  border-radius: 9px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  color: #ffffff;
  z-index: 6;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-manual-release span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 900;
}

/* Pre-discharge notification device */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-predischarge-device {
  top: 23%;
  right: 14%;
  width: 52px;
  height: 38px;
  border-radius: 9px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 6;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-predischarge-device span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c62828;
  font-size: 0.7rem;
  font-weight: 900;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-predischarge-device::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

/* Strobe flash marker */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-strobe-flash {
  top: 20%;
  right: 11%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 4px dashed rgba(198, 40, 40, 0.55);
  background: rgba(239, 68, 68, 0.05);
  z-index: 4;
}

/* Egress arrow */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-egress-arrow {
  right: 28%;
  bottom: 22%;
  width: 30%;
  height: 10%;
  z-index: 5;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-egress-arrow::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 20%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
  transform: translateY(-50%);
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-egress-arrow::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 50%;
  width: 25px;
  height: 25px;
  border-top: 8px solid #16a34a;
  border-right: 8px solid #16a34a;
  transform: translateY(-50%) rotate(45deg);
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-egress-arrow span {
  position: absolute;
  left: 20%;
  top: -18px;
  color: #166534;
  font-size: 0.68rem;
  font-weight: 900;
}

/* Countdown display */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-countdown {
  left: 42%;
  bottom: 17%;
  width: 82px;
  height: 52px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-countdown span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  font-weight: 900;
}

/* Sequence line */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-sequence-line {
  left: 23%;
  top: 38%;
  width: 56%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Discharge / warning zone */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-entry-discharge-zone {
  left: 39%;
  bottom: 20%;
  width: 34%;
  height: 28%;
  border-radius: 999px;
  border: 4px dashed rgba(250, 204, 21, 0.85);
  background: rgba(250, 204, 21, 0.08);
  z-index: 4;
}

/* Hotspots */
.cn-room-protected-space-entrance.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-protected-space-entrance.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Server / IT Protected Space
========================================================= */

.cn-room-visual.cn-room-server-it-protected-space.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #aeb7c2 56%, #aeb7c2 100%);
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-server-it-protected-space.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-floor,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-protected-zone,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-vesda-unit,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sampling-pipe,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sampling-hole,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-cylinder,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-pipe,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-nozzle,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-riser,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-valve,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-waterflow,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-shutdown-panel,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-abort-switch,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-manual-release,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sequence-display,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-control-line,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-warning-zone {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Protected zone */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-protected-zone {
  left: 27%;
  bottom: 14%;
  width: 48%;
  height: 43%;
  border-radius: 16px;
  border: 4px dashed rgba(37, 99, 235, 0.55);
  background: rgba(59, 130, 246, 0.05);
  z-index: 3;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-protected-zone span {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: rgba(29, 53, 87, 0.65);
}

/* Server racks */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack {
  bottom: 17%;
  width: 14%;
  height: 36%;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 12%;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 22px 0 #38bdf8,
    0 44px 0 #22c55e,
    0 66px 0 #facc15,
    0 88px 0 #38bdf8;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12%;
  height: 5px;
  background: #334155;
  box-shadow:
    0 -10px 0 #334155,
    0 -20px 0 #334155;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack-1 {
  left: 32%;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack-2 {
  left: 48%;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-rack-3 {
  left: 64%;
}

/* VESDA / aspirating detection unit */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-vesda-unit {
  top: 8%;
  left: 43%;
  width: 90px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-vesda-unit span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Sampling pipe */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sampling-pipe {
  top: 22%;
  left: 25%;
  width: 52%;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 4;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sampling-hole {
  top: 20%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-hole-1 {
  left: 34%;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-hole-2 {
  left: 50%;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-hole-3 {
  left: 66%;
}

/* Clean agent cylinder */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-cylinder {
  left: 9%;
  bottom: 15%;
  width: 16%;
  height: 47%;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-cylinder span {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-cylinder::before {
  content: "";
  position: absolute;
  left: 34%;
  right: 34%;
  top: -18px;
  height: 20px;
  border-radius: 6px 6px 0 0;
  background: #334155;
  border: 3px solid #1d3557;
}

/* Agent pipe and nozzle */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-pipe {
  left: 20%;
  top: 30%;
  width: 54%;
  height: 7px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 4;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-nozzle {
  top: 32%;
  left: 56%;
  width: 30px;
  height: 24px;
  border-radius: 0 0 10px 10px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

/* Preaction riser */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-riser {
  right: 9%;
  bottom: 12%;
  width: 28px;
  height: 50%;
  border-radius: 999px;
  background: #64748b;
  border: 4px solid #1d3557;
  z-index: 4;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-valve {
  right: 8%;
  bottom: 34%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #facc15;
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-valve::before,
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-valve::after {
  content: "";
  position: absolute;
  background: #1d3557;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-valve::before {
  width: 80%;
  height: 6px;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-preaction-valve::after {
  width: 6px;
  height: 80%;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-waterflow {
  right: 11%;
  bottom: 20%;
  width: 44px;
  height: 30px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-waterflow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.7rem;
  font-weight: 900;
}

/* Shutdown panel */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-shutdown-panel {
  top: 35%;
  right: 13%;
  width: 86px;
  height: 44px;
  border-radius: 10px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  color: white;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-shutdown-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Abort and manual release */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-abort-switch {
  top: 32%;
  left: 14%;
  width: 72px;
  height: 40px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-abort-switch span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.7rem;
  font-weight: 900;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-manual-release {
  top: 46%;
  left: 14%;
  width: 72px;
  height: 48px;
  border-radius: 9px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  color: #ffffff;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-manual-release span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 900;
}

/* Sequence */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sequence-display {
  left: 43%;
  bottom: 17%;
  width: 82px;
  height: 52px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-sequence-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-control-line {
  left: 22%;
  top: 42%;
  width: 58%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-it-agent-warning-zone {
  left: 30%;
  bottom: 18%;
  width: 46%;
  height: 31%;
  border-radius: 999px;
  border: 4px dashed rgba(250, 204, 21, 0.85);
  background: rgba(250, 204, 21, 0.08);
  z-index: 4;
}

/* Hotspots */
.cn-room-server-it-protected-space.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-server-it-protected-space.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Industrial Special Hazard
========================================================= */

.cn-room-visual.cn-room-industrial-special-hazard.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #9ca3af 56%, #9ca3af 100%);
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-industrial-special-hazard.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-floor,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-zone,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-machine,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-tank,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-piping,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-flame-detector,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-gas-detector,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-heat-detector,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-releasing-panel,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-shutdown-panel,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-notification,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-sequence-display,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-warning-zone,
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-control-line {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Hazard zone */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-zone {
  left: 30%;
  bottom: 14%;
  width: 44%;
  height: 43%;
  border-radius: 16px;
  border: 4px dashed rgba(250, 204, 21, 0.85);
  background: rgba(250, 204, 21, 0.08);
  z-index: 3;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-zone span {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 900;
  color: rgba(127, 29, 29, 0.75);
  letter-spacing: 0.05em;
}

/* Process equipment */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-machine {
  left: 38%;
  bottom: 18%;
  width: 25%;
  height: 25%;
  border-radius: 14px;
  background: #475569;
  border: 5px solid #1d3557;
  color: white;
  z-index: 5;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-machine span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Hazard tank */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-tank {
  right: 10%;
  bottom: 16%;
  width: 15%;
  height: 44%;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(135deg, #f97316, #991b1b);
  border: 5px solid #7f1d1d;
  color: white;
  z-index: 5;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-tank span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
}

/* Piping */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-piping {
  right: 22%;
  top: 36%;
  width: 42%;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 4;
}

/* Flame detector */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-flame-detector {
  top: 8%;
  left: 40%;
  width: 70px;
  height: 34px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-flame-detector span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: #c62828;
}

/* Gas detector */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-gas-detector {
  top: 8%;
  left: 54%;
  width: 58px;
  height: 34px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-gas-detector span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 900;
  color: #1d3557;
}

/* Heat detector */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-heat-detector {
  top: 22%;
  right: 15%;
  width: 36px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-heat-detector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  transform: translateX(-50%);
}

/* Releasing control panel */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-releasing-panel {
  left: 9%;
  bottom: 16%;
  width: 18%;
  height: 43%;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-releasing-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 900;
}

/* Shutdown panel */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-shutdown-panel {
  top: 38%;
  right: 13%;
  width: 86px;
  height: 44px;
  border-radius: 10px;
  background: #c62828;
  border: 4px solid #7f1d1d;
  color: white;
  z-index: 6;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-shutdown-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Notification */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-notification {
  top: 25%;
  left: 14%;
  width: 46px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #c62828;
  z-index: 6;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-notification span {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
}

/* Sequence display */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-sequence-display {
  right: 18%;
  bottom: 17%;
  width: 82px;
  height: 52px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-sequence-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
}

/* Warning/control lines */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-warning-zone {
  left: 34%;
  bottom: 20%;
  width: 34%;
  height: 26%;
  border-radius: 999px;
  border: 4px dashed rgba(239, 68, 68, 0.65);
  background: rgba(239, 68, 68, 0.06);
  z-index: 4;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-haz-control-line {
  left: 24%;
  top: 38%;
  width: 58%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Hotspots */
.cn-room-industrial-special-hazard.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-industrial-special-hazard.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Releasing Panel Service
========================================================= */

.cn-room-visual.cn-room-releasing-panel-service.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-releasing-panel-service.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-floor,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-panel,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-disable-tag,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-bypass-tag,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-output-relay,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-meter,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-reset-button,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-docs,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-restoration-check,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-sequence-display,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-control-line,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-warning-zone {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Releasing panel */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-panel {
  left: 9%;
  bottom: 16%;
  width: 20%;
  height: 45%;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 5;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 900;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-panel::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 14%;
  height: 15px;
  border-radius: 5px;
  background: #111827;
  box-shadow:
    0 34px 0 #111827,
    0 68px 0 #111827;
}

/* Disable and bypass tags */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-disable-tag {
  top: 25%;
  left: 14%;
  width: 88px;
  height: 34px;
  border-radius: 8px;
  background: #facc15;
  border: 4px solid #1d3557;
  z-index: 7;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-bypass-tag {
  top: 40%;
  left: 14%;
  width: 88px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #c62828;
  z-index: 7;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-disable-tag span,
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-bypass-tag span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: #1d3557;
}

/* Output isolation */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-output-relay {
  top: 36%;
  right: 13%;
  width: 110px;
  height: 52px;
  border-radius: 10px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-output-relay span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: #1d3557;
}

/* Meter / test */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-meter {
  left: 39%;
  bottom: 18%;
  width: 86px;
  height: 58px;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #38bdf8;
  z-index: 6;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-meter span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
}

/* Reset button */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-reset-button {
  right: 14%;
  bottom: 18%;
  width: 86px;
  height: 58px;
  border-radius: 12px;
  background: #ffffff;
  border: 5px solid #1d3557;
  color: #c62828;
  z-index: 6;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-reset-button span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
}

/* Documentation */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-docs {
  left: 13%;
  bottom: 17%;
  width: 88px;
  height: 62px;
  border-radius: 8px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-docs::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 18px;
  height: 4px;
  background: #64748b;
  box-shadow:
    0 12px 0 #64748b,
    0 24px 0 #64748b;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-docs span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: #1d3557;
}

/* Restoration check */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-restoration-check {
  top: 12%;
  left: 44%;
  width: 72px;
  height: 52px;
  border-radius: 12px;
  background: #dcfce7;
  border: 5px solid #166534;
  color: #166534;
  z-index: 6;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-restoration-check span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 900;
}

/* Sequence */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-sequence-display {
  left: 52%;
  bottom: 18%;
  width: 82px;
  height: 58px;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-sequence-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
}

/* Control line */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-control-line {
  left: 25%;
  top: 39%;
  width: 56%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Warning zone */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-service-warning-zone {
  left: 34%;
  bottom: 15%;
  width: 45%;
  height: 42%;
  border-radius: 18px;
  border: 4px dashed rgba(250, 204, 21, 0.85);
  background: rgba(250, 204, 21, 0.08);
  z-index: 3;
}

/* Hotspots */
.cn-room-releasing-panel-service.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-releasing-panel-service.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Elevator Lobby Recall
========================================================= */

.cn-room-visual.cn-room-elevator-lobby-recall.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-floor,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-lobby-wall,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-left,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-right,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-smoke-detector,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-recall-panel,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-hat-light,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-primary-floor,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-alternate-floor,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-sequence-display,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-recall-line,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-floor-path {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Lobby wall */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-lobby-wall {
  left: 14%;
  right: 14%;
  bottom: 13%;
  height: 47%;
  border-radius: 18px;
  border: 5px solid #1d3557;
  background: rgba(255, 255, 255, 0.55);
  z-index: 3;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-lobby-wall span {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(29, 53, 87, 0.65);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Elevator doors */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-left,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-right {
  bottom: 16%;
  width: 17%;
  height: 35%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #dbe4ee 0%, #f8fafc 48%, #94a3b8 50%, #f8fafc 52%, #dbe4ee 100%);
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-left {
  left: 28%;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-right {
  right: 28%;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-left span,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-door-right span {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  text-align: center;
  color: #1d3557;
  font-size: 0.68rem;
  font-weight: 900;
}

/* Smoke detector */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-smoke-detector {
  top: 10%;
  left: 45%;
  width: 42px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-smoke-detector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  transform: translateX(-50%);
}

/* Recall relay panel */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-recall-panel {
  top: 36%;
  right: 14%;
  width: 100px;
  height: 56px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-recall-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Hat light */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-hat-light {
  top: 23%;
  right: 16%;
  width: 58px;
  height: 40px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-hat-light span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c62828;
  font-size: 0.72rem;
  font-weight: 900;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-hat-light::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
}

/* Primary and alternate recall areas */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-primary-floor,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-alternate-floor {
  bottom: 18%;
  width: 110px;
  height: 52px;
  border-radius: 12px;
  background: #ffffff;
  border: 5px solid #1d3557;
  z-index: 6;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-primary-floor {
  left: 16%;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-alternate-floor {
  right: 16%;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-primary-floor span,
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-alternate-floor span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #1d3557;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Sequence */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-sequence-display {
  left: 43%;
  bottom: 17%;
  width: 86px;
  height: 58px;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-sequence-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
}

/* Recall signal line */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-recall-line {
  left: 23%;
  top: 35%;
  width: 58%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Floor path */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-elev-floor-path {
  left: 18%;
  bottom: 26%;
  width: 64%;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
  z-index: 4;
}

/* Hotspots */
.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-elevator-lobby-recall.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Elevator Machine Room
========================================================= */

.cn-room-visual.cn-room-machine-room-control-room.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-machine-room-control-room.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-floor,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-room-outline,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-controller,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-smoke-detector,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-heat-detector,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-shunt-box,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-power-panel,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-recall-relays,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-hat-light,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-sequence-display,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-control-line,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-shunt-line,
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-warning-zone {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Room outline */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-room-outline {
  left: 10%;
  right: 10%;
  bottom: 13%;
  height: 47%;
  border-radius: 18px;
  border: 5px solid #1d3557;
  background: rgba(255, 255, 255, 0.55);
  z-index: 3;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-room-outline span {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(29, 53, 87, 0.65);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Elevator controller */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-controller {
  left: 38%;
  bottom: 17%;
  width: 23%;
  height: 36%;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #ffffff;
  z-index: 5;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-controller::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 14%;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 22px 0 #38bdf8,
    0 44px 0 #facc15,
    0 66px 0 #22c55e;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-controller span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Smoke detector */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-smoke-detector {
  top: 9%;
  left: 42%;
  width: 42px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-smoke-detector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  transform: translateX(-50%);
}

/* Heat detector */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-heat-detector {
  top: 9%;
  right: 25%;
  width: 42px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-heat-detector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f97316;
  transform: translateX(-50%);
}

/* Recall relays */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-recall-relays {
  left: 12%;
  bottom: 18%;
  width: 110px;
  height: 62px;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-recall-relays span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Power shutdown */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-power-panel {
  top: 37%;
  right: 13%;
  width: 112px;
  height: 58px;
  border-radius: 10px;
  background: #ffffff;
  border: 5px solid #1d3557;
  color: #c62828;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-power-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Shunt trip */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-shunt-box {
  right: 14%;
  bottom: 18%;
  width: 100px;
  height: 62px;
  border-radius: 12px;
  background: #c62828;
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-shunt-box span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 900;
}

/* Hat light */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-hat-light {
  top: 24%;
  right: 15%;
  width: 58px;
  height: 40px;
  border-radius: 9px;
  background: #ffffff;
  border: 4px solid #1d3557;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-hat-light span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c62828;
  font-size: 0.72rem;
  font-weight: 900;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-hat-light::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
}

/* Sequence display */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-sequence-display {
  left: 43%;
  bottom: 17%;
  width: 86px;
  height: 58px;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-sequence-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
}

/* Control lines */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-control-line {
  left: 20%;
  top: 35%;
  width: 63%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198, 40, 40, 0.9),
    rgba(198, 40, 40, 0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-shunt-line {
  right: 18%;
  top: 46%;
  width: 22%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.85),
    rgba(37, 99, 235, 0.85) 10px,
    transparent 10px,
    transparent 18px
  );
  z-index: 4;
}

/* Warning zone */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-emr-warning-zone {
  left: 34%;
  bottom: 15%;
  width: 45%;
  height: 42%;
  border-radius: 18px;
  border: 4px dashed rgba(250, 204, 21, 0.85);
  background: rgba(250, 204, 21, 0.08);
  z-index: 3;
}

/* Hotspots */
.cn-room-machine-room-control-room.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-machine-room-control-room.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Elevator Sprinkler / Shunt Trip
========================================================= */

.cn-room-visual.cn-room-sprinkler-shunt-trip.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-floor,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-room-outline,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-elevator-controller,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-sprinkler-head,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-heat-detector,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-waterflow,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-power-panel,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-trip-box,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-coordination-panel,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-reset-display,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-water-line,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-power-line,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-sequence-line,
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-warning-zone {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Room outline */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-room-outline {
  left: 10%;
  right: 10%;
  bottom: 13%;
  height: 47%;
  border-radius: 18px;
  border: 5px solid #1d3557;
  background: rgba(255,255,255,0.55);
  z-index: 3;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-room-outline span {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(29,53,87,0.65);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* Elevator controller */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-elevator-controller {
  left: 39%;
  bottom: 17%;
  width: 22%;
  height: 36%;
  border-radius: 12px;
  background: #111827;
  border: 5px solid #1d3557;
  color: white;
  z-index: 5;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-elevator-controller::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 14%;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 22px 0 #38bdf8,
    0 44px 0 #facc15,
    0 66px 0 #22c55e;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-elevator-controller span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Sprinkler head */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-sprinkler-head {
  top: 12%;
  left: 45%;
  width: 42px;
  height: 20px;
  border-radius: 0 0 12px 12px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-sprinkler-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 52px;
  height: 26px;
  border-radius: 50%;
  border: 3px dashed rgba(59,130,246,0.65);
  transform: translateX(-50%);
}

/* Heat detector */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-heat-detector {
  top: 24%;
  right: 16%;
  width: 42px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-heat-detector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f97316;
  transform: translateX(-50%);
}

/* Waterflow */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-waterflow {
  left: 13%;
  bottom: 18%;
  width: 86px;
  height: 56px;
  border-radius: 12px;
  background: #ffffff;
  border: 5px solid #1d3557;
  color: #1d3557;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-waterflow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
}

/* Power supervision */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-power-panel {
  top: 38%;
  right: 13%;
  width: 118px;
  height: 58px;
  border-radius: 10px;
  background: #ffffff;
  border: 5px solid #1d3557;
  color: #c62828;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-power-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Shunt trip */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-trip-box {
  right: 14%;
  bottom: 18%;
  width: 100px;
  height: 62px;
  border-radius: 12px;
  background: #c62828;
  border: 5px solid #7f1d1d;
  color: #ffffff;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-trip-box span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 900;
}

/* Coordination panel */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-coordination-panel {
  top: 36%;
  left: 13%;
  width: 116px;
  height: 58px;
  border-radius: 10px;
  background: #facc15;
  border: 5px solid #1d3557;
  color: #1d3557;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-coordination-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 900;
}

/* Reset */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-reset-display {
  left: 43%;
  bottom: 17%;
  width: 92px;
  height: 58px;
  border-radius: 12px;
  background: #dcfce7;
  border: 5px solid #166534;
  color: #166534;
  z-index: 6;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-reset-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
}

/* Lines */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-water-line {
  left: 18%;
  top: 30%;
  width: 56%;
  height: 7px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 4;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-power-line {
  right: 18%;
  top: 47%;
  width: 24%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(37,99,235,0.85),
    rgba(37,99,235,0.85) 10px,
    transparent 10px,
    transparent 18px
  );
  z-index: 4;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-sequence-line {
  left: 21%;
  top: 40%;
  width: 62%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198,40,40,0.9),
    rgba(198,40,40,0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

/* Warning zone */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-shunt-warning-zone {
  left: 34%;
  bottom: 15%;
  width: 45%;
  height: 42%;
  border-radius: 18px;
  border: 4px dashed rgba(250,204,21,0.85);
  background: rgba(250,204,21,0.08);
  z-index: 3;
}

/* Hotspots */
.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-sprinkler-shunt-trip.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}
/* =========================================================
   Room Visual: Special Systems Elevator Hoistway / Pit Conditions
========================================================= */

.cn-room-visual.cn-room-hoistway-pit-conditions.cn-app-special-systems {
  background:
    linear-gradient(to bottom, #eef3f8 0%, #eef3f8 56%, #b8c0c8 56%, #b8c0c8 100%);
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-visual-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 5px;
  background: rgba(29, 53, 87, 0.25);
  z-index: 1;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-floor,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-hoistway,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-elevator-car,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-pit-area,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-hoistway-detector,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-sprinkler-head,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-water-zone,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-access-door,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-recall-panel,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-coordination-panel,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-reset-display,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-waterflow,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-recall-line,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-water-line,
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-warning-zone {
  display: block !important;
  position: absolute;
}

/* Floor */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-floor {
  left: 6%;
  right: 6%;
  bottom: 10%;
  height: 36%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(rgba(29,53,87,0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc, #cbd5e1);
  background-size: 46px 46px, 46px 46px, auto;
  border: 5px solid #1d3557;
  z-index: 2;
}

/* Hoistway shaft */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-hoistway {
  left: 36%;
  bottom: 13%;
  width: 28%;
  height: 68%;
  border-radius: 16px;
  border: 6px solid #1d3557;
  background: rgba(255,255,255,0.5);
  z-index: 3;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-hoistway span {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(29,53,87,0.65);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* Elevator car */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-elevator-car {
  left: 41%;
  bottom: 34%;
  width: 18%;
  height: 25%;
  border-radius: 10px;
  background: linear-gradient(90deg, #dbe4ee 0%, #f8fafc 48%, #94a3b8 50%, #f8fafc 52%, #dbe4ee 100%);
  border: 5px solid #1d3557;
  z-index: 5;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-elevator-car span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1d3557;
  font-size: 0.75rem;
  font-weight: 900;
}

/* Elevator pit */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-pit-area {
  left: 37%;
  bottom: 14%;
  width: 26%;
  height: 16%;
  border-radius: 0 0 14px 14px;
  background: rgba(15, 23, 42, 0.12);
  border: 4px dashed rgba(29, 53, 87, 0.55);
  z-index: 4;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-pit-area span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  color: #1d3557;
  font-size: 0.58rem;
  font-weight: 900;
}

/* Hoistway detector */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-hoistway-detector {
  top: 9%;
  left: 45%;
  width: 42px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-hoistway-detector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  transform: translateX(-50%);
}

/* Sprinkler head */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-sprinkler-head {
  top: 23%;
  right: 15%;
  width: 42px;
  height: 20px;
  border-radius: 0 0 12px 12px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-sprinkler-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 52px;
  height: 26px;
  border-radius: 50%;
  border: 3px dashed rgba(59,130,246,0.65);
  transform: translateX(-50%);
}

/* Water condition */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-water-zone {
  left: 12%;
  bottom: 18%;
  width: 110px;
  height: 56px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.22);
  border: 5px solid #1d3557;
  color: #1d3557;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-water-zone span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
}

/* Pit access */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-access-door {
  right: 14%;
  bottom: 18%;
  width: 106px;
  height: 62px;
  border-radius: 10px 10px 0 0;
  background: #9b6a43;
  border: 5px solid #5c3b23;
  color: #ffffff;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-access-door span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 900;
}

/* Recall interface */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-recall-panel {
  top: 36%;
  left: 13%;
  width: 112px;
  height: 58px;
  border-radius: 10px;
  background: #111827;
  border: 5px solid #1d3557;
  color: #facc15;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-recall-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 900;
}

/* Coordination panel */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-coordination-panel {
  top: 38%;
  right: 13%;
  width: 116px;
  height: 58px;
  border-radius: 10px;
  background: #facc15;
  border: 5px solid #1d3557;
  color: #1d3557;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-coordination-panel span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 900;
}

/* Reset */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-reset-display {
  left: 43%;
  bottom: 17%;
  width: 92px;
  height: 58px;
  border-radius: 12px;
  background: #dcfce7;
  border: 5px solid #166534;
  color: #166534;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-reset-display span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
}

/* Waterflow */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-waterflow {
  top: 31%;
  right: 18%;
  width: 50px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 3px solid #1d3557;
  z-index: 6;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-waterflow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #1d3557;
}

/* Lines */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-recall-line {
  left: 22%;
  top: 42%;
  width: 58%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(198,40,40,0.9),
    rgba(198,40,40,0.9) 12px,
    transparent 12px,
    transparent 22px
  );
  z-index: 4;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-water-line {
  left: 30%;
  top: 30%;
  width: 49%;
  height: 7px;
  border-radius: 999px;
  background: #64748b;
  border: 3px solid #1d3557;
  z-index: 4;
}

/* Warning zone */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-pit-warning-zone {
  left: 35%;
  bottom: 14%;
  width: 30%;
  height: 66%;
  border-radius: 18px;
  border: 4px dashed rgba(250,204,21,0.85);
  background: rgba(250,204,21,0.06);
  z-index: 3;
}

/* Hotspots */
.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-hotspot {
  background: #c62828;
  z-index: 10;
}

.cn-room-hoistway-pit-conditions.cn-app-special-systems .cn-hotspot:hover {
  transform: scale(1.06);
}