/* controls.css */
:root{
  --vsc-bg: #fff;
  --vsc-text: #111;
  --vsc-border: rgba(0,0,0,.15);
  --vsc-accent: #0A66C2; /* Standard – wird via Inline-CSS aus Optionen überschrieben */
}

.vs-global-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; line-height:1;
  font-size:18px;
  border:1px solid var(--vsc-border);
  border-radius:.5rem; background:var(--vsc-bg); color:var(--vsc-text);
  cursor:pointer; margin:0 0 .35rem 0; text-decoration:none; user-select:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.vs-global-toggle:hover{
  /* leichte Tönung mit Akzent – kompatibel & dezent */
  background: color-mix(in srgb, var(--vsc-accent) 6%, var(--vsc-bg));
}
.vs-global-toggle[aria-pressed="true"]{
  background: color-mix(in srgb, var(--vsc-accent) 10%, var(--vsc-bg));
  border-color: color-mix(in srgb, var(--vsc-accent) 35%, var(--vsc-border));
}
.vs-global-toggle:active{ transform: scale(.98); }