/* ----------------- header ------------------ */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
header h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.01em; }
header h1 .accent { color: var(--solar); }
.sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* System selector — only rendered when more than one system is configured. */
.system-select {
  appearance: none;
  background: var(--panel-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238a93a6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")
              no-repeat right 10px center / 10px 7px;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  padding: 6px 28px 6px 10px;
  cursor: pointer;
}
.system-select:hover { border-color: var(--accent); }
.system-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }