/* theme-switcher.css — one-click Dark/Light navbar button.
   Load AFTER index1.css / index2.css. Does not modify them. */

/* ---------- navbar trigger: shows the icon of the active theme ---------- */
.tsw-trigger{
  position:relative; flex-shrink:0; width:38px; height:38px; padding:0; margin:0;
  border:0; background:none; cursor:pointer; border-radius:14px;
  display:inline-grid; place-items:center; -webkit-tap-highlight-color:transparent;
}
.tsw-trigger svg{
  width:100%; height:100%; display:block;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .25s;
}
.tsw-trigger .tsw-ico--light{ display:none; }
html[data-theme="light"] .tsw-trigger .tsw-ico--dark{ display:none; }
html[data-theme="light"] .tsw-trigger .tsw-ico--light{ display:block; }
.tsw-trigger:hover svg{ transform:scale(1.07); }
.tsw-trigger:active svg{ transform:scale(.96); }
.tsw-trigger:focus-visible{ outline:2px solid #5fb4ff; outline-offset:4px; }

/* glow per theme (same look as the reference artwork) */
.tsw-ico--dark{ filter:drop-shadow(0 0 7px rgba(70,160,255,.55)); }
.tsw-ico--light{ filter:drop-shadow(0 4px 9px rgba(120,170,255,.55)); }

@media (max-width:480px){
  .tsw-trigger{ width:30px; height:30px; border-radius:10px; }
}
@media (max-width:360px){
  .tsw-trigger{ width:28px; height:28px; }
}
@media (prefers-reduced-motion:reduce){
  .tsw-trigger svg{ transition:none !important; }
}