select { width: 100%; margin-top: 4px; background: #22262c; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
label.dim { opacity: 0.45; }

#views { position: fixed; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: calc(100% - 380px); }
#views button { flex: none; padding: 5px 10px; background: var(--panel); }
#views button.on { border-color: var(--accent); color: var(--accent); }
#views .chk { margin: 0 0 0 6px; display: flex; gap: 4px; align-items: center; color: var(--muted); }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#labels div { position: absolute; transform: translate(-50%, -100%); font-size: 11px; color: var(--text); background: rgba(21, 23, 26, 0.78);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

/* Pressure gauge: vertical scale with the DAUB window, three sensor heights */
#gauge { position: relative; height: 150px; margin: 4px 0 8px; }
#gauge svg { width: 100%; height: 100%; display: block; }
#gauge text { font-size: 10px; fill: var(--muted); }

.bar { display: grid; grid-template-columns: 96px 1fr 62px; gap: 6px; align-items: center; margin: 3px 0; }
.bar .k { color: var(--muted); }
.bar .t { height: 9px; background: #22262c; border-radius: 3px; overflow: hidden; display: flex; }
.bar .t i { display: block; height: 100%; }
.bar .v { text-align: right; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 11px; margin: 4px 0; }
.legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--c); }

ul.limits { margin: 0; padding-left: 16px; color: var(--muted); font-size: 12px; }
ul.limits li { margin: 3px 0; }

@media (max-width: 640px) {
  #views { max-width: calc(100% - 24px); }
}

label.chk2 { display: flex; gap: 6px; align-items: center; }
button:disabled { opacity: 0.4; cursor: default; }
.shares { display: flex; height: 12px; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; background: #22262c; }
.shares i { display: block; height: 100%; }
.flag { font-size: 11px; padding: 0 6px; border-radius: 8px; margin-left: 4px; }
.flag.ok { color: var(--ok); border: 1px solid rgba(87,195,138,.5); }
.flag.warn { color: var(--accent); border: 1px solid rgba(242,180,58,.6); }
.flag.bad { color: var(--warn); border: 1px solid rgba(255,122,69,.6); }
p.note { color: var(--muted); font-size: 11px; margin: 6px 0 0; }

#section svg { width: 100%; height: auto; display: block; margin: 4px 0; }
#section text { font-size: 8px; fill: var(--muted); }