:root {
  --bg: #f4f4f6; --card: #ffffff; --text: #1a1a22; --muted: #6b6b78;
  --accent: #2563eb; --on: #16a34a; --off: #9ca3af; --warn: #d97706;
  --flash: #fde68a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101014; --card: #1b1b22; --text: #ececf1; --muted: #8b8b98;
    --accent: #60a5fa; --on: #4ade80; --off: #52525e; --warn: #fbbf24;
    --flash: #4b3f14;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, sans-serif;
}
header {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.2rem .4rem;
}
h1 { font-size: 1.25rem; margin: 0; }
.engine-status { color: var(--off); font-size: .9rem; }
.engine-status.online { color: var(--on); }
.engine-status.offline { color: #dc2626; }
.spacer { flex: 1; }
.user-name { color: var(--muted); font-size: .8rem; }
.logout-btn {
  border: 1px solid var(--muted); background: none; color: var(--muted);
  border-radius: 999px; font-size: .72rem; padding: .15rem .6rem; cursor: pointer;
}

.cards {
  display: grid; gap: .8rem; padding: .8rem 1.2rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card {
  background: var(--card); border-radius: 12px; padding: .9rem 1rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
  transition: background-color .15s;
}
.card.flash { background-color: var(--flash); }
.card-head { display: flex; align-items: baseline; gap: .5rem; }
.card-head h2 { font-size: 1rem; margin: 0; flex: 1; }
.kind { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sync { font-size: .75rem; }
.sync.ok { color: var(--on); }
.sync.pending { color: var(--warn); }
.sync.stale { color: var(--muted); }

.power-row { display: flex; align-items: center; gap: .6rem; margin: .55rem 0 .3rem; }
.power {
  border: 0; border-radius: 999px; padding: .45rem 1.1rem; font-size: .9rem;
  cursor: pointer; color: white; background: var(--off); min-width: 4.4rem;
}
.power.on { background: var(--on); }
.detail { color: var(--muted); font-size: .8rem; }

.controls { display: flex; flex-direction: column; gap: .4rem; margin-top: .35rem; }
.controls label { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--muted); }
.controls input[type=range] { flex: 1; accent-color: var(--accent); }
.modes { display: flex; gap: .35rem; }
.mode-chip {
  border: 1px solid var(--muted); background: none; color: var(--muted);
  border-radius: 999px; font-size: .72rem; padding: .15rem .6rem; cursor: pointer;
}
.mode-chip.active { border-color: var(--accent); color: var(--accent); }
.temp-row { display: flex; align-items: center; gap: .5rem; }
.temp-row button {
  border: 1px solid var(--muted); background: none; color: var(--text);
  border-radius: 8px; width: 1.7rem; height: 1.7rem; cursor: pointer;
}
.provenance { margin-top: .45rem; font-size: .72rem; color: var(--muted); }

.log {
  padding: .5rem 1.2rem 1rem; font-size: .74rem; color: var(--muted);
  display: flex; flex-direction: column-reverse; gap: .15rem; max-height: 9rem; overflow-y: auto;
}