.demo-banner{padding:12px 20px;background:#163b38;color:#bbf7e0;display:flex;gap:12px;align-items:center;justify-content:space-between;font:500 13px system-ui}.demo-banner button{background:transparent;color:inherit;border:1px solid #579a88;border-radius:6px;padding:6px 12px;cursor:pointer}.demo-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.demo-message{padding:12px;background:#163b38;color:#bbf7e0;border-radius:8px;margin:12px 0}.navigation .nav-tabs{overflow-x:auto}.nav-tab{white-space:nowrap}.valve-controls{flex-wrap:wrap}.demo-sensor-action{margin:12px 0 0}.demo-event{padding:12px;border-bottom:1px solid #333}.demo-event time{display:block;opacity:.65;font-size:12px}button:focus-visible{outline:2px solid #6ee7b7;outline-offset:3px}@media(max-width:600px){.demo-banner{align-items:flex-start}.demo-banner button{flex-shrink:0}.header-content{flex-wrap:wrap}.header-controls{flex-wrap:wrap}}
.demo-message:empty{display:none}body,#app{min-height:0}.chart-container canvas{max-width:100%;height:auto}.demo-banner{position:relative;z-index:1}
.main-content.container{padding-inline:clamp(12px,2vw,24px)}
.main-content .stats-grid,.main-content .controls-grid,.main-content .sensor-grid,.main-content .analytics-grid,.main-content .settings-grid{margin-inline:0;min-width:0}
.main-content .controls-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

/* Keep navigation inset inside the demo without resizing its frame. */
.navigation .nav-tabs {
  padding-inline: var(--space-lg);
  scroll-padding-inline: var(--space-lg);
}

#leak-reset-btn[hidden] {
  display: none;
}

.sensor-status-card.sensor-wet {
  border-color: var(--accent-error);
  box-shadow: inset 0 0 0 1px var(--accent-error);
}

.demo-notifications {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100% - 32px));
  pointer-events: none;
}

.demo-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--text-secondary);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  font-size: .875rem;
  pointer-events: auto;
}

.demo-notification span {
  flex: 1;
}

.demo-notification-success {
  border-left-color: var(--accent-success);
}

.demo-notification-error {
  border-left-color: var(--accent-error);
}

.demo-notification-close {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px) {
  .demo-notifications {
    right: 16px;
    bottom: 16px;
  }
}

.demo-valve-title {
  min-width: 0;
  flex: 1;
  margin-right: 12px;
}

.demo-valve-title h3 {
  overflow-wrap: anywhere;
}

.demo-rename-valve {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo-rename-valve:hover {
  color: var(--accent-success);
}

.demo-rename-hint {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: .875rem;
}

#alerts-card.demo-alarm {
  border-color: var(--accent-error);
  box-shadow: inset 0 0 0 1px var(--accent-error);
}

#alerts-card.demo-alarm #alerts-icon {
  color: var(--accent-error);
}