:root {
  --page-transition-duration: 360ms;
  --page-transition-easing: cubic-bezier(.22,.9,.3,1);
  --page-transition-scale: 0.992;
    --progress-start: #6366f1;
    --progress-end: #4f46e5;
    --progress-height: 3px;
    --progress-shadow: rgba(79,70,229,0.48);
}

body { font-family: 'Inter', sans-serif; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.glass { background: rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }

#main-content {
  transition: transform var(--page-transition-duration) var(--page-transition-easing),
              opacity calc(var(--page-transition-duration) * 0.9) var(--page-transition-easing),
              filter var(--page-transition-duration) var(--page-transition-easing);
  backface-visibility: hidden;
}
#main-content.is-leaving,
#main-content.is-entering {
  will-change: transform, opacity, filter;
}
#main-content.is-leaving {
  opacity: 0;
  transform: translateY(10px) scale(var(--page-transition-scale));
  filter: blur(2px) saturate(1.04);
  pointer-events: none;
}
#main-content.is-entering {
  opacity: 0;
  transform: translateY(10px) scale(var(--page-transition-scale));
  filter: blur(2px) saturate(1.04);
}
#main-content.is-entering.is-entering-active {
  opacity: 1;
  transform: none;
  filter: blur(0) saturate(1);
  will-change: auto;
}

#notification-permission-banner { transition: transform 300ms ease, opacity 300ms ease; }

#theme-transition-overlay { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity 260ms ease, transform 300ms cubic-bezier(.2,.9,.2,1); z-index:99999; background:transparent; }

@keyframes spin { to { transform: rotate(360deg); } }

#roomify-progress { position: fixed; top: 0; left: 0; right: 0; height: var(--progress-height); pointer-events: none; z-index: 9999999; transform: translateY(-8px); transition: transform 260ms ease, opacity 220ms linear; opacity: 0; }
#roomify-progress[data-state="visible"] { transform: translateY(0); opacity: 1; }
#roomify-progress .bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg,var(--progress-start),var(--progress-end)); box-shadow: 0 4px 18px var(--progress-shadow); border-radius: 999px; transition: width 240ms var(--page-transition-easing), opacity 200ms linear; will-change: width, opacity; }
#roomify-progress .bar::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.14) 100%); opacity: 0.16; mix-blend-mode: overlay; border-radius: inherit; pointer-events: none; }