:root {
  --auth-bg: #09090d;
  --auth-card: linear-gradient(145deg, rgba(28, 27, 35, .96), rgba(16, 16, 23, .98));
  --auth-border: rgba(255, 255, 255, .11);
  --auth-border-soft: rgba(255, 255, 255, .07);
  --auth-text: #f4f1ea;
  --auth-muted: #8f96a7;
  --auth-muted-strong: #b4b8c3;
  --auth-input: rgba(255, 255, 255, .045);
  --auth-success: #2fe09b;
  --auth-warning: #f4b83f;
  --auth-danger: #ff5b70;
}

body {
  font-family: var(--ui-font-sans, "Manrope", "DM Sans", sans-serif) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .08), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(120, 124, 134, .16), transparent 28%),
    linear-gradient(135deg, #07070b 0%, #101017 48%, #08080c 100%) !important;
  color: var(--auth-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .52;
  z-index: 0;
}

.wrap,
.login-wrap {
  position: relative;
  z-index: 1;
}

.logo,
.nav-logo {
  font-family: var(--ui-font-sans, "Manrope", sans-serif) !important;
  color: var(--auth-text) !important;
}

.logo-icon,
.nav-logo-icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045)) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 18px 48px rgba(0, 0, 0, .42) !important;
  color: var(--auth-text) !important;
}

.logo-icon i,
.nav-logo-icon i {
  font-size: 20px;
  line-height: 1;
}

.logo-icon:not(:has(i)),
.nav-logo-icon:not(:has(i)) {
  font-size: 0 !important;
}

.logo-icon:not(:has(i))::after,
.nav-logo-icon:not(:has(i))::after {
  content: "\ef36";
  font-family: "remixicon";
  font-size: 20px;
  line-height: 1;
  color: var(--auth-text);
}

.card {
  position: relative;
  background: var(--auth-card) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, .46), rgba(255, 255, 255, .12) 18%, transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06) 22%, transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card-title,
h1 {
  color: var(--auth-text) !important;
  font-family: var(--ui-font-sans, "Manrope", sans-serif) !important;
  letter-spacing: -.04em;
}

.card-sub,
.sub,
.back,
.footer-link,
.footer-note,
p {
  color: var(--auth-muted) !important;
}

label {
  color: var(--auth-muted-strong) !important;
  letter-spacing: .08em !important;
}

input,
input[type="text"],
input[type="email"],
input[type="password"] {
  background: var(--auth-input) !important;
  border: 1px solid var(--auth-border-soft) !important;
  color: var(--auth-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

input:focus {
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .045) !important;
}

.btn,
.btn-login,
.btn-submit,
.btn-primary,
.btn-nav.primary,
.plan-cta.solid {
  background: linear-gradient(145deg, #f4f1ea, #aeb3bf) !important;
  color: #09090d !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.btn:hover,
.btn-login:hover,
.btn-submit:hover,
.btn-primary:hover,
.btn-nav.primary:hover,
.plan-cta.solid:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}

.back a,
.footer-link a,
.footer-note a {
  color: var(--auth-muted-strong) !important;
}

.msg.error,
.error-msg {
  background: rgba(255, 91, 112, .11) !important;
  border-color: rgba(255, 91, 112, .26) !important;
  color: var(--auth-danger) !important;
}

.msg.success {
  background: rgba(47, 224, 155, .10) !important;
  border-color: rgba(47, 224, 155, .24) !important;
  color: var(--auth-success) !important;
}

.msg.disabled {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--auth-border-soft) !important;
}

.pw-hint.met {
  background: rgba(47, 224, 155, .12) !important;
  color: var(--auth-success) !important;
}

.pw-bar.s1 { background: var(--auth-danger) !important; }
.pw-bar.s2 { background: #ffb45f !important; }
.pw-bar.s3 { background: var(--auth-warning) !important; }
.pw-bar.s4 { background: var(--auth-success) !important; }

.verify-ok .icon,
.verify-error .icon {
  font-size: 0 !important;
}

.verify-ok .icon::after,
.verify-error .icon::after {
  font-family: "remixicon";
  font-size: 52px;
  line-height: 1;
}

.verify-ok .icon::after {
  content: "\eb80";
  color: var(--auth-success);
}

.verify-error .icon::after {
  content: "\eb96";
  color: var(--auth-danger);
}