/* ═══════════════════════════════════════════════════════════
   BlueSim — Shared Simulator Theme  ·  FUTURISTIC EDITION
   All simulators import this file for consistent styling.
   Override :root variables per-simulator for custom palettes.
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts: loaded via <link> in each simulator HTML for performance ── */

/* ── Default Theme Variables (neon-cyber palette) ── */
:root {
  --bg:       #020a12;
  --bg2:      #071824;
  --bg3:      #0c2234;
  --panel:    rgba(6, 18, 32, 0.85);
  --border:   rgba(0, 200, 255, 0.12);
  --border2:  rgba(0, 200, 255, 0.18);
  --green:    #00ff88;
  --green2:   #00d46a;
  --amber:    #ffb300;
  --red:      #ff2255;
  --red2:     #cc0033;
  --orange:   #ff7722;
  --cyan:     #00e5ff;
  --blue:     #4488ff;
  --white:    #e4f0ff;
  --muted:    #6ea8cc;
  --font-mono: 'Share Tech Mono', monospace;
  --font-ui:   'Exo 2', sans-serif;

  /* ── Futuristic additions ── */
  --glow-cyan:  0 0 12px rgba(0, 229, 255, 0.25), 0 0 40px rgba(0, 229, 255, 0.06);
  --glow-green: 0 0 10px rgba(0, 255, 136, 0.2);
  --glow-red:   0 0 10px rgba(255, 34, 85, 0.25);
  --glow-amber: 0 0 10px rgba(255, 179, 0, 0.2);
  --glass:      rgba(8, 24, 44, 0.65);
  --glass-border: rgba(0, 200, 255, 0.1);
  --glass-blur: 16px;
  --radius:     6px;
  --radius-lg:  10px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0,229,255,0.03) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,100,255,0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0,255,136,0.015) 0%, transparent 40%);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  overflow: hidden;
  height: 100vh;
  user-select: none;
}

/* ── Subtle grid overlay for sci-fi depth ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ═══ HEADER ═══ */
#header, #hdr {
  background: linear-gradient(180deg, rgba(10,30,50,0.95) 0%, rgba(5,18,32,0.98) 100%);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 2px 20px rgba(0,229,255,0.06), inset 0 -1px 0 rgba(0,229,255,0.08);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  gap: 10px;
  position: relative;
  z-index: 10;
}
#header .title, .htitle, .h-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 2px;
  font-family: var(--font-mono);
  text-shadow: 0 0 20px rgba(0,229,255,0.4), 0 0 60px rgba(0,229,255,0.1);
}
#header .subtitle, .hsub, .h-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
  letter-spacing: 0.5px;
}
#clock, #hclock {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--green);
  flex-shrink: 0;
  text-shadow: var(--glow-green);
  letter-spacing: 1px;
}
#exit-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 14px;
  background: rgba(255,34,85,0.06);
  border: 1px solid rgba(255,34,85,0.4);
  color: var(--red);
  text-decoration: none;
  border-radius: var(--radius);
  letter-spacing: 1px;
  flex-shrink: 0;
  transition: all .2s ease;
}
#exit-btn:hover {
  background: var(--red);
  color: #fff;
  box-shadow: var(--glow-red), 0 0 30px rgba(255,34,85,0.15);
}
#fs-btn {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 3px 10px;
  background: rgba(0,229,255,0.04);
  border: 1px solid rgba(0,229,255,0.15);
  color: var(--muted);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s ease;
}
#fs-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--glow-cyan);
}
#help-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 14px;
  background: rgba(0,229,255,0.04);
  border: 1px solid rgba(0,229,255,0.3);
  color: var(--cyan);
  text-decoration: none;
  border-radius: var(--radius);
  letter-spacing: 1px;
  flex-shrink: 0;
  transition: all .2s ease;
  cursor: pointer;
}
#help-btn:hover {
  background: var(--cyan);
  color: #000;
  box-shadow: var(--glow-cyan);
}
.eng-badge, .hbadge {
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.25);
  padding: 3px 10px;
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 1px;
  flex-shrink: 0;
  border-radius: var(--radius);
}

/* ═══ PANELS — Glassmorphism ═══ */
.panel {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
}
/* Standard naming */
.panel-header, .ph, .rp-hd, .s-hd {
  background: linear-gradient(180deg, rgba(12,34,52,0.9) 0%, rgba(8,24,40,0.95) 100%);
  border-bottom: 1px solid var(--border);
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  text-shadow: 0 0 12px rgba(0,229,255,0.3);
}
.panel-header .dot, .ph .dot, .phdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}
.panel-body, .pb, .rp-body {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}
.panel-body::-webkit-scrollbar, .pb::-webkit-scrollbar, .rp-body::-webkit-scrollbar, .rp-scroll::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-thumb, .pb::-webkit-scrollbar-thumb, .rp-body::-webkit-scrollbar-thumb, .rp-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,229,255,0.2);
  border-radius: 2px;
}
.panel-body::-webkit-scrollbar-track, .pb::-webkit-scrollbar-track { background: transparent; }
.scrollable { overflow-y: auto; flex: 1; }
.scrollable::-webkit-scrollbar { width: 3px; }
.scrollable::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 2px; }

/* ═══ KEYFRAMES ═══ */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes blink { 0%,49%{opacity:1} 50%,99%{opacity:0} }
@keyframes alarmblink {
  0%,100%{background:rgba(255,34,85,0.08)}
  50%{background:rgba(255,34,85,0.25)}
}
@keyframes flowdash { to{stroke-dashoffset:-20} }
@keyframes h2flash { 0%,100%{background:rgba(64,255,170,.05)} 50%{background:rgba(64,255,170,.2)} }
@keyframes fireflash { 0%,100%{background:rgba(255,68,34,.08)} 50%{background:rgba(255,68,34,.3)} }
@keyframes plreq { 0%,100%{box-shadow:0 0 0 1px #ffc107} 50%{box-shadow:0 0 6px 2px rgba(255,193,7,0.4)} }
@keyframes glowpulse {
  0%,100%{ box-shadow: 0 0 4px rgba(0,229,255,0.1); }
  50%{ box-shadow: 0 0 12px rgba(0,229,255,0.2); }
}
@keyframes neonflicker {
  0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:0.8} 94%{opacity:1} 96%{opacity:0.9} 97%{opacity:1}
}

/* ═══ SEPARATOR ═══ */
.sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 0;
  opacity: 0.6;
}

/* ═══ CONTROL LABELS ═══ */
.ctrl-label, .ctrl-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

/* ═══ GAUGES (standard naming) ═══ */
.gauge-row, .g-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.gauge-group { margin-bottom: 9px; }
.gauge-label, .g-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.gauge-label span:first-child, .g-lbl span:first-child {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.gauge-value, .g-val {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--green);
  text-shadow: var(--glow-green);
}
.gauge-value.warn, .g-val.warn { color: var(--amber); text-shadow: var(--glow-amber); }
.gauge-value.alarm, .g-val.alarm { color: var(--red); text-shadow: var(--glow-red); animation: blink .6s infinite; }
.gauge-unit, .g-unit {
  font-size: 10px;
  color: var(--muted);
  margin-left: 2px;
}
.gauge-bar-track, .g-trk {
  height: 8px;
  background: rgba(0,229,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0,229,255,0.08);
}
.gauge-bar, .g-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  transition: width .3s ease, background .3s;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,255,136,0.2);
}

/* ═══ VALVE BUTTONS ═══ */
.valve-row, .v-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
.valve-btn, .v-btn {
  padding: 4px 8px;
  font-size: 9px;
  font-family: var(--font-mono);
  border: 1px solid rgba(0,229,255,0.12);
  background: rgba(0,0,0,0.3);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all .2s ease;
}
.valve-btn:hover, .v-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px rgba(0,229,255,0.15);
}
.valve-btn.open, .v-btn.open {
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.4);
  color: var(--green);
  box-shadow: 0 0 6px rgba(0,255,136,0.1);
}
.valve-btn.closed, .v-btn.closed {
  background: rgba(255,34,85,0.06);
  border-color: rgba(255,34,85,0.3);
  color: var(--red);
}
.valve-btn.transitioning, .v-btn.transitioning {
  background: rgba(255,179,0,0.08);
  border-color: rgba(255,179,0,0.35);
  color: var(--amber);
  box-shadow: var(--glow-amber);
}

/* ═══ BIG ACTION BUTTONS ═══ */
.big-btn {
  width: 100%;
  padding: 8px;
  margin-bottom: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .2s ease;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.big-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  pointer-events: none;
}
.big-btn.start, .big-btn.btn-fc {
  background: rgba(0,255,136,0.06);
  border-color: rgba(0,255,136,0.35);
  color: var(--green);
}
.big-btn.start:hover, .big-btn.btn-fc:hover {
  background: rgba(0,255,136,0.15);
  box-shadow: var(--glow-green);
}
.big-btn.stop-eng {
  background: rgba(255,179,0,0.06);
  border-color: rgba(255,179,0,0.35);
  color: var(--amber);
}
.big-btn.stop-eng:hover {
  background: rgba(255,179,0,0.15);
  box-shadow: var(--glow-amber);
}
.big-btn.esd, .btn-esd {
  background: rgba(255,34,85,0.08);
  border-color: rgba(255,34,85,0.4);
  color: var(--red);
}
.big-btn.esd:hover, .btn-esd:hover {
  background: rgba(255,34,85,0.2);
  box-shadow: var(--glow-red);
}
.big-btn.esd.fired, .btn-esd.fired {
  background: var(--red2);
  color: #fff;
  animation: alarmblink .5s infinite;
  box-shadow: 0 0 20px rgba(255,34,85,0.4);
}
.big-btn.reset, .btn-rst {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
  color: var(--muted);
}
.big-btn.reset:hover, .btn-rst:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 8px rgba(255,255,255,0.06);
}
.big-btn.btn-bunk {
  background: rgba(0,229,255,0.04);
  border-color: rgba(0,229,255,0.25);
  color: var(--cyan);
}
.big-btn.btn-bunk:hover {
  background: rgba(0,229,255,0.12);
  box-shadow: var(--glow-cyan);
}

/* ═══ ALARMS ═══ */
.alarm-list, .alm-list { display: flex; flex-direction: column; gap: 3px; }
.alarm-item, .alm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  font-size: 10px;
  background: rgba(255,255,255,0.02);
  transition: background .2s;
}
.alarm-item:hover, .alm-item:hover { background: rgba(255,255,255,0.05); }
.alarm-item.active-alarm, .alm-item.fire {
  border-left-color: var(--red);
  animation: alarmblink 1s infinite;
  box-shadow: inset 0 0 20px rgba(255,34,85,0.05);
}
.alarm-item.active-warn, .alm-item.warn {
  border-left-color: var(--amber);
  background: rgba(255,179,0,0.05);
}
.alarm-item.ack, .alm-item.ack { border-left-color: var(--muted); opacity: .6; }
.alarm-item.clear, .alm-item.clear { border-left-color: var(--green); opacity: .5; }
.alm-item.h2-alm { border-left-color: var(--cyan); animation: h2flash 1.2s infinite; }
.alarm-tag, .alm-tag {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.alarm-tag.A, .alm-tag.A {
  background: rgba(255,34,85,0.2);
  color: var(--red);
  text-shadow: var(--glow-red);
}
.alarm-tag.W, .alm-tag.W {
  background: rgba(255,179,0,0.2);
  color: var(--amber);
  text-shadow: var(--glow-amber);
}
.alarm-tag.F, .alm-tag.F {
  background: rgba(255,68,34,.2);
  color: var(--red);
  text-shadow: var(--glow-red);
}
.alarm-tag.I, .alm-tag.I {
  background: rgba(0,229,255,.1);
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0,229,255,0.3);
}
.alarm-text, .alm-text { flex: 1; }
.alarm-time { color: var(--muted); font-family: var(--font-mono); font-size: 9px; }

/* ═══ DETECTION GRID ═══ */
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.det-cell {
  background: rgba(0,229,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 7px;
  transition: all .3s ease;
}
.det-cell.w10 {
  border-color: rgba(255,179,0,0.4);
  background: rgba(255,179,0,.05);
  box-shadow: 0 0 8px rgba(255,179,0,0.08);
}
.det-cell.w25 {
  border-color: rgba(255,68,34,0.5);
  background: rgba(255,68,34,.06);
  animation: fireflash 1s infinite;
  box-shadow: 0 0 12px rgba(255,68,34,0.1);
}
.det-zone { font-size: 10px; color: var(--muted); }
.det-val {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--green);
  margin: 1px 0;
  text-shadow: var(--glow-green);
}
.det-val.warn { color: var(--amber); text-shadow: var(--glow-amber); }
.det-val.alarm { color: var(--red); text-shadow: var(--glow-red); }
.det-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  transition: width .3s, background .3s;
  box-shadow: 0 0 4px rgba(0,255,136,0.15);
}

/* ═══ FUEL CELL / SPECIAL BOXES ═══ */
.fc-box {
  border: 1px solid rgba(68,136,255,0.25);
  border-radius: var(--radius);
  padding: 5px 8px;
  background: rgba(68,136,255,.03);
  margin-bottom: 5px;
  box-shadow: 0 0 8px rgba(68,136,255,0.04);
}
.fc-title { font-size: 9px; color: var(--blue); font-family: var(--font-mono); letter-spacing: .5px; margin-bottom: 2px; }
.fc-val { font-family: var(--font-mono); font-size: 15px; color: var(--blue); text-shadow: 0 0 10px rgba(68,136,255,0.25); }
.sc-box {
  background: rgba(0,229,255,0.03);
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: var(--radius);
  padding: 6px 8px;
  margin-bottom: 5px;
  font-size: 10px;
}
.sc-title { color: var(--cyan); font-weight: 700; font-family: var(--font-mono); font-size: 9px; margin-bottom: 2px; letter-spacing: 1px; }
.sc-desc { color: var(--muted); line-height: 1.5; }

/* ═══ CHECKLIST ═══ */
.checklist-item, .chk-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 10px;
  border-bottom: 1px solid rgba(0,229,255,0.04);
  transition: all .15s;
}
.checklist-item:last-child, .chk-item:last-child { border: none; }
.checklist-item.done, .chk-ok { color: var(--green); text-shadow: 0 0 6px rgba(0,255,136,0.15); }
.checklist-item.pending, .chk-no { color: var(--muted); }
.checklist-item.current { color: var(--amber); text-shadow: var(--glow-amber); }
.chk-icon { font-size: 11px; width: 14px; text-align: center; }

/* ═══ MODAL — Frosted glass ═══ */
#modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#modal {
  background: linear-gradient(180deg, rgba(10,30,50,0.95) 0%, rgba(5,15,28,0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 460px;
  box-shadow: var(--glow-cyan), 0 20px 60px rgba(0,0,0,0.5);
}
#modal h2 {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 15px;
  margin-bottom: 8px;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(0,229,255,0.3);
}
#modal p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-bottom: 14px; }
.modal-btns, .m-btns, .mg { display: flex; flex-direction: column; gap: 6px; }
.modal-btn, .m-btn, .mb {
  padding: 12px 16px;
  border: 1px solid rgba(0,229,255,0.1);
  background: rgba(0,229,255,0.03);
  color: var(--white);
  cursor: pointer;
  border-radius: var(--radius);
  text-align: left;
  font-size: 11px;
  transition: all .2s ease;
}
.modal-btn:hover, .m-btn:hover, .mb:hover {
  border-color: rgba(0,229,255,0.35);
  color: var(--cyan);
  background: rgba(0,229,255,0.08);
  box-shadow: 0 0 12px rgba(0,229,255,0.08);
  transform: translateX(4px);
}
.modal-btn .sc-title, .m-btn .mt, .mb .mt { font-weight: 600; font-size: 12px; }
.modal-btn .sc-desc, .m-btn .md, .mb .md { color: var(--muted); font-size: 10px; margin-top: 2px; }

/* ═══ FLOW / SVG HELPERS ═══ */
.flow-line { stroke-dasharray: 8 4; animation: flowdash 1s linear infinite; }
.flow-line.stopped { animation: none; opacity: 0.3; }

/* ═══ MODE BADGE ═══ */
.mode-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
}
.mode-badge.auto {
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.3);
  color: var(--green);
  box-shadow: 0 0 6px rgba(0,255,136,0.08);
}
.mode-badge.manual {
  background: rgba(255,179,0,0.08);
  border: 1px solid rgba(255,179,0,0.3);
  color: var(--amber);
}

/* ═══ STATUS ═══ */
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  margin-bottom: 3px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; transition: all .3s; }
.status-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green), 0 0 20px rgba(0,255,136,0.15); }
.status-dot.off { background: rgba(110,168,204,0.3); }
.status-dot.fault { background: var(--red); animation: pulse 0.5s infinite; box-shadow: 0 0 8px var(--red); }
.status-key { font-size: 10px; color: var(--muted); }
.status-val { font-family: var(--font-mono); font-size: 10px; color: var(--green); }
.status-val.off { color: var(--muted); }
.status-val.warn { color: var(--amber); }
.status-val.alarm { color: var(--red); }

/* ═══ TREND CANVAS ═══ */
.trend-canvas {
  width: 100%;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.4);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

/* ═══ LOG ENTRIES ═══ */
.log-entry {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  padding: 2px 0;
  border-bottom: 1px solid rgba(0,229,255,0.04);
  line-height: 1.4;
}
.log-entry.warn, .log-entry .log-warn { color: var(--amber); }
.log-entry.alarm, .log-entry .log-alarm { color: var(--red); }
.log-entry.ok, .log-entry .log-ok { color: var(--green); }
.log-entry .log-time { color: var(--cyan); }
#log-list { max-height: 120px; overflow-y: auto; }
#log-list::-webkit-scrollbar { width: 3px; }
#log-list::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); }

/* ═══ SLIDER / RANGE ═══ */
.slider-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.slider-row label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
input[type=range] {
  width: 100%;
  accent-color: var(--cyan);
  height: 4px;
  cursor: pointer;
}

/* ═══ PIPELINE LINE-UP ═══ */
.pl-sec {
  font-size: 9px;
  font-family: var(--font-mono);
  color: rgba(0,229,255,.5);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px 1px;
  border-bottom: 1px dashed rgba(0,229,255,.06);
}
.pl-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-bottom: 1px solid rgba(0,229,255,.03);
  transition: background .15s;
}
.pl-row:hover { background: rgba(0,229,255,.02); }
.pl-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,.7);
  min-width: 60px;
}
.pl-desc {
  font-size: 10px;
  color: rgba(255,255,255,.75);
  flex: 1;
}
.pl-vbtn {
  padding: 1px 7px;
  font-size: 9px;
  font-family: var(--font-mono);
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid;
  transition: all .15s;
  flex-shrink: 0;
}
.pl-vbtn.open { border-color: rgba(0,255,136,0.4); color: var(--green); background: rgba(0,255,136,.06); }
.pl-vbtn.closed { border-color: rgba(255,34,85,0.3); color: var(--red); background: rgba(255,34,85,.04); }
.pl-vbtn.transitioning { background: rgba(255,179,0,0.08); border-color: rgba(255,179,0,0.35); color: var(--amber); }
.pl-vbtn.req { animation: plreq .8s infinite; }
.pl-status {
  margin: 4px 8px;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
}
.pl-status.ok { border: 1px solid rgba(0,255,136,0.3); color: var(--green); background: rgba(0,255,136,.04); }
.pl-status.fault { border: 1px solid rgba(255,34,85,0.3); color: var(--red); background: rgba(255,34,85,.04); }
.pl-status.idle { border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.25); }
.pl-toggle {
  padding: 3px 8px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--muted);
  background: rgba(0,0,0,.3);
  border: none;
  border-top: 1px solid rgba(0,229,255,.06);
  cursor: pointer;
  width: 100%;
  text-align: left;
  letter-spacing: .5px;
  transition: color .15s;
}
.pl-toggle:hover { color: var(--cyan); }

/* ═══ EMBRITTLEMENT BANNER ═══ */
#emb-banner {
  display: none;
  position: absolute;
  top: 47px;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(26,48,16,0.9), rgba(40,60,20,0.9));
  border-bottom: 2px solid var(--amber);
  color: var(--amber);
  text-align: center;
  padding: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  z-index: 50;
  animation: blink .8s infinite;
  box-shadow: 0 2px 12px rgba(255,179,0,0.1);
}

/* ═══ COMPLIANCE BOX ═══ */
.compliance-box {
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  margin-bottom: 6px;
  border: 1px solid;
  transition: all .3s;
}
.compliance-box.pass {
  background: rgba(0,255,136,0.05);
  border-color: rgba(0,255,136,0.3);
  color: var(--green);
  box-shadow: 0 0 6px rgba(0,255,136,0.06);
}
.compliance-box.fail {
  background: rgba(255,34,85,0.06);
  border-color: rgba(255,34,85,0.35);
  color: var(--red);
  animation: alarmblink 1s infinite;
  box-shadow: 0 0 8px rgba(255,34,85,0.08);
}
.compliance-box.warn {
  background: rgba(255,179,0,0.06);
  border-color: rgba(255,179,0,0.3);
  color: var(--amber);
}

/* ═══ MODE BUTTONS ═══ */
.mode-btns, .method-btns { display: flex; gap: 4px; margin-bottom: 6px; }
.mode-btn, .method-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 9px;
  font-family: var(--font-mono);
  border: 1px solid rgba(0,229,255,0.1);
  background: rgba(0,0,0,0.3);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
  text-align: center;
  transition: all .2s ease;
}
.mode-btn:hover, .method-btn:hover {
  border-color: rgba(0,229,255,0.25);
  color: var(--cyan);
}
.mode-btn.active, .method-btn.active {
  border-color: rgba(0,229,255,0.4);
  color: var(--cyan);
  background: rgba(0,229,255,0.08);
  box-shadow: 0 0 8px rgba(0,229,255,0.08);
}

/* ═══ CUSTODY BADGE ═══ */
.custody-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  border: 1px solid rgba(0,229,255,0.2);
  color: var(--cyan);
  background: rgba(0,229,255,0.04);
}

/* ═══ RESPONSIVE LAYOUT — fit content to screen ═══ */

/* Prevent clipping — allow scroll when viewport is too small */
body {
  overflow: auto;
  min-width: 980px;
  min-height: 600px;
}

/* Scale down side panels on smaller screens */
@media (max-width: 1366px) {
  #main, #layout {
    grid-template-columns: 180px 1fr 180px !important;
  }
  .panel-header, .ph { font-size: 9px; letter-spacing: 1px; padding: 4px 8px; }
  .panel-body, .pb { padding: 6px; }
  .gauge-value, .g-val { font-size: 12px; }
  .big-btn { padding: 5px; font-size: 9px; }
  .valve-btn, .v-btn { padding: 3px 6px; font-size: 8px; }
}

@media (max-width: 1100px) {
  #main, #layout {
    grid-template-columns: 160px 1fr 160px !important;
  }
  .gauge-unit, .g-unit { font-size: 9px; }
  .ctrl-label, .ctrl-lbl { font-size: 9px; }
}

/* Scale bottom panels on short screens */
@media (max-height: 800px) {
  #main, #layout {
    grid-template-rows: 1fr 160px !important;
  }
}

@media (max-height: 700px) {
  #main, #layout {
    grid-template-rows: 1fr 140px !important;
  }
  #header, #hdr { height: 36px !important; padding: 4px 12px !important; }
  #header .title, .htitle, .h-title { font-size: 12px; }
  #clock, #hclock { font-size: 14px; }
}

/* Minimum size notice */
.sim-size-notice {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg, #020a12);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.05) 0%, transparent 60%);
  color: var(--white, #e4f0ff);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-ui, sans-serif);
  padding: 40px;
}
.sim-size-notice h2 {
  color: var(--cyan, #00e5ff);
  font-size: 18px;
  margin-bottom: 12px;
  text-shadow: 0 0 20px rgba(0,229,255,0.3);
}
.sim-size-notice p { color: var(--muted, #6ea8cc); font-size: 13px; line-height: 1.6; }

@media (max-width: 979px), (max-height: 599px) {
  .sim-size-notice { display: flex; flex-direction: column; }
}

/* ═══ STANDARD VALVE (Variable Gate Valve) ═══ */
.std-valve {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s;
}
.std-valve:hover { transform: scale(1.06); }
.std-valve:active { transform: scale(0.97); }
.std-valve .sv-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.std-valve .sv-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}
.std-valve-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ═══ NON-RETURN GATE VALVE (NRV / Check Valve) ═══ */
.nrv-valve {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  user-select: none;
}
.nrv-valve .nrv-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.nrv-valve .nrv-status {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}
.nrv-valve-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ═══ BLANK FLANGE (Blind Flange) ═══ */
.blank-flange {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s;
}
.blank-flange:hover { transform: scale(1.06); }
.blank-flange:active { transform: scale(0.97); }
.blank-flange .bf-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.blank-flange .bf-status {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}
.blank-flange-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ═══ SPOOL PIECE (Removable Pipe Section) ═══ */
.spool-piece {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s;
}
.spool-piece:hover { transform: scale(1.06); }
.spool-piece:active { transform: scale(0.97); }
.spool-piece .sp-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.spool-piece .sp-status {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
}
.spool-piece-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}