/* LinkPad — modern login page (centered card)
   Shared by index.cfm and login.cfm. Self-contained: does not depend
   on the legacy Bootstrap-3 theme. */

:root {
	--lp-bg-1: #2b3a42;
	--lp-bg-2: #37474f;
	--lp-bg-3: #1f6f6b;
	--lp-card: #ffffff;
	--lp-ink: #1f2933;
	--lp-muted: #6b7785;
	--lp-line: #e2e8f0;
	--lp-field: #f8fafc;
	--lp-accent: #16a34a;
	--lp-accent-dk: #128a3f;
	--lp-accent-2: #0ea5a4;
	--lp-danger-bg: #fef2f2;
	--lp-danger-ink: #b91c1c;
	--lp-danger-line: #fecaca;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--lp-ink);
	background: radial-gradient(1200px 600px at 15% 10%, var(--lp-bg-3) 0%, rgba(31,111,107,0) 55%),
	            linear-gradient(135deg, var(--lp-bg-1) 0%, var(--lp-bg-2) 100%);
	background-attachment: fixed;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	-webkit-font-smoothing: antialiased;
}

.lp-card {
	width: 100%;
	max-width: 410px;
	background: var(--lp-card);
	border-radius: 18px;
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	animation: lp-rise 0.45s ease;
}

.lp-brand {
	background: #e8eaec;
	padding: 40px 24px 22px;
	text-align: center;
	border-bottom: 6px solid var(--lp-accent);
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
}

.lp-body {
	padding: 30px 38px 30px;
}

@keyframes lp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.lp-logo {
	display: block;
	margin: 0 auto;
	width: 279px;
	max-width: 90%;
	height: auto;
}

.lp-title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.01em;
}

.lp-subtitle {
	margin: 0 0 26px;
	font-size: 14px;
	color: var(--lp-muted);
	text-align: center;
}

.lp-alert {
	background: var(--lp-danger-bg);
	border: 1px solid var(--lp-danger-line);
	color: var(--lp-danger-ink);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 22px;
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
}
.lp-alert strong { display: block; margin-bottom: 2px; font-size: 14px; }

.lp-field { margin-bottom: 18px; }

.lp-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--lp-ink);
	margin-bottom: 7px;
}

.lp-field input[type="text"],
.lp-field input[type="email"],
.lp-field input[type="password"] {
	width: 100%;
	font-size: 15px;
	color: var(--lp-ink);
	background: var(--lp-field);
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.lp-field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--lp-accent-2);
	box-shadow: 0 0 0 3px rgba(14, 165, 164, 0.18);
}

.lp-pass-wrap { position: relative; }
.lp-pass-wrap input { padding-right: 46px; }

.lp-pass-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--lp-muted);
	cursor: pointer;
	border-radius: 8px;
	transition: color 0.15s, background 0.15s;
}
.lp-pass-toggle:hover { color: var(--lp-ink); background: var(--lp-field); }
.lp-pass-toggle:focus-visible { outline: 2px solid var(--lp-accent-2); outline-offset: 1px; }
.lp-pass-toggle svg { width: 20px; height: 20px; display: block; }
.lp-pass-toggle .lp-eye-off { display: none; }
.lp-pass-toggle.is-visible .lp-eye { display: none; }
.lp-pass-toggle.is-visible .lp-eye-off { display: block; }

.lp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 2px 0 24px;
	font-size: 13.5px;
}

.lp-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lp-muted);
	cursor: pointer;
	user-select: none;
}
.lp-remember input { width: 16px; height: 16px; accent-color: var(--lp-accent); cursor: pointer; }

.lp-link {
	color: var(--lp-accent-2);
	text-decoration: none;
	font-weight: 600;
}
.lp-link:hover { text-decoration: underline; }

.lp-btn {
	display: block;
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}

.lp-btn-primary {
	background: var(--lp-accent);
	color: #fff;
	box-shadow: 0 8px 18px -6px rgba(22, 163, 74, 0.55);
}
.lp-btn-primary:hover { background: var(--lp-accent-dk); }
.lp-btn-primary:active { transform: translateY(1px); }

.lp-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 18px;
	color: var(--lp-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.lp-divider::before,
.lp-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lp-line);
}

.lp-footer { text-align: center; }
.lp-footer p { margin: 0 0 12px; font-size: 13.5px; color: var(--lp-muted); }

.lp-btn-ghost {
	background: #fff;
	color: var(--lp-ink);
	border: 1px solid var(--lp-line);
}
.lp-btn-ghost:hover { border-color: var(--lp-accent); color: var(--lp-accent-dk); }

@media (max-width: 460px) {
	.lp-card { border-radius: 14px; }
	.lp-brand { padding: 31px 20px 18px; }
	.lp-body { padding: 26px 22px; }
	.lp-logo { width: 230px; }
}