/* Vultronix — Interactive product module panels */

.cr-hud,
.ho-hud,
.bd-hud,
.cp-hud {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.page .module-shell {
  margin-bottom: 0;
}

.module-shell {
  position: relative;
  border-radius: var(--r3);
  background: var(--ink2);
  border: 1px solid var(--edge);
  overflow: hidden;
}
.module-shell::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--mod-prime2), var(--mod-prime));
}

/* Module Header Bar */
.mod-header {
  display: flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.25rem 1.75rem;
  border-bottom: 1px solid var(--edge);
  background: rgba(0,0,0,.15);
  flex-wrap: wrap;
}
.mod-header-left { display:flex; align-items:center; gap:.85rem }
.mod-domain-badge {
  display: flex; align-items:center; gap:.5rem;
  font-family: var(--fm); font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--mod-prime);
  background: var(--mod-bg); border:1px solid var(--mod-bd);
  border-radius:8px; padding:.28rem .75rem;
}
.mod-domain-badge .live-ring {
  width:7px; height:7px; border-radius:50%;
  background: var(--green); animation:pdot 2s infinite;
}
.mod-title {
  font-family: var(--fd); font-size:1rem; font-weight:800;
  color: var(--t1); letter-spacing:-.02em;
}
.mod-subtitle { font-size:.78rem; color:var(--t3); margin-top:1px }
.mod-uptime {
  font-family: var(--fm); font-size:.65rem; font-weight:600;
  color: var(--green); letter-spacing:.08em;
}

/* Module Body */
.mod-body {
  padding: 1.75rem;
  display: flex; flex-direction:column; gap:1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SUB-COMPONENTS
═══════════════════════════════════════════════════════════════ */

/* Glass card */
.gc {
  background: var(--glass); border:1px solid var(--edge);
  border-radius: var(--r2); padding:1.35rem;
  position:relative; overflow:hidden;
  transition: border-color .25s, background .25s;
}
.gc:hover { background:var(--glass2); border-color:var(--edge2) }

/* Section label */
.sec-label {
  font-family: var(--fm); font-size:.62rem; font-weight:600;
  color: var(--mod-prime); letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;
}
.sec-label::after {
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, var(--mod-bd), transparent);
}

/* Two-column grid */
.col-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }
.col-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.col-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }

/* Metric pill */
.metric-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--mod-bg); border:1px solid var(--mod-bd);
  border-radius:999px; padding:.22rem .7rem;
  font-family:var(--fm); font-size:.65rem; font-weight:600;
  color: var(--mod-prime);
}

/* Status dot */
.sdot {
  display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.sdot-green  { background:#10d9a0 }
.sdot-amber  { background:#f59e0b }
.sdot-red    { background:#ef4444; animation:pdot 1.5s infinite }
.sdot-blue   { background:#22d3ee }
.sdot-purple { background:#a78bfa }

to{opacity:1;transform:scale(1)} }

}


/* ═══════════════════════════════════════════════════════════════
   ███  MODULE 1: CRUSHER OPTIMA
═══════════════════════════════════════════════════════════════ */
.domain-crusher .module-shell { --mod-prime:#f59e0b; --mod-prime2:#dc2626; --mod-glow:rgba(245,158,11,.15); --mod-glow2:rgba(245,158,11,.07); --mod-bd:rgba(245,158,11,.25); --mod-bg:rgba(245,158,11,.08) }

/* HUD top row */
.crusher-hud { display:grid; grid-template-columns:1.4fr 1fr; gap:1.25rem }

/* Output gauge card */
.output-gauge-card {
  background: linear-gradient(135deg, rgba(245,158,11,.06), var(--glass));
  border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--r2); padding:1.5rem;
  position:relative; overflow:hidden;
}
.output-gauge-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1.5px;
  background: linear-gradient(90deg, #dc2626, #f59e0b);
}

.gauge-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.25rem }
.gauge-label { font-family:var(--fm); font-size:.65rem; font-weight:600; color:var(--t3); letter-spacing:.1em; text-transform:uppercase }
.gauge-status-pill {
  display:flex; align-items:center; gap:.4rem;
  background:rgba(16,217,160,.1); border:1px solid rgba(16,217,160,.25);
  border-radius:999px; padding:.18rem .65rem;
  font-family:var(--fm); font-size:.6rem; font-weight:700;
  color:#10d9a0; letter-spacing:.08em;
}

/* Central SVG radial gauge */
.gauge-svg-wrap { display:flex; justify-content:center; align-items:center; position:relative; margin-bottom:1rem }
.gauge-center-value {
  position:absolute; text-align:center;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.gcv-num  { font-family:var(--fd); font-size:2.1rem; font-weight:800; letter-spacing:-.04em; color:#f59e0b; line-height:1 }
.gcv-unit { font-family:var(--fm); font-size:.62rem; font-weight:600; color:var(--t3); letter-spacing:.1em; margin-top:2px }
.gcv-sub  { font-size:.7rem; color:var(--t3); margin-top:4px }

/* Progress bars row */
.gauge-bars { display:flex; flex-direction:column; gap:.7rem; margin-top:.5rem }
.gbar-row   { display:flex; flex-direction:column; gap:.3rem }
.gbar-meta  { display:flex; justify-content:space-between; align-items:center }
.gbar-name  { font-size:.72rem; color:var(--t2); font-weight:500 }
.gbar-val   { font-family:var(--fm); font-size:.7rem; font-weight:700; color:var(--mod-prime) }
.gbar-track {
  height:6px; border-radius:999px;
  background: var(--edge);
  position:relative; overflow:hidden;
}
.gbar-fill {
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--mod-prime2), var(--mod-prime));
  width: var(--fill);
  animation: progFill 1.4s cubic-bezier(.16,1,.3,1) both;
  position:relative; overflow:hidden;
}
.gbar-fill::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation: shimBar 2.2s 1.5s ease infinite;
}

/* Sensor status mini-grid */
.sensor-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem }
.sscard {
  background: var(--glass); border:1px solid var(--edge);
  border-radius:var(--r); padding:.85rem 1rem;
  transition: border-color .22s;
}
.sscard.warn { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.05) }
.sscard.ok   { border-color:rgba(16,217,160,.25) }
.sscard.crit { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.05); animation:alertPulse 2s infinite }
.sscard-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem }
.sscard-id   { font-family:var(--fm); font-size:.62rem; font-weight:700; color:var(--t3); letter-spacing:.08em }
.sscard-val  { font-family:var(--fm); font-size:.8rem; font-weight:700; color:var(--t1) }
.sscard-label{ font-size:.7rem; color:var(--t3) }

/* Diagnostic Terminal */
.diag-terminal {
  background: #020810;
  border: 1px solid rgba(245,158,11,.18);
  border-radius: var(--r2); overflow:hidden;
}
.term-titlebar {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  background: rgba(0,0,0,.4);
  border-bottom:1px solid rgba(245,158,11,.1);
}
.term-dot { width:9px; height:9px; border-radius:50% }
.term-dot-r { background:#ef4444 }
.term-dot-y { background:#f59e0b }
.term-dot-g { background:#10d9a0 }
.term-name {
  margin-left:.4rem; font-family:var(--fm); font-size:.62rem;
  font-weight:600; color:var(--t3); letter-spacing:.1em;
}
.term-ping {
  margin-left:auto; display:flex; align-items:center; gap:.35rem;
  font-family:var(--fm); font-size:.6rem; color:#10d9a0;
}
.term-ping-dot { width:5px; height:5px; border-radius:50%; background:#10d9a0; animation:pdot 1.8s infinite }

.term-body {
  padding:.85rem 1rem;
  height:240px; overflow-y:auto;
  display:flex; flex-direction:column; gap:.28rem;
  scroll-behavior:smooth;
}
.term-line {
  display:flex; gap:.75rem; align-items:baseline;
  font-family:var(--fm); font-size:.7rem; line-height:1.5;
  animation: termIn .25s cubic-bezier(.16,1,.3,1) both;
}
.term-ts    { color:rgba(245,158,11,.55); flex-shrink:0; letter-spacing:.04em }
.term-src   { color:rgba(0,212,255,.7); flex-shrink:0; font-weight:700 }
.term-msg   { color:rgba(255,255,255,.65); flex:1 }
.term-msg.ok   { color:rgba(16,217,160,.9) }
.term-msg.warn { color:rgba(245,158,11,.95) }
.term-msg.crit { color:rgba(239,68,68,.95); font-weight:700 }

.term-input-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  border-top:1px solid rgba(245,158,11,.1);
  background:rgba(0,0,0,.3);
}
.term-prompt { font-family:var(--fm); font-size:.7rem; color:rgba(245,158,11,.6); flex-shrink:0 }
.term-cursor { display:inline-block; width:6px; height:11px; background:rgba(245,158,11,.7); animation:pdot 1.1s infinite; vertical-align:middle }

/* OEE strip */
.oee-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem }
.oee-card {
  background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r); padding:1rem; text-align:center;
  transition:all .25s;
}
.oee-card:hover { background:var(--glass2); border-color:rgba(245,158,11,.3) }
.oee-num {
  font-family:var(--fd); font-size:1.6rem; font-weight:800;
  letter-spacing:-.04em; color:#f59e0b; line-height:1;
  animation: ctrUp .6s cubic-bezier(.16,1,.3,1) both;
}
.oee-num.green { color:#10d9a0 }
.oee-num.red   { color:#ef4444 }
.oee-num.blue  { color:#22d3ee }
.oee-lbl { font-size:.7rem; color:var(--t3); margin-top:.35rem; font-weight:500 }


/* ═══════════════════════════════════════════════════════════════
   ███  MODULE 2: HOME OPTIMA
═══════════════════════════════════════════════════════════════ */
.domain-home .module-shell { --mod-prime:#d4a96a; --mod-prime2:#7c3aed; --mod-glow:rgba(212,169,106,.14); --mod-glow2:rgba(212,169,106,.06); --mod-bd:rgba(212,169,106,.24); --mod-bg:rgba(212,169,106,.08) }

.home-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:1.25rem }

/* Scene selector */
.scene-selector-card {
  background: linear-gradient(135deg, rgba(212,169,106,.06), var(--glass));
  border:1px solid rgba(212,169,106,.18); border-radius:var(--r2); padding:1.35rem;
}
.scene-tabs {
  display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.35rem;
}
.scene-btn {
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1.1rem; border-radius:var(--r);
  border:1px solid var(--edge); background:var(--glass);
  cursor:pointer; transition:all .28s cubic-bezier(.16,1,.3,1);
  text-align:left; position:relative; overflow:hidden;
}
.scene-btn::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background: var(--scene-c, #d4a96a); transform:scaleY(0);
  transform-origin:center; transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.scene-btn.active {
  border-color: var(--scene-c, #d4a96a);
  background: var(--scene-bg, rgba(212,169,106,.08));
}
.scene-btn.active::after { transform:scaleY(1) }
.scene-btn:hover:not(.active) { border-color:var(--edge2); background:var(--glass2) }
.scene-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:var(--scene-bg,rgba(212,169,106,.1));
  border:1px solid var(--scene-bd, rgba(212,169,106,.2));
  transition:all .28s;
}
.scene-btn.active .scene-icon { box-shadow:0 0 14px var(--scene-glow, rgba(212,169,106,.3)) }
.scene-info { flex:1 }
.scene-name  { font-family:var(--fd); font-size:.88rem; font-weight:700; color:var(--t1) }
.scene-desc  { font-size:.72rem; color:var(--t3); margin-top:1px }
.scene-check {
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--edge2); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:.6rem; color:transparent;
  transition:all .22s;
}
.scene-btn.active .scene-check {
  background:var(--scene-c,#d4a96a); border-color:var(--scene-c,#d4a96a); color:#fff;
}

/* Active scene state display */
.scene-state-panel {
  background:var(--glass); border:1px solid var(--edge); border-radius:var(--r);
  padding:.85rem 1rem;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.state-chip {
  display:flex; align-items:center; gap:.35rem;
  font-family:var(--fm); font-size:.62rem; font-weight:600;
  padding:.2rem .6rem; border-radius:6px;
  background:var(--chip-bg,rgba(255,255,255,.05));
  border:1px solid var(--chip-bd,var(--edge));
  color: var(--chip-c, var(--t3));
  transition:all .3s;
}

/* Temperature slider card */
.temp-slider-card {
  background: linear-gradient(135deg, rgba(212,169,106,.05), rgba(99,102,241,.05));
  border:1px solid rgba(212,169,106,.15); border-radius:var(--r2); padding:1.35rem;
  display:flex; flex-direction:column; gap:1.25rem;
}

/* Radial temperature ring */
.radial-wrap {
  display:flex; justify-content:center; align-items:center;
  position:relative; padding:.5rem 0;
}
.radial-center {
  position:absolute; text-align:center;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.radial-val   { font-family:var(--fd); font-size:1.65rem; font-weight:800; color:#d4a96a; line-height:1 }
.radial-unit  { font-family:var(--fm); font-size:.62rem; color:var(--t3); margin-top:2px; letter-spacing:.08em }
.radial-label { font-size:.68rem; color:var(--t3); margin-top:3px }

/* Custom colour temperature slider */
.cct-slider-wrap { display:flex; flex-direction:column; gap:.55rem }
.cct-labels { display:flex; justify-content:space-between; font-family:var(--fm); font-size:.62rem; color:var(--t3) }
.cct-track  { position:relative; height:8px; border-radius:999px; cursor:pointer }
.cct-gradient-bg {
  position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(90deg, #1c6fe8 0%, #c8a45a 45%, #ff7b35 100%);
  opacity:.8;
}
input[type=range].cct-input {
  position:relative; z-index:2; width:100%; margin:0;
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer; height:8px;
}
input[type=range].cct-input::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:#d4a96a;
  border:2.5px solid var(--ink2);
  box-shadow:0 0 10px rgba(212,169,106,.5);
  cursor:grab; transition:box-shadow .2s;
  margin-top:-6px;
}
input[type=range].cct-input::-webkit-slider-thumb:active { cursor:grabbing; box-shadow:0 0 18px rgba(212,169,106,.8) }
input[type=range].cct-input::-webkit-slider-runnable-track { height:8px; border-radius:999px; background:transparent }
input[type=range].cct-input::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:#d4a96a; border:2.5px solid var(--ink2);
  box-shadow:0 0 10px rgba(212,169,106,.5); cursor:grab;
}
input[type=range].cct-input:focus { outline:none }
.cct-readout {
  display:flex; justify-content:center; align-items:baseline; gap:.35rem;
  font-family:var(--fm); font-size:.75rem; font-weight:700; color:#d4a96a;
}
.cct-readout span { font-size:.6rem; color:var(--t3); font-weight:500 }

/* Room tiles grid */
.room-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem }
.room-tile {
  background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r); padding:.85rem; text-align:center;
  cursor:pointer; transition:all .25s; position:relative;
}
.room-tile.armed  { border-color:rgba(16,217,160,.35); background:rgba(16,217,160,.05) }
.room-tile.alert  { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.05); animation:alertPulse 2.5s infinite }
.room-tile.active { border-color:rgba(212,169,106,.35); background:rgba(212,169,106,.07) }
.room-tile:hover  { border-color:var(--edge2); background:var(--glass2) }
.room-tile-icon   { font-size:1.25rem; margin-bottom:.4rem }
.room-tile-name   { font-size:.7rem; color:var(--t2); font-weight:600 }
.room-tile-status { font-family:var(--fm); font-size:.58rem; color:var(--t3); margin-top:2px }

/* Energy mini chart */
.energy-spark { display:flex; align-items:flex-end; gap:2px; height:36px; padding:0 .1rem }
.es-bar {
  flex:1; border-radius:3px 3px 0 0;
  background: linear-gradient(180deg, #d4a96a, rgba(212,169,106,.3));
  min-width:4px;
  transition:height .3s cubic-bezier(.16,1,.3,1);
}


/* ═══════════════════════════════════════════════════════════════
   ███  MODULE 3: BUILDING OPTIMA
═══════════════════════════════════════════════════════════════ */
.domain-building .module-shell { --mod-prime:#22d3ee; --mod-prime2:#1e40af; --mod-glow:rgba(34,211,238,.15); --mod-glow2:rgba(34,211,238,.06); --mod-bd:rgba(34,211,238,.22); --mod-bg:rgba(34,211,238,.07) }

.building-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }

/* Zone matrix */
.zone-matrix { display:flex; flex-direction:column; gap:.75rem }
.zone-card {
  background: var(--glass); border:1px solid var(--edge);
  border-radius:var(--r2); padding:1.1rem 1.25rem;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  transition:all .28s; position:relative; overflow:hidden;
}
.zone-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--zc, #22d3ee);
}
.zone-card.nominal  { --zc:#22d3ee }
.zone-card.elevated { --zc:#f59e0b; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.04) }
.zone-card.critical { --zc:#ef4444; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.05); animation:alertPulse 2s infinite }
.zone-card.offline  { --zc:#6b7280; opacity:.65 }
.zone-card:hover    { background:var(--glass2) }

.zone-id-col { display:flex; flex-direction:column; align-items:center; gap:.25rem }
.zone-id {
  font-family:var(--fd); font-size:.8rem; font-weight:800; color:var(--t1);
  background:rgba(255,255,255,.06); border:1px solid var(--edge);
  border-radius:8px; padding:.3rem .6rem; white-space:nowrap;
}
.zone-floor { font-family:var(--fm); font-size:.58rem; color:var(--t3); letter-spacing:.06em }

.zone-data-col { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem }
.zdp { display:flex; flex-direction:column; gap:.15rem }
.zdp-label { font-family:var(--fm); font-size:.56rem; color:var(--t3); letter-spacing:.09em; text-transform:uppercase }
.zdp-value { font-family:var(--fm); font-size:.8rem; font-weight:700; color:var(--t1) }
.zdp-value.hi    { color:#f59e0b }
.zdp-value.crit  { color:#ef4444 }
.zdp-value.good  { color:#10d9a0 }
.zdp-value.dim   { color:var(--t3) }

/* Occupancy bar in zone */
.occ-bar-track { height:4px; border-radius:999px; background:var(--edge); margin-top:.25rem; overflow:hidden }
.occ-bar-fill  { height:100%; border-radius:999px; background:var(--zc,#22d3ee); transition:width .6s cubic-bezier(.16,1,.3,1) }

.zone-status-col { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem }
.zone-badge {
  font-family:var(--fm); font-size:.56rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.2rem .55rem; border-radius:6px;
  border:1px solid;
}
.zone-badge.nominal  { color:#22d3ee; border-color:rgba(34,211,238,.3); background:rgba(34,211,238,.08) }
.zone-badge.elevated { color:#f59e0b; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08) }
.zone-badge.critical { color:#ef4444; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.1) }
.zone-badge.offline  { color:var(--t3); border-color:var(--edge); background:var(--glass) }
.zone-ach { font-family:var(--fm); font-size:.65rem; color:var(--t3) }

/* Anomaly alert overlay */
.anomaly-overlay {
  position:relative; border-radius:var(--r2);
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.06); overflow:hidden;
  display:none;
}
.anomaly-overlay.active { display:block; animation:slideUp .3s cubic-bezier(.16,1,.3,1) }
.anomaly-pulse-bar {
  height:2px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  animation:shimBar 1.5s linear infinite;
  position:relative; overflow:hidden;
}
.anomaly-body { padding:1rem 1.25rem; display:flex; align-items:flex-start; gap:1rem }
.anomaly-icon {
  font-size:1.5rem; flex-shrink:0;
  width:44px; height:44px; border-radius:11px;
  background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3);
  display:flex; align-items:center; justify-content:center;
  animation:alertPulse 1.8s infinite;
}
.anomaly-text-col { flex:1 }
.anomaly-title { font-family:var(--fd); font-size:.95rem; font-weight:800; color:#ef4444; margin-bottom:.2rem }
.anomaly-detail { font-size:.78rem; color:var(--t2); line-height:1.6 }
.anomaly-detail strong { color:var(--t1) }
.anomaly-meta  { font-family:var(--fm); font-size:.62rem; color:var(--t3); margin-top:.5rem }
.anomaly-actions { display:flex; gap:.5rem; margin-top:.85rem }
.anomaly-btn-ack {
  background: rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4);
  border-radius:8px; padding:.4rem .9rem; font-size:.75rem; font-weight:700;
  color:#ef4444; cursor:pointer; transition:all .2s;
}
.anomaly-btn-ack:hover { background:rgba(239,68,68,.25) }
.anomaly-btn-dismiss {
  background:var(--glass); border:1px solid var(--edge);
  border-radius:8px; padding:.4rem .9rem; font-size:.75rem; font-weight:700;
  color:var(--t2); cursor:pointer; transition:all .2s;
}
.anomaly-btn-dismiss:hover { background:var(--glass2); color:var(--t1) }

/* Building energy panel */
.building-energy-panel {
  background:linear-gradient(135deg,rgba(34,211,238,.05),var(--glass));
  border:1px solid rgba(34,211,238,.15); border-radius:var(--r2); padding:1.35rem;
}
.energy-donut-row { display:flex; align-items:center; gap:1.5rem }
.energy-legend { display:flex; flex-direction:column; gap:.55rem; flex:1 }
.elg-item { display:flex; align-items:center; gap:.6rem }
.elg-swatch { width:10px; height:10px; border-radius:3px; flex-shrink:0 }
.elg-name  { font-size:.74rem; color:var(--t2); flex:1 }
.elg-pct   { font-family:var(--fm); font-size:.72rem; font-weight:700; color:var(--t1) }

/* Anomaly trigger button */
.trigger-anomaly-btn {
  width:100%; padding:.75rem; border-radius:var(--r);
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.28);
  color:#ef4444; font-family:var(--fd); font-size:.85rem; font-weight:700;
  cursor:pointer; transition:all .25s; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
}
.trigger-anomaly-btn:hover { background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.5); box-shadow:0 0 20px rgba(239,68,68,.2) }
.trigger-anomaly-btn:active { transform:scale(.98) }

/* System health mini row */
.sys-health-row { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem }
.shc {
  background:var(--glass); border:1px solid var(--edge); border-radius:var(--r);
  padding:.75rem; text-align:center; transition:all .25s;
}
.shc:hover { background:var(--glass2) }
.shc-num  { font-family:var(--fm); font-size:1.1rem; font-weight:700; color:#22d3ee }
.shc-lbl  { font-size:.65rem; color:var(--t3); margin-top:.2rem }


/* ═══════════════════════════════════════════════════════════════
   ███  MODULE 4: CROP OPTIMA
═══════════════════════════════════════════════════════════════ */
.domain-crop .module-shell { --mod-prime:#10d9a0; --mod-prime2:#b45309; --mod-glow:rgba(16,217,160,.14); --mod-glow2:rgba(16,217,160,.06); --mod-bd:rgba(16,217,160,.22); --mod-bg:rgba(16,217,160,.08) }

.crop-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:1.25rem }

/* Sensor matrix */
.sensor-matrix { display:grid; grid-template-columns:1fr 1fr; gap:.85rem }
.sensor-card {
  background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r2); padding:1.15rem;
  position:relative; overflow:hidden; transition:all .28s;
}
.sensor-card:hover { background:var(--glass2); border-color:var(--edge2) }
.sensor-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1.5px;
  background: var(--sc-accent, linear-gradient(90deg,#059669,#10d9a0));
}
.sensor-card-n { --sc-accent:linear-gradient(90deg,#15803d,#10d9a0) }
.sensor-card-p { --sc-accent:linear-gradient(90deg,#b45309,#f59e0b) }
.sensor-card-k { --sc-accent:linear-gradient(90deg,#7c3aed,#a78bfa) }
.sensor-card-m { --sc-accent:linear-gradient(90deg,#1e40af,#22d3ee) }

.sensor-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.85rem }
.sensor-icon-wrap {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--edge2);
}
.sensor-icon-wrap svg { width:20px; height:20px }
.sensor-top-right { text-align:right }
.sensor-id   { font-family:var(--fm); font-size:.58rem; color:var(--t3); letter-spacing:.08em; display:block }
.sensor-freq { font-family:var(--fm); font-size:.6rem; font-weight:600 }
.sensor-freq.fast   { color:#10d9a0 }
.sensor-freq.normal { color:#22d3ee }
.sensor-freq.slow   { color:#f59e0b }
.sensor-freq.paused { color:var(--t3) }

.sensor-name  { font-family:var(--fd); font-size:.78rem; font-weight:700; color:var(--t1); margin-bottom:.15rem }
.sensor-chem  { font-family:var(--fm); font-size:.6rem; color:var(--t3) }
.sensor-value-row { display:flex; align-items:baseline; gap:.3rem; margin-bottom:.6rem }
.sensor-big-val {
  font-family:var(--fd); font-size:2rem; font-weight:800;
  letter-spacing:-.04em; color:var(--t1); line-height:1;
  transition:color .4s;
}
.sensor-big-val.hi   { color:#f59e0b }
.sensor-big-val.low  { color:#ef4444 }
.sensor-big-val.good { color:#10d9a0 }
.sensor-unit  { font-family:var(--fm); font-size:.68rem; color:var(--t3); font-weight:500 }
.sensor-range { font-family:var(--fm); font-size:.62rem; color:var(--t3) }

/* Sensor level bar */
.slevel-track { height:5px; border-radius:999px; background:var(--edge); overflow:hidden; margin-bottom:.5rem }
.slevel-fill  {
  height:100%; border-radius:999px;
  background: var(--sc-accent, linear-gradient(90deg,#059669,#10d9a0));
  transition:width .8s cubic-bezier(.16,1,.3,1);
}

.sensor-status-row { display:flex; align-items:center; justify-content:space-between }
.sensor-status-badge {
  font-family:var(--fm); font-size:.58rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:.15rem .5rem; border-radius:5px;
}
.ssb-good  { background:rgba(16,217,160,.1); border:1px solid rgba(16,217,160,.3); color:#10d9a0 }
.ssb-warn  { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#f59e0b }
.ssb-crit  { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#ef4444 }
.ssb-pause { background:var(--glass); border:1px solid var(--edge); color:var(--t3) }
.sensor-trend { font-family:var(--fm); font-size:.65rem; font-weight:700 }
.trend-up   { color:#10d9a0 }
.trend-down { color:#ef4444 }
.trend-flat { color:var(--t3) }

/* Alert config form */
.alert-config-card {
  background:linear-gradient(135deg,rgba(16,217,160,.05),var(--glass));
  border:1px solid rgba(16,217,160,.15); border-radius:var(--r2); padding:1.35rem;
  display:flex; flex-direction:column; gap:1.1rem;
}
.alert-form { display:flex; flex-direction:column; gap:.85rem }
.af-row { display:flex; align-items:center; justify-content:space-between; gap:1rem }
.af-label-col { flex:1 }
.af-label     { font-size:.82rem; font-weight:600; color:var(--t1) }
.af-sub       { font-size:.7rem; color:var(--t3); margin-top:1px }
.af-control   { display:flex; align-items:center; gap:.6rem; flex-shrink:0 }

/* Toggle switch */
.toggle-wrap  { position:relative; width:40px; height:22px; cursor:pointer }
.toggle-input { position:absolute; opacity:0; width:0; height:0 }
.toggle-track {
  position:absolute; inset:0; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid var(--edge2);
  transition:all .28s;
}
.toggle-input:checked + .toggle-track { background:#10d9a0; border-color:#10d9a0 }
.toggle-thumb {
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; transition:all .28s cubic-bezier(.16,1,.3,1);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.toggle-input:checked ~ .toggle-thumb { left:20px }

/* Frequency select */
.freq-select {
  background:var(--glass); border:1px solid var(--edge2);
  border-radius:8px; padding:.35rem .7rem;
  font-family:var(--fm); font-size:.72rem; color:var(--t1);
  cursor:pointer; appearance:none; outline:none;
  transition:border-color .2s;
  min-width:90px;
}
.freq-select:focus  { border-color:rgba(16,217,160,.5) }
.freq-select option { background:var(--ink2) }

/* Divider */
.af-divider { height:1px; background:var(--edge); margin:-.1rem 0 }

/* Submit alert config */
.af-submit-row { padding-top:.25rem }
.af-save-btn {
  width:100%; padding:.7rem; border-radius:var(--r);
  background:rgba(16,217,160,.12); border:1px solid rgba(16,217,160,.3);
  color:#10d9a0; font-family:var(--fd); font-size:.85rem; font-weight:700;
  cursor:pointer; transition:all .25s; display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.af-save-btn:hover { background:rgba(16,217,160,.22); box-shadow:0 0 18px rgba(16,217,160,.2) }
.af-save-btn:active { transform:scale(.98) }

/* Saved toast within card */
.af-saved-msg {
  display:none; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--fm); font-size:.72rem; font-weight:700; color:#10d9a0;
  padding:.5rem; border-radius:8px;
  background:rgba(16,217,160,.08); border:1px solid rgba(16,217,160,.2);
  animation:slideUp .3s;
}
.af-saved-msg.show { display:flex }

/* Field stats row */
.field-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem }
.fstat {
  background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r); padding:.85rem; text-align:center;
}
.fstat-val { font-family:var(--fd); font-size:1.3rem; font-weight:800; color:#10d9a0; line-height:1 }
.fstat-lbl { font-size:.65rem; color:var(--t3); margin-top:.35rem }

/* Irrigation map mini */
.irr-zones { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-top:.25rem }
.izb {
  border-radius:6px; padding:.5rem .3rem; text-align:center;
  font-family:var(--fm); font-size:.6rem; font-weight:700;
  border:1px solid; cursor:pointer; transition:all .25s;
}
.izb.on   { background:rgba(16,217,160,.12); border-color:rgba(16,217,160,.35); color:#10d9a0 }
.izb.dry  { background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.35); color:#f59e0b }
.izb.off  { background:var(--glass); border-color:var(--edge); color:var(--t3) }
.izb.irr  { background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.35); color:#22d3ee; animation:pdot 2s infinite }
.izb-label { display:block; font-size:.58rem; margin-top:1px; opacity:.7 }