/* FASS shared: mode switch + toasts + tiny utilities. Does not restyle supplied pages. */
.fass-mode-switch{
  display:none !important;
  position:fixed;
  z-index:80;
  right:16px;
  bottom:16px;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(8,8,8,.72);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.fass-mode-switch button{
  font-family:inherit;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  background:transparent;
  border:0;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}
.fass-mode-switch button.is-on{
  color:#050505;
  background:#fff;
  font-weight:600;
}

html[data-fass-mode="mobile"],
html[data-fass-mode="mobile"] body{
  background:#111 !important;
  overflow:auto !important;
  height:auto !important;
  overflow-x:hidden !important;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:760px){
  body{ overflow-x:hidden; }
}
@media (min-width:860px){
  html[data-fass-mode="mobile"] body{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:18px 12px 88px !important;
    min-height:100svh;
  }
  html[data-fass-mode="mobile"] .stage,
  html[data-fass-mode="mobile"] .hero,
  html[data-fass-mode="mobile"] .app-shell,
  html[data-fass-mode="mobile"] .admin-shell,
  html[data-fass-mode="mobile"] main.page{
    width:min(390px,100%);
    margin-left:auto;
    margin-right:auto;
    border-radius:32px;
    box-shadow:
      0 0 0 10px #1c1c1c,
      0 0 0 12px #3a3a3a,
      0 30px 80px rgba(0,0,0,.55);
    position:relative !important;
    inset:auto !important;
    height:min(844px, calc(100svh - 36px)) !important;
    min-height:0 !important;
    max-height:min(844px, calc(100svh - 36px)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
}
@media (max-width:859px){
  html[data-fass-mode="mobile"] body{
    display:block !important;
    padding:0 !important;
  }
  html[data-fass-mode="mobile"] .stage,
  html[data-fass-mode="mobile"] .hero,
  html[data-fass-mode="mobile"] .app-shell{
    width:100% !important;
    max-width:100% !important;
    height:100svh !important;
    max-height:none !important;
    min-height:100svh !important;
    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    inset:0 !important;
  }
}

.fass-toast{
  position:fixed;
  left:50%;
  bottom:84px;
  transform:translateX(-50%) translateY(12px);
  background:#fff;
  color:#050505;
  padding:12px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  z-index:90;
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(92vw,420px);
  text-align:center;
}
.fass-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (max-width:720px){
  .fass-mode-switch{ right:10px; left:10px; justify-content:center; }
}