@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* ---- kadon monochrome palette ---- */
:root, .dark, html {
  color-scheme: dark !important;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --background: 0 0% 9% !important;
  --foreground: 0 0% 95% !important;
  --card: 0 0% 13% !important;
  --card-foreground: 0 0% 95% !important;
  --popover: 0 0% 13% !important;
  --popover-foreground: 0 0% 95% !important;
  --primary: 0 0% 95% !important;
  --primary-foreground: 0 0% 9% !important;
  --secondary: 0 0% 16% !important;
  --secondary-foreground: 0 0% 95% !important;
  --muted: 0 0% 15% !important;
  --muted-foreground: 0 0% 64% !important;
  --accent: 0 0% 17% !important;
  --accent-foreground: 0 0% 95% !important;
  --destructive: 0 60% 38% !important;
  --destructive-foreground: 0 0% 98% !important;
  --border: 0 0% 23% !important;
  --input: 0 0% 23% !important;
  --ring: 0 0% 83% !important;
  --radius: 2px !important;
}

html { background: #171717 !important; height: 100%; }
body { background: transparent !important; margin: 0; }

#root {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  box-sizing: border-box;
  background: transparent !important;
}
#root { padding-top: var(--kadon-nav-h, 49.6px); }

#root > div,
.bg-background { background-color: transparent !important; }

/* ---- starfield ---- */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.stars { position: absolute; inset: -8%; background-repeat: repeat; }
.stars-far { opacity: .45; background-image: radial-gradient(circle at 12px 18px,#e8e8e8 0 1px,transparent 1.4px),radial-gradient(circle at 70px 48px,#8a8a8a 0 1px,transparent 1.4px),radial-gradient(circle at 120px 96px,#cfcfcf 0 1px,transparent 1.4px); background-size: 160px 120px; animation: starDrift 90s linear infinite; }
.stars-mid { opacity: .7; background-image: radial-gradient(circle at 24px 20px,#fff 0 1.4px,transparent 1.6px),radial-gradient(circle at 96px 70px,#a3a3a3 0 1px,transparent 1.4px); background-size: 220px 160px; animation: starDrift 55s linear infinite reverse; }
@keyframes starDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-80px,36px,0); } }

/* ---- top dock ---- */
.utility-dock { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; gap: 2.4px 18.4px; box-sizing: border-box; min-height: 49.6px; margin: 0; padding: 10.4px clamp(20px, 6vw, 72px); background: #171717; border: 0; border-bottom: 1px solid #3a3a3a; border-radius: 0; box-shadow: none; }
.utility-dock .utility-btn { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 0; color: #bdbdbd; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.48px; font-weight: 500; letter-spacing: 0; line-height: 1.2; text-decoration: none; }
.utility-dock .utility-btn:hover, .utility-dock .utility-btn[aria-current="page"] { color: #f2f2f2; background: transparent; }
.utility-dock .utility-btn[aria-current="page"] { box-shadow: inset 0 -2px 0 #d4d4d4; }
@media (max-width: 560px) { .utility-dock { gap: 0.35rem 0.85rem; padding-inline: 1rem; } }

/* ---- keep app toasts (and other top-anchored overlays) clear of the fixed kadon dock ----
   the toast viewport is `fixed inset-x-0 top-0 z-[100]` with pt = safe-area + 12px, which
   slides underneath the dock (z-index 1000). Push it down by the measured dock height. */
.pointer-events-none.fixed.inset-x-0.top-0.z-\[100\],
[class*="pointer-events-none fixed inset-x-0 top-0 z-[100]"] {
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--kadon-nav-h, 49.6px)) !important;
}