.theme-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-radius:999px;
  box-shadow: var(--shadow);
}
.theme-switch .label{font-size:12px;color: var(--muted);white-space:nowrap;}
.switch{position:relative;width:44px;height:24px;display:inline-block;}
.switch input{opacity:0;width:0;height:0;}
.slider{
  position:absolute;cursor:pointer;inset:0;
  background: color-mix(in srgb, var(--panel2) 85%, transparent);
  border:1px solid var(--line);
  border-radius:999px;transition:.2s ease;
}
.slider:before{
  content:"";position:absolute;height:18px;width:18px;left:3px;top:50%;
  transform: translateY(-50%);
  background: var(--panel);border:1px solid var(--line);
  border-radius:50%;transition:.2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.switch input:checked + .slider{
  background: color-mix(in srgb, var(--brand2) 22%, var(--panel2));
  border-color: color-mix(in srgb, var(--brand2) 45%, var(--line));
}
.switch input:checked + .slider:before{transform: translate(20px, -50%);}
.theme-ico{font-size:13px;line-height:1;opacity:.9;}