* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0d0d14; overflow: hidden; font-family: 'Courier New', monospace; }

/* Top status bar */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
  background: rgba(13,13,20,0.9);
  font-size: 12px; color: #555;
  z-index: 10; pointer-events: none;
}
#hud .title       { color: #a0c4ff; }
#hud #device-name { color: #56b4f7; }
#hud #device-name.none { color: #333; }

/* Active CC info line */
#cc-info {
  position: fixed; top: 38px; left: 0; right: 0;
  padding: 8px 20px;
  background: rgba(13,13,20,0.75);
  font-size: 16px; color: #aaa;
  z-index: 10; pointer-events: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#cc-info .field   { color: #555; font-size: 0.72em; text-transform: uppercase; }
#cc-info .val     { color: #56b4f7; font-weight: bold; }
#cc-info .name    { color: #e0e0f0; }
#cc-info .sep     { color: #2a2a40; }
#cc-info .val-big { color: #56b4f7; font-weight: bold; font-size: 1.2em; }
#cc-info .hint    { color: #333; font-size: 13px; }

/* CC chip grid at the bottom */
#cc-list {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #0a0a12;
  border-top: 1px solid #1a1a28;
  z-index: 10;
}

.cc-chip {
  background: #0d0d18;
  padding: 9px 12px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.cc-chip.active {
  background: #0e1422;
  border-top: 2px solid #56b4f7;
  padding-top: 7px;
}

.chip-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.chip-value {
  font-size: 22px; font-weight: bold;
  color: #56b4f7; min-width: 38px;
}
.cc-chip.active .chip-value { color: #82d4ff; }

.chip-name {
  font-size: 10px; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 62%; text-align: right;
}
.cc-chip.active .chip-name { color: #999; }

.chip-bar-track {
  height: 3px; background: #1a1a28; border-radius: 2px; overflow: hidden;
}
.chip-bar-fill {
  height: 100%; width: 0%; background: #2a5070;
  transition: width 0.06s linear;
}
.cc-chip.active .chip-bar-fill { background: #56b4f7; }

.chip-meta { font-size: 10px; color: #333; }
.cc-chip.active .chip-meta { color: #445; }

#back {
  position: fixed; top: 8px; right: 16px;
  font-size: 11px; color: #333; text-decoration: none; z-index: 20;
}
#back:hover { color: #888; }