/* theme.css — the toggle control itself, shared by every surface.
   Deliberately palette-agnostic: it borrows whatever --surface/--border/--text-dim
   the host page defines, and falls back to fixed values on pages that define none,
   so it never renders invisible. */
.mfl-theme-btn {
  appearance: none;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim, #6b7a80);
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--line, #dce1e6));
  transition: background .12s, color .12s, border-color .12s;
}
.mfl-theme-btn:hover {
  color: var(--text, #12232a);
  border-color: var(--field-bd-hov, #98a6b2);
}
/* Fallback placement for a page with no declared slot — always reachable, never
   over the top of content it would obscure. */
.mfl-theme-btn-float {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}