.appearance-control { display: inline-flex; flex: 0 0 auto; }
/* Reserve space while a custom renderer initializes. No-JS stays hidden. */
.js [data-appearance-control][hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}
.appearance-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}
.appearance-toggle svg { display: block; flex: none; }
.appearance-toggle:hover { border-color: currentColor; }