.view-mode-toggle{
  display:inline-flex;align-items:center;gap:.48rem;height:40px;padding:0 .82rem;border-radius:10px;
  border:1px solid rgba(41,231,255,.28);background:linear-gradient(135deg,rgba(41,231,255,.08),rgba(160,32,240,.11));
  color:var(--text,#e8e8f4);font-size:.79rem;font-weight:800;white-space:nowrap;
  transition:border-color var(--ease,.18s ease),background var(--ease,.18s ease),transform var(--ease,.18s ease),box-shadow var(--ease,.18s ease)
}
.view-mode-toggle:hover{transform:translateY(-1px);border-color:rgba(41,231,255,.58);box-shadow:0 0 18px rgba(41,231,255,.1)}
.view-mode-mark{font-family:"Syne",sans-serif;font-size:.63rem;letter-spacing:.08em;color:var(--neon-cyan,#29e7ff)}
.view-mode-toggle.is-controller-ready .view-mode-mark{color:#57efbd;text-shadow:0 0 10px rgba(87,239,189,.55)}

.view-mode-floating{
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  z-index:420;box-shadow:0 12px 42px rgba(0,0,0,.38),0 0 24px rgba(41,231,255,.09)
}
@media(max-width:900px){.view-mode-toggle .view-mode-label{display:none}.view-mode-toggle{width:40px;padding:0;justify-content:center}}
@media(max-width:768px){
  #top-nav .view-mode-toggle{
    position:fixed;right:max(12px,env(safe-area-inset-right));
    bottom:calc(var(--mob-nav-h,60px) + max(12px,env(safe-area-inset-bottom)));
    z-index:420;display:inline-flex;width:48px;padding:0;justify-content:center;
    box-shadow:0 10px 34px rgba(0,0,0,.42)
  }
  #top-nav .view-mode-toggle .view-mode-label{display:none}
  .view-mode-floating{right:max(12px,env(safe-area-inset-right));bottom:calc(var(--mob-nav-h,60px) + max(12px,env(safe-area-inset-bottom)))}
}
@media(prefers-reduced-motion:reduce){.view-mode-toggle:hover{transform:none}}