:root {
  --apple-blue: #007aff;
  --apple-green: #34c759;
  --apple-orange: #ff9500;
  --apple-red: #ff3b30;
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  --apple-radius: 22px;
  --apple-radius-sm: 14px;
  --apple-ease: cubic-bezier(.2, .8, .2, 1);
}

html.light {
  --apple-page: #f5f5f7;
  --apple-page-2: #ffffff;
  --apple-text: #1d1d1f;
  --apple-muted: rgba(60, 60, 67, .68);
  --apple-material: rgba(255, 255, 255, .72);
  --apple-material-strong: rgba(255, 255, 255, .88);
  --apple-hairline: rgba(0, 0, 0, .08);
  --apple-shadow: 0 18px 48px rgba(0, 0, 0, .08), 0 2px 12px rgba(0, 0, 0, .04);
  --apple-inner: inset 0 1px 0 rgba(255, 255, 255, .75);
}

html.dark {
  --apple-page: #050506;
  --apple-page-2: #161617;
  --apple-text: #f5f5f7;
  --apple-muted: rgba(235, 235, 245, .64);
  --apple-material: rgba(28, 28, 30, .74);
  --apple-material-strong: rgba(44, 44, 46, .88);
  --apple-hairline: rgba(255, 255, 255, .12);
  --apple-shadow: 0 22px 60px rgba(0, 0, 0, .36), 0 2px 12px rgba(0, 0, 0, .26);
  --apple-inner: inset 0 1px 0 rgba(255, 255, 255, .08);
}

* {
  letter-spacing: 0 !important;
}

html,
body,
#root {
  min-height: 100%;
  background:
    linear-gradient(180deg, var(--apple-page-2) 0%, var(--apple-page) 42%, var(--apple-page) 100%) !important;
  color: var(--apple-text) !important;
  font-family: var(--apple-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(0, 122, 255, .10), transparent 34%),
    linear-gradient(240deg, rgba(52, 199, 89, .08), transparent 32%),
    linear-gradient(180deg, transparent, rgba(255, 149, 0, .055));
}

html.dark body::before {
  background:
    linear-gradient(120deg, rgba(10, 132, 255, .18), transparent 34%),
    linear-gradient(240deg, rgba(48, 209, 88, .10), transparent 32%),
    linear-gradient(180deg, transparent, rgba(255, 159, 10, .08));
}

main {
  width: min(1180px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
  padding: 24px 0 48px !important;
}

main > div:first-child {
  margin-bottom: 18px !important;
}

main img[alt="animated-man"] {
  display: none !important;
}

main h1,
main h2,
main h3,
main p,
main span,
main div {
  font-family: var(--apple-font) !important;
}

main p,
main span {
  color: inherit;
}

main [class*="text-muted"],
main [class*="text-gray"],
main [class*="text-stone"] {
  color: var(--apple-muted) !important;
}

main button,
main a[href="/admin"],
main [role="button"] {
  border-radius: 999px !important;
  border: 1px solid var(--apple-hairline) !important;
  background: var(--apple-material) !important;
  color: var(--apple-text) !important;
  box-shadow: var(--apple-inner), 0 1px 2px rgba(0, 0, 0, .04) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  transition: transform .18s var(--apple-ease), background .18s var(--apple-ease), border-color .18s var(--apple-ease), box-shadow .18s var(--apple-ease) !important;
}

main button:hover,
main a[href="/admin"]:hover,
main [role="button"]:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--apple-blue) 36%, var(--apple-hairline)) !important;
  box-shadow: var(--apple-inner), 0 8px 22px rgba(0, 122, 255, .12) !important;
}

main .server-overview > *,
main [class*="bg-card"],
main [class*="bg-white"],
main [class*="dark:bg-stone"],
main [class*="rounded-lg"][class*="border"],
main [class*="rounded-"][class*="border"] {
  border-radius: var(--apple-radius) !important;
  border-color: var(--apple-hairline) !important;
  background: var(--apple-material) !important;
  box-shadow: var(--apple-shadow), var(--apple-inner) !important;
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  backdrop-filter: saturate(180%) blur(26px);
}

main .server-overview > * {
  min-height: 118px;
}

main [class*="hover\\:border-blue-500"]:hover,
main [class*="hover\\:bg-accent"]:hover,
main [class*="cursor-pointer"]:hover {
  border-color: color-mix(in srgb, var(--apple-blue) 48%, var(--apple-hairline)) !important;
}

main [class*="text-blue"],
main [class*="fill-sky"],
main [class*="stroke-sky"] {
  color: var(--apple-blue) !important;
  fill: var(--apple-blue) !important;
  stroke: var(--apple-blue) !important;
}

main [class*="text-emerald"],
main [class*="text-green"],
main [class*="fill-green"] {
  color: var(--apple-green) !important;
  fill: var(--apple-green) !important;
}

main [class*="text-amber"],
main [class*="text-orange"] {
  color: var(--apple-orange) !important;
}

main [class*="text-red"],
main [class*="text-rose"] {
  color: var(--apple-red) !important;
}

main input,
main [cmdk-input] {
  border-radius: 14px !important;
  background: var(--apple-material-strong) !important;
  border: 1px solid var(--apple-hairline) !important;
  color: var(--apple-text) !important;
}

main [class*="grid"] {
  gap: 14px !important;
}

main svg {
  stroke-width: 1.8;
}

@media (max-width: 640px) {
  main {
    width: min(100vw - 20px, 1180px) !important;
    padding-top: 14px !important;
  }

  main .server-overview > * {
    min-height: 96px;
  }

  main [class*="rounded-lg"][class*="border"],
  main [class*="rounded-"][class*="border"] {
    border-radius: 18px !important;
  }
}