@font-face {
	font-family: 'BR Sans';
	src: url('../fonts/Inter.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'BR Mono';
	src: url('../fonts/JetBrainsMono.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

:root {
	--br-bg: #14181c;
	--br-ink: #f6f5f1;
	--br-ink-muted: rgba(246, 245, 241, 0.58);
	--br-accent: #12324f;
	--br-gold: #c9a96a;
	--br-error: #e0654a;
	--br-panel: rgba(20, 24, 28, 0.72);
	--br-panel-border: rgba(246, 245, 241, 0.12);
}

html,
body.task-login {
	background: var(--br-bg) !important;
	color: var(--br-ink);
	min-height: 100%;
	font-family: 'BR Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.task-login #layout {
	background: transparent;
	min-height: 100vh;
	position: relative;
}

/* ogl's Renderer.setSize() sets the canvas's inline pixel width/height to
   match canvas.parentElement's clientWidth/clientHeight directly — so the
   host, not the canvas, is what needs to be pinned to the viewport. */
.bg-field-host {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--br-bg);
	overflow: hidden;
}

#bg-field {
	display: block;
}

body.task-login #layout-content {
	/* Elastic's base styles.css paints #layout-content solid white — without
	   an explicit override here that white shows straight through this
	   column, blocking the particle canvas behind it and turning the glass
	   panel muddy gray instead of dark (panel's translucency was compositing
	   against white, not against --br-bg). */
	background: transparent;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	max-width: 26rem;
	margin: 0 auto;
	padding: 2rem 1.25rem;
	box-sizing: border-box;
	float: none;
}

body.task-login .brand {
	text-align: center;
	margin-bottom: 2rem;
}

body.task-login .brand-word {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--br-ink);
}

body.task-login .brand-tag {
	display: block;
	margin-top: 0.4rem;
	font-family: 'BR Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--br-gold);
}

body.task-login #login-form {
	width: 100%;
	background: var(--br-panel);
	border: 1px solid var(--br-panel-border);
	border-radius: 14px;
	padding: 2rem 1.75rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.task-login #login-form table {
	width: 100%;
	border-collapse: collapse;
}

body.task-login #login-form table tr {
	display: block;
	margin-bottom: 1.1rem;
}

body.task-login #login-form table td.title {
	display: block;
	width: 100%;
	padding: 0;
}

body.task-login #login-form td.title label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--br-ink-muted);
}

/* td.input keeps Elastic's own .input-group flex layout (JS-injected) —
   only recolor it to match the dark theme, don't touch display/flow. */
body.task-login #login-form td.input {
	padding: 0;
	position: relative;
}

body.task-login #login-form .pw-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.25rem;
	margin: 0;
	color: var(--br-ink-muted);
	cursor: pointer;
	line-height: 0;
}

body.task-login #login-form .pw-toggle:hover,
body.task-login #login-form .pw-toggle:focus-visible {
	color: var(--br-gold);
	outline: none;
}

body.task-login #login-form .input-group-prepend .input-group-text.icon {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(246, 245, 241, 0.16);
	border-right: none;
	color: var(--br-ink-muted);
}

body.task-login #login-form td.input input.form-control {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(246, 245, 241, 0.16);
	color: var(--br-ink);
	font-size: 0.95rem;
	font-family: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}

body.task-login #login-form td.input input.form-control::placeholder {
	color: rgba(246, 245, 241, 0.35);
}

/* Browser autofill forces its own opaque light background + dark text on
   the input (not overridable via `background`) — left alone this punches a
   pale rectangle straight through the dark theme the moment a saved
   credential fills in. The 1000px inset shadow trick repaints that forced
   background from under the text instead. */
body.task-login #login-form td.input input.form-control:-webkit-autofill,
body.task-login #login-form td.input input.form-control:-webkit-autofill:hover,
body.task-login #login-form td.input input.form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--br-ink);
	-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset;
	box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset;
	caret-color: var(--br-ink);
	transition: background-color 9999s ease-in-out 0s;
}

body.task-login #login-form td.input input.form-control:focus {
	outline: none;
	border-color: var(--br-gold);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.18);
}

body.task-login #login-form td.input:has(input.form-control:focus) .input-group-text.icon {
	border-color: var(--br-gold);
}

body.task-login .formbuttons {
	margin: 1.4rem 0 0;
}

body.task-login .formbuttons .button.mainaction.submit {
	width: 100%;
	background: var(--br-accent);
	border: 1px solid var(--br-gold);
	color: var(--br-ink);
	border-radius: 8px;
	padding: 0.7rem 1rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

body.task-login .formbuttons .button.mainaction.submit:hover {
	background: #163a5c;
}

body.task-login .formbuttons .button.mainaction.submit:active {
	transform: translateY(1px);
}

body.task-login .forgot-pw {
	margin-top: 0.9rem;
	text-align: center;
}

body.task-login .forgot-pw-link {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.8rem;
	font-family: inherit;
	color: var(--br-ink-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

body.task-login .forgot-pw-link:hover,
body.task-login .forgot-pw-link:focus-visible {
	color: var(--br-gold);
}

body.task-login .forgot-pw-hint {
	margin: 0.5rem 0 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--br-ink-muted);
}

body.task-login #login-footer {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.72rem;
	color: var(--br-ink-muted);
}

body.task-login #login-footer a.support-link {
	color: var(--br-gold);
}

body.task-login .box.error,
body.task-login .message.error {
	background: rgba(224, 101, 74, 0.14);
	border: 1px solid rgba(224, 101, 74, 0.4);
	color: var(--br-error);
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	margin-bottom: 1rem;
	font-size: 0.85rem;
}

@media (max-width: 420px) {
	body.task-login #login-form {
		padding: 1.5rem 1.25rem;
	}
}