:root {
  --case: #3A332C;
  --dial: #EDE7DA;
  --needle: #C1502E;
  --scale-line: #B9AF9C;
  --text-dim: #8C8371;
  --panel-line: rgba(237,231,218,0.12);
  --status-fresh: #6B8F53;
  --status-stale: #C1502E;
  --panel-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--case);
  font-family: 'Space Grotesk', sans-serif;
}

/* Braun-Instrumentendesign-Kopfzeile: Logo-Badge + Titel, von index.html und setup.html geteilt */
.device {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 84px 1fr;
}

.panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 24px 0 96px;
  border-bottom: 1px solid var(--panel-line);
}

.logo-badge {
  position: absolute;
  left: 24px;
  top: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--dial);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  background: #000;
  z-index: 10;
}

.device-name {
  color: var(--dial);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}