html, body { background: var(--alb-bg); color: var(--alb-ink); font-family: var(--alb-sans); }
body.alb-body { overflow-x: hidden; }

.alb-shell {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #0b0e1a 0%, var(--alb-bg) 60%);
  overflow: hidden;
}
.alb-stage {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 6vh 24px;
}
.alb-view--hero { max-width: 1280px; }

/* Shared spin keyframe (used by spinner + loading orbit fallback) */
@keyframes alb-spin { to { transform: rotate(360deg); } }

/* View enter animation (views.js adds .is-entering) */
@keyframes alb-view-enter {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.alb-view.is-entering { animation: alb-view-enter .45s var(--alb-ease-out) both; }

/* Scrollbars — global */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--alb-scrollbar-color) transparent;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--alb-scrollbar-color);
  border-radius: 999px;
  border: 2px solid var(--alb-bg);
}
html::-webkit-scrollbar-thumb:hover { background: var(--alb-scrollbar-color-hover); }

/* Scrollbars — inner scrollable regions (autocomplete etc.) */
.alb-scroll-area { scrollbar-width: thin; scrollbar-color: var(--alb-scrollbar-color) transparent; }
.alb-scroll-area::-webkit-scrollbar { width: 8px; }
.alb-scroll-area::-webkit-scrollbar-track { background: transparent; }
.alb-scroll-area::-webkit-scrollbar-thumb {
  background: var(--alb-scrollbar-color);
  border-radius: 999px;
}
.alb-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--alb-scrollbar-color-hover); }

/* Selection */
::selection { background: var(--alb-accent-35); color: var(--alb-ink); }

@media (prefers-reduced-motion: reduce) {
  .alb-view.is-entering { animation: none; }
}