/* static/theme-toggle.css */
.theme-toggle{
  position:fixed; 
  top:clamp(12px, 3vw, 18px); 
  right:clamp(12px, 3vw, 18px); 
  z-index:1000;
  display:flex; 
  align-items:center; 
  gap:clamp(6px, 1.5vw, 10px);
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.2);
  border-radius:clamp(20px, 5vw, 28px); 
  padding:clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 10px); 
  backdrop-filter:blur(8px);
  user-select:none;
}

.toggle-label{
  font-family: 'Lemon Milk', sans-serif;
  letter-spacing:.12em; 
  font-weight:900; 
  font-size:clamp(0.7rem, 2vw, 0.8rem);
  color:#fff;
}

/* Switch */
.switch{
  position:relative; 
  width:clamp(50px, 12vw, 62px); 
  height:clamp(26px, 6vw, 32px); 
  display:inline-block;
}
.switch input{display:none}
.slider{
  position:absolute; inset:0; border-radius:999px;
  background:#2b2b2b; border:1px solid rgba(255,255,255,.25);
  transition:background .2s,border-color .2s;
}
.slider:before{
  content:""; 
  position:absolute; 
  top:clamp(1px, 0.5vw, 2px); 
  left:clamp(1px, 0.5vw, 2px); 
  width:clamp(22px, 5vw, 28px); 
  height:clamp(22px, 5vw, 28px);
  border-radius:50%; 
  background:#fff; 
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .2s, background .2s, box-shadow .2s;
}
/* Checked = LIGHT */
#dxThemeToggle:checked + .slider { background:#111; border-color:#111; }
#dxThemeToggle:checked + .slider:before {
  transform:translateX(clamp(24px, 6vw, 30px));
  background:#fff;                /* knob stays white in light mode */
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* Light mode container colors */
.light-mode .theme-toggle{
  background:rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.25);
}
.light-mode .toggle-label{ color:#1a1a1a; }