.theme-toggle-wrap { display:flex; align-items:center; gap:7px; }
.theme-toggle-icon { font-size:13px; line-height:1; user-select:none; }
.theme-toggle {
  width:38px; height:22px;
  background:rgba(155,127,204,.22);
  border:1.5px solid rgba(155,127,204,.32);
  border-radius:100px; cursor:pointer;
  position:relative; flex-shrink:0;
}
.theme-toggle::before {
  content:'';
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:#E6B85C;
  box-shadow:0 0 6px rgba(230,184,92,.6);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"] .theme-toggle::before { transform:translateX(16px); }
.theme-toggle:hover { background:rgba(155,127,204,.38); }

.theme-toggle--on-accent { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.theme-toggle--on-accent:hover { background: rgba(255,255,255,.25); }

.theme-transitioning, .theme-transitioning *,
.theme-transitioning *::before, .theme-transitioning *::after {
  transition:
    background-color .35s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}