body.tnstack-login-page {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #f6f8fc;
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tnstack-login-page *,
.tnstack-login-page *::before,
.tnstack-login-page *::after {
  box-sizing: border-box;
}

.tnstack-login-page #login {
  width: 100%;
  margin: 0;
  padding: 0;
}
.tnstack-login-page #login > h1 {
  display: none;
}

.tnstack-login-shell {
  display: grid;
  grid-template-columns: minmax(360px, 46%) 1fr;
  width: 100%;
  min-height: 100vh;
}

.tnstack-login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 54px clamp(38px, 6vw, 92px) 40px;
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(56, 189, 248, 0.26),
      transparent 30%
    ),
    linear-gradient(145deg, #111c44, #1d4ed8 62%, #0891b2);
  color: #fff;
  overflow: hidden;
}

.tnstack-login-brand::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -170px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 65px rgba(255, 255, 255, 0.035),
    0 0 0 130px rgba(255, 255, 255, 0.025);
}

.tnstack-login-brand__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}
.tnstack-login-brand__glow--one {
  top: 17%;
  right: 10%;
  width: 170px;
  height: 170px;
  background: rgba(125, 211, 252, 0.12);
}
.tnstack-login-brand__glow--two {
  bottom: 17%;
  left: 12%;
  width: 110px;
  height: 110px;
  background: rgba(167, 139, 250, 0.15);
}
.tnstack-login-brand__content,
.tnstack-login-brand__footer {
  position: relative;
  z-index: 1;
}

.tnstack-login-brand__content {
  max-width: 560px;
  margin: auto 0;
}

.tnstack-login-brand__logo {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 19px;
  background-color: rgba(255, 255, 255, 0.14);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
  box-shadow: 0 15px 38px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
}

.tnstack-login-brand__logo.has-image {
  background-color: #fff;
  background-size: 82%;
}
.tnstack-login-brand__logo.has-image span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.tnstack-login-brand__eyebrow {
  margin: 0 0 15px;
  color: #bae6fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.tnstack-login-brand h1 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
	text-align: left;
	text-transform: uppercase;
}
.tnstack-login-brand__content > p:last-child {
  max-width: 510px;
  margin: 0;
  color: #dbeafe;
  font-size: 17px;
  line-height: 1.7;
}
.tnstack-login-brand__footer {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.tnstack-login-panel {
	position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
	min-height: 100vh;
	padding: 56px clamp(28px, 5vw, 76px);
	background:
		radial-gradient(circle at 90% 8%, rgba(37, 99, 235, 0.09), transparent 30%),
		radial-gradient(circle at 15% 92%, rgba(14, 165, 233, 0.08), transparent 28%),
		#f6f8fc;
}

.tnstack-login-panel__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 490px);
	padding: 38px 40px 34px;
	border: 1px solid rgba(203, 213, 225, 0.78);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(12px);
}
.tnstack-login-panel__heading {
	margin-bottom: 30px;
}
.tnstack-login-panel__heading > p {
  margin: 0 0 11px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.tnstack-login-panel__heading h2 {
  margin: 0 0 10px;
  color: #172033;
	font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.tnstack-login-panel__heading span {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.tnstack-login-page #login form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.tnstack-login-page #login form p {
	margin: 0;
}

.tnstack-login-page #login form .forgetmenot {
	display: flex;
	align-items: center;
	min-height: 24px;
  float: none;
	margin: 1px 0 20px;
}

.tnstack-login-page #login form .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

.tnstack-login-page #login form .forgetmenot input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	border-color: #cbd5e1;
	border-radius: 5px;
}

.tnstack-login-page label {
	display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}
.tnstack-login-page .input,
.tnstack-login-page input[type="text"],
.tnstack-login-page input[type="email"],
.tnstack-login-page input[type="password"] {
	display: block;
	width: 100%;
	max-width: none;
  min-height: 50px;
  margin: 7px 0 19px;
  padding: 10px 14px;
  border: 1px solid #d7dee9;
  border-radius: 11px;
  background: #fff;
  color: #172033;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tnstack-login-page .input:focus,
.tnstack-login-page input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
  outline: 0;
}

.tnstack-login-page .user-pass-wrap .wp-pwd {
  position: relative;
}
.tnstack-login-page .user-pass-wrap .wp-pwd .input {
  padding-right: 50px;
}
.tnstack-login-page .button.wp-hide-pw,
.tnstack-login-page .tnstack-password-toggle {
  position: absolute;
  top: 7px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  box-shadow: none;
  cursor: pointer;
}

.tnstack-login-page #login p.submit {
	display: block;
	clear: both;
	margin: 0;
}

.tnstack-login-page.wp-core-ui #login .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
  float: none;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.tnstack-login-page.wp-core-ui #login .button-primary:hover,
.tnstack-login-page.wp-core-ui #login .button-primary:focus {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.27);
}
.tnstack-login-page.wp-core-ui #login .button-primary.is-loading {
  opacity: 0.72;
  cursor: wait;
}
.tnstack-login-page #nav,
.tnstack-login-page #backtoblog {
	width: 100%;
	box-sizing: border-box;
  padding: 0;
  text-align: center;
}
.tnstack-login-page #nav {
  margin: 25px 0 0;
}
.tnstack-login-page #backtoblog {
  margin: 12px 0 0;
}
.tnstack-login-page #nav a,
.tnstack-login-page #backtoblog a {
  color: #526079;
  font-size: 13px;
  text-decoration: none;
}
.tnstack-login-page #nav a:hover,
.tnstack-login-page #backtoblog a:hover {
  color: #2563eb;
}
.tnstack-login-page .message,
.tnstack-login-page #login_error,
.tnstack-login-page .success {
	box-sizing: border-box;
	width: 100%;
  margin: 0 0 22px;
  padding: 13px 15px;
  border: 0;
  border-left: 4px solid #3b82f6;
  border-radius: 9px;
  background: #eff6ff;
  color: #334155;
  box-shadow: none;
}
.tnstack-login-page #login_error {
  border-left-color: #ef4444;
  background: #fef2f2;
}
.tnstack-login-page .success {
  border-left-color: #22c55e;
  background: #f0fdf4;
}
.tnstack-login-page .language-switcher {
	position: static;
	width: 100%;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid #edf1f6;
	text-align: center;
}

.tnstack-login-page .language-switcher form {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.tnstack-login-page .language-switcher label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #64748b;
	font-weight: 500;
}

.tnstack-login-page .language-switcher select {
	min-height: 36px;
	margin: 0;
	border-color: #d7dee9;
	border-radius: 8px;
}

.tnstack-login-page .language-switcher .button {
	min-height: 36px;
	border-color: #d7dee9;
	border-radius: 8px;
	background: #fff;
}
.tnstack-login-page .privacy-policy-page-link {
  margin: 18px 0 0;
}
.tnstack-login-page .privacy-policy-page-link a {
  color: #64748b;
}
.tnstack-login-page .dashicons {
  line-height: 1;
}

@media (max-width: 900px) {
  .tnstack-login-shell {
    grid-template-columns: 1fr;
  }
  .tnstack-login-brand {
    min-height: auto;
    padding: 30px;
  }
  .tnstack-login-brand__content {
    margin: 0;
  }
  .tnstack-login-brand__logo {
    width: 54px;
    height: 54px;
    margin-bottom: 25px;
    border-radius: 14px;
  }
  .tnstack-login-brand h1 {
    font-size: 32px;
  }
  .tnstack-login-brand__content > p:last-child {
    display: none;
  }
  .tnstack-login-brand__footer {
    display: none;
  }
  .tnstack-login-panel {
    min-height: 65vh;
    padding: 38px 24px 70px;
  }
	.tnstack-login-panel__inner {
		padding: 34px;
		border-radius: 20px;
	}
}

@media (max-width: 480px) {
  .tnstack-login-brand {
    padding: 22px;
  }
  .tnstack-login-brand__eyebrow {
    display: none;
  }
  .tnstack-login-brand h1 {
    margin-bottom: 0;
    font-size: 25px;
  }
  .tnstack-login-brand__logo {
    margin-bottom: 17px;
  }
  .tnstack-login-panel {
    align-items: flex-start;
		padding: 26px 14px 50px;
  }
	.tnstack-login-panel__inner {
		padding: 28px 22px 24px;
		border-radius: 18px;
		box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
	}
  .tnstack-login-panel__heading h2 {
    font-size: 27px;
  }
	.tnstack-login-page .language-switcher form { flex-wrap: wrap; }
}