/* Standalone authentication surface used by app-hosted Blynk and TongZ login
   pages. Deliberately its own file (not a shared @import) so an app-hosted
   login doesn't have to load the whole portal design system — but the
   values below are intentionally kept in visual sync with the portal's own
   .login-card rendering (styles.css's .modal-content/.btn-primary/.btn-oauth
   and auth-forms.css's .login-card rules) so a user moving between the
   portal and an app-hosted login page sees the same design language. If
   those source rules change, check back here. */

*, *::before, *::after {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
}

body.application-login {
	font-family: 'Plus Jakarta Sans', 'Gill Sans', 'Gill Sans MT', -apple-system, BlinkMacSystemFont, sans-serif;
	background: #000;
	color: #fff;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 60px 60px;
}

.application-login-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.application-login-section {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Frosted-glass card — matches styles.css's .modal-content base rule. */
.application-login .login-card {
	width: min(100%, 360px);
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #111;
}

.application-login .login-card h1 {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	line-height: 1.2;
	text-align: center;
}

.application-login .login-card form > *,
.application-login .login-card label {
	margin-left: 0;
	margin-right: 0;
}

.application-login .login-card label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #111;
}

.application-login .login-card input[type="email"],
.application-login .login-card input[type="password"] {
	display: block;
	width: 100%;
	height: 2.5rem;
	margin-bottom: 1rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.8);
	color: #111;
	font: inherit;
	font-size: 16px;
}

.application-login .login-card .btn-primary,
.application-login .login-card .btn-oauth {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Matches styles.css's .btn-primary exactly — same greenyellow/glow
   "TongZ design language" button as the portal's own login form. */
.application-login .login-card .btn-primary {
	width: 100%;
	background-color: greenyellow;
	color: #fff;
	font-weight: bold;
	height: 50px;
	border: 1px solid #fff;
	border-radius: 20px;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	animation: applicationLoginButtonPulse 2.2s ease-in-out infinite;
}

@keyframes applicationLoginButtonPulse {
	0%   { box-shadow: 0 0 4px 1px rgba(0, 123, 255, 0.3); }
	50%  { box-shadow: 0 0 22px 6px rgba(0, 123, 255, 1.0); }
	100% { box-shadow: 0 0 4px 1px rgba(0, 123, 255, 0.3); }
}

.application-login .login-card .btn-primary:disabled {
	background: #3a3a3a;
	border-color: rgba(255, 255, 255, 0.2);
	cursor: not-allowed;
	text-shadow: none;
	animation: none;
}

.application-login .login-card .btn-oauth:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.application-login .login-card .error,
.application-login .login-card .success {
	width: 100%;
	margin: 0.75rem 0 0;
	line-height: 1.35;
	text-align: center;
}

.application-login .login-card .error {
	color: #cc2200;
}

.application-login .login-card .success {
	color: #228800;
}

.application-login .login-card .register-link {
	width: 100%;
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.85rem;
}

.application-login .login-card .register-link a {
	color: #007700;
	text-decoration: none;
}

.application-login .login-card .register-link a:hover {
	text-decoration: underline;
}

.application-login .oauth-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 1rem;
	color: rgba(0, 0, 0, 0.45);
	font-size: 0.8rem;
}

.application-login .oauth-divider::before,
.application-login .oauth-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	background: rgba(0, 0, 0, 0.2);
}

.application-login .oauth-buttons {
	display: grid;
	gap: 0.6rem;
}

/* Matches styles.css's .btn-oauth exactly, hover state included. Also
   supplies the create-account button's visuals — it carries the same
   btn-oauth class in the shared login markup, same as the portal's own
   auth-forms.css a.create-account-prompt rule only adds spacing on top of
   btn-oauth rather than restyling it. */
.application-login .login-card .btn-oauth {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1.5px solid #bcc0c4;
	background: #fff;
	color: #3c4043;
	font-size: 0.875rem;
	transition: background 0.15s, box-shadow 0.15s;
}

.application-login .login-card .btn-oauth:hover {
	background: #f7f8f8;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.application-login .login-card .create-account-prompt {
	margin-top: 0.75rem;
}

.application-login .oauth-buttons svg,
.application-login .create-account-prompt svg {
	width: 1.15rem;
	height: 1.15rem;
	vertical-align: middle;
}

/*
///////////////////////////////////////////////////////////////////////////////
//
// END OF FILE
//
///////////////////////////////////////////////////////////////////////////////
*/