/* RubricMark boot loader — single source for static HTML overlay (see public/boot-loader.js). */

:root,
html[data-app-variant='teacher'] {
  --boot-loader-canvas: #faf9f6;
  --boot-loader-accent: #f5b924;
  --boot-loader-accent-deep: #fdcb45;
  --boot-loader-accent-soft: #ffe08a;
  --boot-loader-track: rgba(253, 203, 69, 0.18);
  --boot-loader-logo-glow: rgba(253, 203, 69, 0.35);
  --boot-loader-logo-glow-dark: rgba(253, 203, 69, 0.22);
}

html[data-app-variant='student'] {
  --boot-loader-canvas: #f4f3ee;
  --boot-loader-ink: #241f21;
  --boot-loader-accent: #241f21;
  --boot-loader-accent-deep: #241f21;
  --boot-loader-accent-soft: #e9e778;
  --boot-loader-track: color-mix(in srgb, #241f21 10%, transparent);
  --boot-loader-logo-glow: transparent;
  --boot-loader-logo-glow-dark: transparent;
}

html[data-app-variant='marketplace'] {
  --boot-loader-canvas: #0a0a0a;
  --boot-loader-accent: #ff5c00;
  --boot-loader-accent-deep: #e65300;
  --boot-loader-accent-soft: #ff8a4d;
  --boot-loader-track: rgba(255, 92, 0, 0.18);
  --boot-loader-logo-glow: rgba(255, 92, 0, 0.32);
  --boot-loader-logo-glow-dark: rgba(255, 92, 0, 0.24);
}

html[data-app-variant='musicsheet'] {
  --boot-loader-canvas: #f7f7f5;
  --boot-loader-accent: #e83434;
  --boot-loader-accent-deep: #c92828;
  --boot-loader-accent-soft: rgba(232, 52, 52, 0.12);
  --boot-loader-track: rgba(10, 10, 10, 0.08);
  --boot-loader-logo-glow: transparent;
  --boot-loader-logo-glow-dark: transparent;
}

html[data-app-variant='admission'] {
  --boot-loader-canvas: #f4f1ea;
  --boot-loader-accent: #1a4d3e;
  --boot-loader-accent-deep: #0f3329;
  --boot-loader-accent-soft: #2d6b55;
  --boot-loader-track: rgba(26, 77, 62, 0.14);
  --boot-loader-logo-glow: transparent;
  --boot-loader-logo-glow-dark: transparent;
}

html[data-rubmark-product='educator'] {
  --boot-loader-canvas: #f4f1ea;
  --boot-loader-accent: #1a4d3e;
  --boot-loader-accent-deep: #0f3329;
  --boot-loader-accent-soft: #2d6b55;
  --boot-loader-track: rgba(26, 77, 62, 0.14);
  --boot-loader-logo-glow: transparent;
  --boot-loader-logo-glow-dark: transparent;
}

html[data-app-variant='news'] {
  --boot-loader-canvas: #f4f1ea;
  --boot-loader-accent: #1a4d3e;
  --boot-loader-accent-deep: #0f3329;
  --boot-loader-accent-soft: #2d6b55;
  --boot-loader-track: rgba(26, 77, 62, 0.14);
  --boot-loader-logo-glow: rgba(26, 77, 62, 0.2);
  --boot-loader-logo-glow-dark: rgba(26, 77, 62, 0.16);
}

html {
  scrollbar-gutter: stable;
}

html.boot-overlay-active {
  overflow: hidden;
}

html.boot-overlay-active,
html.boot-overlay-active body {
  background: var(--boot-loader-canvas);
  overflow: hidden;
}

/* Keep unstyled static HTML / pre-React shell off-screen until the app dismisses boot. */
html.boot-overlay-active #root {
  visibility: hidden;
  pointer-events: none;
}

html[data-theme='dark'].boot-overlay-active,
html[data-theme='dark'].boot-overlay-active body {
  background: #121214;
}

.boot-overlay,
.boot-screen {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: min(100dvh, 100vh);
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) 1.25rem max(1.5rem, env(safe-area-inset-bottom, 0px));
  background: transparent;
}

html.boot-overlay-active .boot-overlay,
html.boot-overlay-active .boot-screen--fixed {
  display: flex;
}

.boot-static-placeholder {
  box-sizing: border-box;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  font:
    400 0.95rem/1.55 'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: rgba(7, 6, 20, 0.72);
}

.boot-static-placeholder h1 {
  margin: 0 0 0.45rem;
  font:
    700 clamp(1.35rem, 3.2vw, 1.65rem) / 1.2 'Outfit',
    'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.025em;
  color: #070614;
}

.boot-static-placeholder p {
  margin: 0;
}

html[data-app-variant='admission'] .boot-static-placeholder h1,
html[data-app-variant='news'] .boot-static-placeholder h1 {
  color: var(--boot-loader-accent-deep);
}

html[data-app-variant='marketplace'] .boot-static-placeholder {
  color: rgba(229, 229, 216, 0.72);
}

html[data-app-variant='marketplace'] .boot-static-placeholder h1 {
  color: #e5e5d8;
}

.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: 100dvh;
  background: var(--boot-loader-preloader-bg, var(--boot-loader-canvas));
  color: var(--boot-loader-preloader-ink, #f2f0ea);
  transition:
    opacity 0.48s ease,
    visibility 0.48s ease,
    background-color 0.42s ease;
}

.boot-overlay--exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-overlay--revealing {
  background: transparent;
  pointer-events: none;
}

.boot-overlay--revealing .boot-preloader__stage,
.boot-overlay--revealing .boot-preloader__percent,
.boot-overlay--revealing .boot-preloader__backdrop {
  opacity: 0;
  transition: opacity 0.42s ease;
}

.boot-screen--fixed {
  position: fixed;
  inset: 0;
  z-index: 9999;
  height: 100dvh;
  background: var(--boot-loader-canvas);
}

/* ── EverSwap-inspired preloader layout ─────────────────────────────────── */

html[data-app-variant='student'] {
  --boot-loader-preloader-bg: #241f21;
  --boot-loader-preloader-ink: #f2f0ea;
  --boot-loader-preloader-muted: color-mix(in srgb, #f2f0ea 58%, transparent);
  --boot-loader-preloader-accent: #e9e778;
  --boot-loader-preloader-grid: color-mix(in srgb, #f2f0ea 10%, transparent);
}

html[data-rubmark-product='educator'] {
  --boot-loader-preloader-bg: #f4f1ea;
  --boot-loader-preloader-ink: #0c2e24;
  --boot-loader-preloader-muted: color-mix(in srgb, #0c2e24 52%, transparent);
  --boot-loader-preloader-accent: #1a4d3e;
  --boot-loader-preloader-grid: transparent;
}

html[data-app-variant='admission'] {
  --boot-loader-preloader-bg: #0f3329;
  --boot-loader-preloader-ink: #f4f1ea;
  --boot-loader-preloader-muted: color-mix(in srgb, #f4f1ea 56%, transparent);
  --boot-loader-preloader-accent: #2d6b55;
  --boot-loader-preloader-grid: color-mix(in srgb, #f4f1ea 12%, transparent);
}

html[data-app-variant='marketplace'] {
  --boot-loader-preloader-bg: #0a0a0a;
  --boot-loader-preloader-ink: #e5e5d8;
  --boot-loader-preloader-muted: color-mix(in srgb, #e5e5d8 54%, transparent);
  --boot-loader-preloader-accent: #ff5c00;
  --boot-loader-preloader-grid: color-mix(in srgb, #ff5c00 14%, transparent);
}

html[data-app-variant='musicsheet'] {
  --boot-loader-preloader-bg: #f7f7f5;
  --boot-loader-preloader-ink: #0a0a0a;
  --boot-loader-preloader-muted: rgba(10, 10, 10, 0.42);
  --boot-loader-preloader-accent: #e83434;
  --boot-loader-preloader-grid: rgba(10, 10, 10, 0.08);
}

html[data-app-variant='teacher']:not([data-rubmark-product='educator']) {
  --boot-loader-preloader-bg: #070614;
  --boot-loader-preloader-ink: #faf9f6;
  --boot-loader-preloader-muted: color-mix(in srgb, #faf9f6 56%, transparent);
  --boot-loader-preloader-accent: #fdcb45;
  --boot-loader-preloader-grid: color-mix(in srgb, #fdcb45 12%, transparent);
}

.boot-preloader__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.boot-preloader__grid {
  position: absolute;
  inset: -35%;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 46px,
      var(--boot-loader-preloader-grid) 46px,
      var(--boot-loader-preloader-grid) 47px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 46px,
      var(--boot-loader-preloader-grid) 46px,
      var(--boot-loader-preloader-grid) 47px
    );
  animation: boot-preloader-grid-drift 18s linear infinite;
}

.boot-preloader__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  width: 100%;
  min-height: min(100dvh, 100vh);
  padding:
    max(1.75rem, env(safe-area-inset-top, 0px))
    max(1.5rem, env(safe-area-inset-right, 0px))
    max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4rem))
    max(1.5rem, env(safe-area-inset-left, 0px));
  text-align: center;
  transition: opacity 0.42s ease;
}

.boot-preloader__kicker {
  position: absolute;
  top: max(1.5rem, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font:
    500 0.72rem/1.2 'Outfit',
    'Inter',
    system-ui,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--boot-loader-preloader-muted);
}

.boot-preloader__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

html.boot-preloader-logo-visible .boot-preloader__logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.boot-preloader__logo--hex {
  color: var(--boot-loader-preloader-ink);
}

.boot-preloader__hex {
  display: block;
  width: clamp(3.25rem, 11vw, 4.25rem);
  height: clamp(3.25rem, 11vw, 4.25rem);
}

.boot-preloader__mascot {
  display: block;
  width: clamp(3.25rem, 13vw, 4.25rem);
  height: clamp(3.25rem, 13vw, 4.25rem);
  object-fit: contain;
}

.boot-preloader__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.boot-preloader__title {
  margin: 0;
  font:
    200 clamp(2.75rem, 12vw, 5.25rem) / 0.92 'Outfit',
    'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.045em;
  color: var(--boot-loader-preloader-ink);
  text-shadow: 0 0 1.2em color-mix(in srgb, var(--boot-loader-preloader-bg) 35%, transparent);
}

.boot-preloader__accent {
  color: var(--boot-loader-preloader-accent);
}

.boot-preloader__suffix {
  font-weight: 400;
  font-size: 0.58em;
  letter-spacing: -0.02em;
  color: var(--boot-loader-preloader-muted);
}

.boot-preloader__message {
  margin: 0;
  max-width: 18rem;
  font:
    400 0.82rem/1.45 'Inter',
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--boot-loader-preloader-muted);
}

.boot-preloader__percent {
  position: absolute;
  left: 50%;
  bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font:
    200 clamp(1.75rem, 5.5vw, 2.85rem) / 1 'Outfit',
    'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.03em;
  color: var(--boot-loader-preloader-ink);
  transition: opacity 0.42s ease;
}

@keyframes boot-preloader-grid-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-46px, -46px, 0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-preloader__grid {
    animation: none !important;
  }

  .boot-preloader__logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Educator hub — minimal cream loader, small Inter wordmark */
html[data-rubmark-product='educator'] .boot-preloader__backdrop {
  display: none;
}

html[data-rubmark-product='educator'] .boot-preloader__stage {
  gap: 0.55rem;
  min-height: min(100dvh, 100vh);
}

html[data-rubmark-product='educator'] .boot-preloader__kicker,
html[data-rubmark-product='educator'] .boot-preloader__logo {
  display: none;
}

html[data-rubmark-product='educator'] .boot-preloader__title-wrap {
  gap: 0.35rem;
}

html[data-rubmark-product='educator'] .boot-preloader__title {
  font:
    500 0.9375rem/1.35 'Plus Jakarta Sans',
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  letter-spacing: 0.01em;
  text-shadow: none;
}

html[data-rubmark-product='educator'] .boot-preloader__accent {
  color: var(--boot-loader-preloader-ink);
  font-weight: 600;
}

html[data-rubmark-product='educator'] .boot-preloader__suffix {
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0.01em;
  color: var(--boot-loader-preloader-muted);
}

html[data-rubmark-product='educator'] .boot-preloader__message {
  max-width: none;
  font:
    400 0.6875rem/1.4 'Plus Jakarta Sans',
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--boot-loader-preloader-muted);
}

html[data-rubmark-product='educator'] .boot-preloader__percent {
  font:
    400 0.625rem/1 'Plus Jakarta Sans',
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  letter-spacing: 0.04em;
  color: var(--boot-loader-preloader-muted);
}

/* Makers — dark blueprint canvas, pixel wordmark, orange accent (vs main-site chartreuse) */
html[data-app-variant='marketplace'] .boot-preloader__title {
  font:
    400 clamp(1.35rem, 6.5vw, 2.35rem) / 1.08 'Silkscreen', ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 0 1.4em color-mix(in srgb, var(--boot-loader-preloader-accent) 28%, transparent);
}

html[data-app-variant='marketplace'] .boot-preloader__suffix {
  color: #e5e5d8;
}

html[data-app-variant='marketplace'] .boot-preloader__percent {
  color: var(--boot-loader-preloader-accent);
}

html[data-app-variant='marketplace'] .boot-preloader__mascot {
  filter: drop-shadow(0 10px 22px var(--boot-loader-logo-glow));
}

html[data-app-variant='musicsheet'] .boot-preloader__title {
  font:
    600 clamp(2.5rem, 11vw, 4.75rem) / 0.95 'Outfit',
    'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.03em;
  text-shadow: none;
}

html[data-app-variant='musicsheet'] .boot-preloader__kicker,
html[data-app-variant='musicsheet'] .boot-preloader__message {
  color: var(--boot-loader-preloader-muted);
}

/* MusicSheet — Immersive Garden–style intro loader */
html[data-app-variant='musicsheet'] .boot-preloader--immersive {
  align-items: stretch;
  justify-content: stretch;
}

html[data-app-variant='musicsheet'] .boot-preloader__backdrop--immersive {
  display: block;
}

html[data-app-variant='musicsheet'] .boot-preloader__backdrop--immersive .boot-preloader__grid {
  display: none;
}

html[data-app-variant='musicsheet'] .boot-preloader__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--boot-loader-preloader-grid) 1px, transparent 1px),
    linear-gradient(to right, var(--boot-loader-preloader-grid) 1px, transparent 1px),
    linear-gradient(to right, var(--boot-loader-preloader-grid) 1px, transparent 1px);
  background-size:
    calc((100% - 72rem) / 2 + 1.75rem) 100%,
    calc(72rem / 3) 100%,
    calc((100% - 72rem) / 2 + 1.75rem) 100%;
  background-position:
    calc(50% - 36rem) 0,
    calc(50% - 12rem) 0,
    calc(50% + 24rem) 0;
  background-repeat: no-repeat;
  opacity: 0.85;
}

html[data-app-variant='musicsheet'] .boot-preloader__stage--immersive {
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  text-align: left;
  padding:
    max(1.25rem, env(safe-area-inset-top, 0px))
    max(1.5rem, env(safe-area-inset-right, 0px))
    max(5rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem))
    max(1.5rem, env(safe-area-inset-left, 0px));
}

html[data-app-variant='musicsheet'] .boot-preloader__brand-mark {
  position: absolute;
  top: max(1.25rem, env(safe-area-inset-top, 0px));
  left: max(1.5rem, env(safe-area-inset-left, 0px));
  margin: 0;
  font:
    700 0.82rem/1 'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
  color: var(--boot-loader-preloader-ink);
}

html[data-app-variant='musicsheet'] .boot-preloader__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-top: clamp(3rem, 12vh, 6rem);
}

html[data-app-variant='musicsheet'] .boot-preloader__stack-line {
  display: block;
  font:
    200 clamp(2.75rem, 11vw, 6.5rem) / 0.92 'Inter',
    'Helvetica Neue',
    system-ui,
    sans-serif;
  letter-spacing: -0.045em;
  color: var(--boot-loader-preloader-ink);
  opacity: 0;
  transform: translateY(1.25rem);
  animation: boot-immersive-line-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html[data-app-variant='musicsheet'] .boot-preloader__stack-line:nth-child(1) {
  animation-delay: 0.05s;
}

html[data-app-variant='musicsheet'] .boot-preloader__stack-line:nth-child(2) {
  animation-delay: 0.14s;
}

html[data-app-variant='musicsheet'] .boot-preloader__stack-line:nth-child(3) {
  animation-delay: 0.23s;
}

html[data-app-variant='musicsheet'] .boot-preloader__stack-line:nth-child(4) {
  animation-delay: 0.32s;
}

html[data-app-variant='musicsheet'] .boot-preloader__stack-line--accent {
  color: var(--boot-loader-preloader-accent);
  font-weight: 300;
}

html[data-app-variant='musicsheet'] .boot-preloader__scroll-hint {
  position: absolute;
  left: max(1.5rem, env(safe-area-inset-left, 0px));
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  margin: 0;
  font:
    500 0.62rem/1 'Inter',
    system-ui,
    sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--boot-loader-preloader-muted);
  opacity: 0;
  animation: boot-immersive-fade-in 0.6s ease 0.55s forwards;
}

html[data-app-variant='musicsheet'] .boot-preloader__scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 2.5rem;
  margin-top: 0.65rem;
  background: var(--boot-loader-preloader-muted);
  animation: boot-immersive-scroll-line 1.4s ease-in-out 0.9s infinite;
}

html[data-app-variant='musicsheet'] .boot-preloader__message--immersive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-app-variant='musicsheet'] .boot-preloader__percent--immersive {
  left: auto;
  right: max(1.5rem, env(safe-area-inset-right, 0px));
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  transform: none;
  font:
    200 clamp(1.5rem, 4vw, 2.25rem) / 1 'Inter',
    system-ui,
    sans-serif;
  letter-spacing: -0.04em;
  color: var(--boot-loader-preloader-ink);
  opacity: 0;
  animation: boot-immersive-fade-in 0.5s ease 0.4s forwards;
}

html[data-app-variant='musicsheet'].boot-preloader-logo-visible .boot-preloader__stack-line {
  opacity: 1;
  transform: translateY(0);
}

html[data-app-variant='musicsheet'] .boot-overlay--revealing .boot-preloader__stack,
html[data-app-variant='musicsheet'] .boot-overlay--revealing .boot-preloader__scroll-hint,
html[data-app-variant='musicsheet'] .boot-overlay--revealing .boot-preloader__percent--immersive,
html[data-app-variant='musicsheet'] .boot-overlay--revealing .boot-preloader__brand-mark {
  opacity: 0;
  transition: opacity 0.42s ease, transform 0.42s ease;
}

html[data-app-variant='musicsheet'] .boot-overlay--revealing .boot-preloader__stack-line {
  transform: translateY(-1.5rem);
}

@keyframes boot-immersive-line-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes boot-immersive-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes boot-immersive-scroll-line {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: top;
    opacity: 0.35;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-app-variant='musicsheet'] .boot-preloader__stack-line,
  html[data-app-variant='musicsheet'] .boot-preloader__scroll-hint,
  html[data-app-variant='musicsheet'] .boot-preloader__percent--immersive {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  html[data-app-variant='musicsheet'] .boot-preloader__scroll-hint::after {
    animation: none !important;
  }
}

html[data-theme='dark'][data-rubmark-product='educator'] {
  --boot-loader-canvas: #121214;
  --boot-loader-preloader-bg: #121214;
  --boot-loader-preloader-ink: #e8f0ec;
  --boot-loader-preloader-muted: color-mix(in srgb, #e8f0ec 52%, transparent);
  --boot-loader-preloader-accent: #c8ddd4;
}

/* Legacy card loader — kept for embed scripts that inject old markup */
.boot-overlay__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 15.5rem;
  max-width: 100%;
  min-height: 11.75rem;
  flex-shrink: 0;
  padding: 1.4rem 1.25rem 1.2rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(7, 6, 20, 0.06);
  border-radius: 24px;
  box-shadow:
    0 4px 20px -4px rgba(7, 6, 20, 0.06),
    0 18px 40px -12px rgba(7, 6, 20, 0.1);
}

.boot-overlay__logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
}

.boot-overlay__logo {
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px var(--boot-loader-logo-glow));
}

.boot-overlay__brand {
  margin: 0.15rem 0 0;
  font:
    700 1.15rem/1.15 'Outfit',
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  letter-spacing: -0.025em;
  color: #070614;
}

.boot-overlay__accent {
  color: var(--boot-loader-accent);
}

.boot-overlay__makers {
  font-weight: 600;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--boot-loader-accent) 78%, #070614);
}

.boot-overlay__message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.65rem;
  margin: 0;
  font:
    500 0.9rem/1.45 'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: rgba(7, 6, 20, 0.6);
}

.boot-overlay__progress {
  width: 100%;
  height: 4px;
  margin-top: 0.45rem;
  overflow: hidden;
  background: var(--boot-loader-track);
  border-radius: 999px;
}

.boot-overlay__progress-bar {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, var(--boot-loader-accent-deep), var(--boot-loader-accent-soft));
  border-radius: inherit;
  animation: boot-loader-progress 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .boot-overlay__progress-bar {
    animation: none !important;
  }
}

@keyframes boot-loader-progress {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}

/* Makers marketplace — no white card; content sits on the dark canvas */
html[data-app-variant='marketplace'] .boot-overlay__card {
  background: transparent;
  border: none;
  box-shadow: none;
}

html[data-app-variant='marketplace'] .boot-overlay__brand {
  color: #e5e5d8;
}

html[data-app-variant='marketplace'] .boot-overlay__message {
  color: rgba(229, 229, 216, 0.62);
}

/* Admission — flat cream canvas, horizontal hex lockup, no card chrome */
html[data-app-variant='admission'] .boot-overlay__card {
  width: auto;
  min-height: auto;
  padding: 0;
  gap: 1.1rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

html[data-app-variant='admission'] .boot-overlay__brand-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

html[data-app-variant='admission'] .boot-overlay__hex {
  display: block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--boot-loader-accent);
}

html[data-app-variant='admission'] .boot-overlay__logo-slot {
  display: none;
}

html[data-app-variant='admission'] .boot-overlay__brand {
  margin: 0;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--boot-loader-accent);
}

html[data-app-variant='admission'] .boot-overlay__accent {
  color: var(--boot-loader-accent);
}

html[data-app-variant='admission'] .boot-overlay__message {
  height: auto;
  min-height: 1.25rem;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: rgba(15, 46, 38, 0.52);
}

html[data-app-variant='admission'] .boot-overlay__progress {
  width: 7.5rem;
  height: 2px;
  margin-top: 0;
  background: var(--boot-loader-track);
}

html[data-app-variant='admission'] .boot-overlay__progress-bar {
  width: 36%;
  background: var(--boot-loader-accent);
}

/* Educator hub — same admission hex lockup on cream canvas */
html[data-rubmark-product='educator'] .boot-overlay__card {
  width: auto;
  min-height: auto;
  padding: 0;
  gap: 1.1rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

html[data-rubmark-product='educator'] .boot-overlay__brand-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

html[data-rubmark-product='educator'] .boot-overlay__hex {
  display: block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--boot-loader-accent);
}

html[data-rubmark-product='educator'] .boot-overlay__logo-slot {
  display: none;
}

html[data-rubmark-product='educator'] .boot-overlay__brand {
  margin: 0;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--boot-loader-accent);
}

html[data-rubmark-product='educator'] .boot-overlay__accent {
  color: var(--boot-loader-accent);
}

html[data-rubmark-product='educator'] .boot-overlay__makers {
  color: #fdcb45;
  font-weight: 600;
}

html[data-rubmark-product='educator'] .boot-overlay__message {
  height: auto;
  min-height: 1.25rem;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: rgba(15, 46, 38, 0.52);
}

html[data-rubmark-product='educator'] .boot-overlay__progress {
  width: 7.5rem;
  height: 2px;
  margin-top: 0;
  background: var(--boot-loader-track);
}

html[data-rubmark-product='educator'] .boot-overlay__progress-bar {
  width: 36%;
  background: var(--boot-loader-accent);
}

/* Student portal — Floema flat editorial loader */
html[data-app-variant='student'] .boot-overlay__card {
  width: auto;
  min-width: 14.5rem;
  min-height: auto;
  padding: 1.75rem 2rem 1.45rem;
  gap: 0.8rem;
  background: #ffffff;
  border: 1px solid var(--boot-loader-track);
  border-radius: 0;
  box-shadow: none;
}

html[data-app-variant='student'] .boot-overlay__logo-slot {
  width: 3.25rem;
  height: 3.25rem;
}

html[data-app-variant='student'] .boot-overlay__logo {
  width: 3.25rem;
  height: 3.25rem;
  filter: none;
}

html[data-app-variant='student'] .boot-overlay__brand {
  margin: 0.1rem 0 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--boot-loader-ink);
}

html[data-app-variant='student'] .boot-overlay__accent {
  color: var(--boot-loader-ink);
}

html[data-app-variant='student'] .boot-overlay__message {
  height: auto;
  min-height: 1.25rem;
  margin: 0;
  font-family:
    'Outfit',
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--boot-loader-ink) 62%, transparent);
}

html[data-app-variant='student'] .boot-overlay__progress {
  width: 100%;
  height: 2px;
  margin-top: 0.35rem;
  background: var(--boot-loader-track);
  border-radius: 0;
}

html[data-app-variant='student'] .boot-overlay__progress-bar {
  width: 38%;
  background: var(--boot-loader-ink);
}

html[data-theme='dark'] .boot-overlay,
html[data-theme='dark'] .boot-screen--fixed {
  background: var(--boot-loader-preloader-bg, #121214);
}

html[data-theme='dark'] .boot-overlay__card {
  background: #1e1e22;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 20px -4px rgba(0, 0, 0, 0.35),
    0 18px 40px -12px rgba(0, 0, 0, 0.45);
}

html[data-theme='dark'] .boot-overlay__brand {
  color: #f2f2f5;
}

html[data-theme='dark'] .boot-overlay__message {
  color: rgba(242, 242, 245, 0.5);
}

html[data-theme='dark'] .boot-overlay__logo {
  filter: drop-shadow(0 8px 18px var(--boot-loader-logo-glow-dark));
}

html[data-theme='dark'][data-app-variant='student'] {
  --boot-loader-preloader-bg: #121214;
  --boot-loader-preloader-ink: #f2f0ea;
  --boot-loader-preloader-muted: color-mix(in srgb, #f2f0ea 58%, transparent);
  --boot-loader-preloader-accent: #e9e778;
  --boot-loader-preloader-grid: color-mix(in srgb, #e9e778 10%, transparent);
}

html[data-theme='dark'][data-app-variant='student'] .boot-overlay__card {
html[data-theme='dark'][data-app-variant='student'] .boot-overlay__accent {
  color: #f2f0ea;
}

html[data-theme='dark'][data-app-variant='student'] .boot-overlay__message {
  color: color-mix(in srgb, #f2f0ea 58%, transparent);
}

html[data-theme='dark'][data-app-variant='student'] .boot-overlay__progress {
  background: color-mix(in srgb, #f2f0ea 12%, transparent);
}

html[data-theme='dark'][data-app-variant='student'] .boot-overlay__progress-bar {
  background: #e9e778;
}