/* =========================================================
   主题切换器（右下角悬浮按钮 + hover 弹出菜单）
   浅色主题下为亮色玻璃；深空主题下自动转为暗色玻璃
   ========================================================= */
#themeSwitcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 70;
  font-family: inherit;
}

#themeSwitcher .ts-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0e1b2a;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: transform .2s, box-shadow .2s;
  font-family: inherit;
}
#themeSwitcher .ts-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
#themeSwitcher .ts-icon { font-size: 15px; line-height: 1; }
#themeSwitcher .ts-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--glow);
}

#themeSwitcher .ts-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  color: #0e1b2a;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
#themeSwitcher.open .ts-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ts-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #0e1b2a;
  text-align: left;
  transition: background .15s;
  font-family: inherit;
}
.ts-item:hover { background: rgba(10,139,139,.08); }
.ts-swatch {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.ts-name { flex: 1; }
.ts-check { color: var(--accent); font-weight: 700; opacity: 0; }
.ts-item.active .ts-check { opacity: 1; }

.ts-hint {
  padding: 4px 12px 8px;
  font-size: 11px;
  color: #8b97a6;
  line-height: 1.5;
}

/* 深空主题下，切换器自身转为暗色玻璃，保证可见 */
html[data-theme="deepspace"] #themeSwitcher .ts-toggle,
html[data-theme="deepspace"] #themeSwitcher .ts-menu {
  background: rgba(10,19,38,.92);
  color: #EAF6FF;
  border-color: rgba(20,222,205,.30);
}
html[data-theme="deepspace"] #themeSwitcher .ts-item { color: #EAF6FF; }
html[data-theme="deepspace"] #themeSwitcher .ts-item:hover { background: rgba(20,222,205,.14); }
html[data-theme="deepspace"] #themeSwitcher .ts-check { color: #14DECD; }
html[data-theme="deepspace"] #themeSwitcher .ts-hint { color: var(--muted); }

@media (max-width: 480px) {
  #themeSwitcher { right: 14px; bottom: 14px; }
  #themeSwitcher .ts-menu { min-width: 200px; }
}