:root {
  --hub-auth-bg: #0e1014;
  --hub-auth-panel: rgba(23, 25, 31, .94);
  --hub-auth-panel-soft: #20232a;
  --hub-auth-ink: #f2f3f5;
  --hub-auth-muted: #969ba5;
  --hub-auth-line: #3a3e47;
  --hub-auth-accent: #8b7cf5;
  --hub-auth-button: #f2f3f5;
  --hub-auth-button-ink: #15171b;
}

html,
body,
#root {
  min-width: 320px;
  min-height: 100%;
}

body {
  color: var(--hub-auth-ink) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(103, 87, 232, .14), transparent 34%),
    var(--hub-auth-bg) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.MuiContainer-root.MuiContainer-maxWidthXs {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: clamp(26px, 5vw, 38px) !important;
  border: 1px solid var(--hub-auth-line);
  border-radius: 22px;
  background: var(--hub-auth-panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
  backdrop-filter: blur(20px);
}

#UserSvg {
  display: none !important;
}

.MuiTypography-h5 {
  position: relative;
  margin: 0 0 24px !important;
  padding-top: 78px;
  color: var(--hub-auth-ink) !important;
  font-size: clamp(31px, 7vw, 39px) !important;
  font-weight: 780 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  text-align: left !important;
}

.MuiTypography-h5::before {
  content: "M";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--hub-auth-accent);
  box-shadow: 0 8px 24px rgba(103, 87, 232, .3);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
}

.MuiTypography-h5::after {
  content: "MyWebHUB";
  position: absolute;
  top: 10px;
  left: 54px;
  color: var(--hub-auth-ink);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.02em;
}

.MuiOutlinedInput-root {
  min-height: 50px;
  border-radius: 12px !important;
  color: var(--hub-auth-ink) !important;
  background: var(--hub-auth-panel-soft) !important;
  transition: box-shadow .18s ease, background-color .18s ease;
}

.MuiOutlinedInput-root fieldset {
  border-color: var(--hub-auth-line) !important;
}

.MuiOutlinedInput-root:hover fieldset {
  border-color: color-mix(in srgb, var(--hub-auth-ink) 42%, transparent) !important;
}

.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-auth-accent) 20%, transparent);
}

.MuiOutlinedInput-root.Mui-focused fieldset,
.MuiInputLabel-root.Mui-focused {
  border-color: var(--hub-auth-accent) !important;
  color: var(--hub-auth-accent) !important;
}

.MuiInputLabel-root,
.MuiFormControlLabel-label,
.MuiTypography-body1,
.MuiTypography-body2 {
  color: var(--hub-auth-muted) !important;
}

.MuiSvgIcon-root {
  color: currentColor;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--hub-auth-accent) !important;
}

.MuiButton-containedPrimary {
  min-height: 50px;
  border-radius: 12px !important;
  color: var(--hub-auth-button-ink) !important;
  background: var(--hub-auth-button) !important;
  box-shadow: none !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.MuiButton-containedPrimary:hover {
  background: #dfe1e5 !important;
}

.MuiLink-root {
  color: var(--hub-auth-muted) !important;
}

button[aria-label="Język"],
button[aria-label="Language"] {
  top: max(17px, env(safe-area-inset-top));
  right: max(17px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  border: 1px solid var(--hub-auth-line);
  border-radius: 12px;
  color: var(--hub-auth-ink) !important;
  background: var(--hub-auth-panel) !important;
}

@media (prefers-color-scheme: light) {
  :root {
    --hub-auth-bg: #f6f7f9;
    --hub-auth-panel: rgba(255, 255, 255, .95);
    --hub-auth-panel-soft: #f0f2f5;
    --hub-auth-ink: #16181d;
    --hub-auth-muted: #6e737d;
    --hub-auth-line: #d2d5da;
    --hub-auth-accent: #6757e8;
    --hub-auth-button: #16181d;
    --hub-auth-button-ink: #fff;
  }

  body {
    background:
      radial-gradient(circle at 50% 18%, rgba(103, 87, 232, .09), transparent 34%),
      var(--hub-auth-bg) !important;
  }

  .MuiButton-containedPrimary:hover {
    background: #292c32 !important;
  }
}

@media (max-width: 520px) {
  body {
    overflow: hidden;
  }

  .MuiContainer-root.MuiContainer-maxWidthXs {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    padding: 24px 20px 22px !important;
    border-radius: 18px;
  }

  .MuiTypography-h5 {
    padding-top: 66px;
    font-size: 31px !important;
  }

  .MuiTypography-h5::before {
    width: 38px;
    height: 38px;
  }

  .MuiTypography-h5::after {
    top: 8px;
    left: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}