/* Base */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #000;
  color: #e4e4e7;
}

/* Hide scrollbars globally but keep scrolling */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }

button { cursor: pointer; }

/* Toasts: top-right, frosted "liquid glass" */
.toast-root { position: fixed; top: 16px; right: 16px; display: grid; gap: 10px; z-index: 99999; pointer-events: none; }
.toast {
  position: relative;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(24,24,27,0.6), rgba(9,9,11,0.45));
  color: #e4e4e7;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12px;
  min-width: 240px; max-width: 380px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateX(20px); opacity: 0; animation: toast-in 160ms ease-out forwards;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
}
.toast::before {
  content: "";
  position: absolute; inset: -20% -40%;
  background: radial-gradient(120px 120px at var(--blob-x,60%) var(--blob-y,30%), rgba(255,255,255,0.12), rgba(255,255,255,0) 60%);
  filter: blur(10px);
  animation: glass-blob 7s ease-in-out infinite alternate; pointer-events: none;
}
.toast-success { border-color: rgba(34,197,94,0.45); color: #d1fae5; box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(34,197,94,0.2) inset, 0 8px 24px rgba(16,185,129,0.25); }
.toast-error { border-color: rgba(239,68,68,0.5); color: #fecaca; box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(239,68,68,0.2) inset, 0 8px 24px rgba(239,68,68,0.25); }
.toast-info { border-color: rgba(59,130,246,0.35); color: #dbeafe; box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.18) inset, 0 8px 24px rgba(59,130,246,0.22); }
@keyframes toast-in { from { transform: translateX(20px) translateY(4px); opacity:0 } to { transform: translateX(0) translateY(0); opacity:1 } }
@keyframes toast-out { to { transform: translateX(20px) translateY(4px); opacity:0 } }
@keyframes glass-blob { 0%{ --blob-x:20%; --blob-y:25% } 100%{ --blob-x:80%; --blob-y:75% } }