/* ESL Toolkit · shared light/dark switch (v1)
   Restyles every existing light/dark button (#themeToggle or .theme-toggle) from html[data-theme]
   (data-theme="light" = light; anything else = dark, matching the homepage default).
   It only changes how the button looks, never where it sits or what it does:
   each page keeps its own position and toggle logic.
   Add to a page with: <link rel="stylesheet" href="(path)/_shared/theme-toggle.css"> */
:is(#themeToggle,.theme-toggle){
  width:62px!important;height:44px!important;min-width:62px!important;
  padding:0!important;border:0!important;border-radius:999px!important;box-shadow:none!important;
  font-size:0!important;line-height:0!important;color:transparent!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.5' flood-color='%236941E0' flood-opacity='.35'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='11.5' fill='%23fff' filter='url%28%23s%29'/%3E%3Cg transform='translate%286 6%29 scale%28.6667%29' fill='none' stroke='%236941E0' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%236941E0' stroke='none'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/g%3E%3C/svg%3E") 4px 50%/28px 28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F3EEFF'/%3E%3Cstop offset='1' stop-color='%23FFF8EC'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='55' height='29' rx='14.5' fill='url%28%23g%29' stroke='%236941E0' stroke-opacity='.3'/%3E%3Ccircle cx='44' cy='10' r='1.3' fill='%23C4B5FD'/%3E%3Ccircle cx='40' cy='19' r='1' fill='%23D8CCFF'/%3E%3C/svg%3E") 50% 50%/56px 30px no-repeat!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent;
  transition:background-position .3s cubic-bezier(.4,.2,.2,1)!important;
}
:is(#themeToggle,.theme-toggle)>*{display:none!important;}
html:not([data-theme="light"]) :is(#themeToggle,.theme-toggle){
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%236D28D9'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.8' flood-color='%23A78BFA' flood-opacity='.55'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='11.5' fill='url%28%23k%29' filter='url%28%23s%29'/%3E%3Cg transform='translate%286 6%29 scale%28.6667%29'%3E%3Cpath d='M15.5 4.2A8 8 0 1 0 19.8 15 6.5 6.5 0 0 1 15.5 4.2Z' fill='%23F5F3FF'/%3E%3Cpath d='M18.5 4.5l.5 1.3 1.3.5-1.3.5-.5 1.3-.5-1.3-1.3-.5 1.3-.5z' fill='%23FDE68A'/%3E%3C/g%3E%3C/svg%3E") 30px 50%/28px 28px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232A2160'/%3E%3Cstop offset='1' stop-color='%23120F2B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='55' height='29' rx='14.5' fill='url%28%23g%29' stroke='%23A78BFA' stroke-opacity='.5'/%3E%3Ccircle cx='11' cy='10' r='1.2' fill='%23fff'/%3E%3Ccircle cx='18' cy='19' r='.9' fill='%23E5E1FF'/%3E%3Ccircle cx='24' cy='8' r='1.1' fill='%23C4B5FD'/%3E%3C/svg%3E") 50% 50%/56px 30px no-repeat!important;
}
:is(#themeToggle,.theme-toggle):focus-visible{outline:3px solid #A78BFA!important;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){:is(#themeToggle,.theme-toggle){transition:none!important;}}