/* The load indicator in the top bar (AUDIO · UI · MEM) and its panel. */

.load-btn { display: inline-flex; align-items: center; gap: 10px; padding: 0 10px; }
.load-item { display: inline-flex; align-items: baseline; gap: 4px; }
.load-item[hidden] { display: none; }
.load-cap { font: 700 8px var(--font); letter-spacing: 0.16em; color: #aab1b8; }
.load-val {
  min-width: 30px;
  font: 600 10.5px var(--mono);
  letter-spacing: 0;
  color: var(--vfd);
  text-align: right;
}
.load-val.warn { color: #ffb347; }
.load-val.high { color: #ff6a4a; }

.load-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  border: 1px solid #2c3236;
  border-radius: 6px;
  background: #101315;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  color: #dfe2e5;
}
.lp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #23282c;
  font: 700 10px var(--font);
  letter-spacing: 0.24em;
}
.lp-sub { font: 600 9px var(--font); letter-spacing: 0.06em; color: #6f767d; }
.lp-body { overflow: auto; padding: 8px 14px 12px; }

.lp-summary { margin-bottom: 8px; }
.lp-note { margin: 2px 0 0 64px; font: 500 10px/1.35 var(--font); color: #858c94; }
.lp-row { display: grid; grid-template-columns: 56px 1fr 52px; align-items: center; gap: 8px; min-height: 20px; }
.lp-name { overflow: hidden; font: 700 9px var(--font); letter-spacing: 0.14em; white-space: nowrap; text-overflow: ellipsis; }
.lp-val { font: 600 10.5px var(--mono); color: var(--vfd); text-align: right; }
.lp-val.warn { color: #ffb347; }
.lp-val.high { color: #ff6a4a; }
.lp-bar { position: relative; height: 6px; border-radius: 3px; background: #1d2226; overflow: hidden; }
.lp-bar.lp-none { visibility: hidden; }
.lp-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #3fbfa0; }
.lp-fill.warn { background: #ffb347; }
.lp-fill.high { background: #ff6a4a; }

.lp-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid #23282c; }
.lp-title { margin: 0 0 6px; font: 700 9px var(--font); letter-spacing: 0.22em; color: var(--rail-dim); }
.lp-empty { margin: 4px 0; font: 500 10px var(--font); color: #858c94; }
.lp-section .lp-row { grid-template-columns: 150px 1fr 52px; }
.lp-desk { margin-top: 6px; }
.lp-desk .lp-name { color: #f0c040; }
.lp-device .lp-name { padding-left: 12px; font-weight: 600; letter-spacing: 0.06em; color: #c9cdd1; }