:root {
	--graphite-950: #07090c;
	--graphite-900: #0d1015;
	--graphite-800: #151922;
	--graphite-700: #242a34;
	--platinum: #d8dce3;
	--muted: #8f98a8;
	--champagne: #c5a46c;
	--champagne-bright: #dfc38e;
}

* {
	box-sizing: border-box;
}

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

body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 32px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	color: var(--platinum);
	background-color: #050a13;
	background-image:
		radial-gradient(circle at 50% 46%, rgba(3, 7, 13, .2) 0%, rgba(3, 7, 13, .08) 28%, transparent 52%),
		linear-gradient(180deg, rgba(3, 6, 12, .16), rgba(3, 6, 12, .02) 62%, rgba(3, 6, 12, .2)),
		url("../img/login-options-surface-v2.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	isolation: isolate;
}

body::before {
	content: "";
	position: fixed;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 3, 8, .38) 100%);
}

.login-panel {
	position: relative;
	width: min(430px, calc(100vw - 32px));
	padding: 40px 40px 36px;
	overflow: hidden;
	border: 1px solid rgba(190, 199, 211, .19);
	border-radius: 14px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 42%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 8px),
		rgba(11, 15, 22, .88);
	box-shadow:
		0 34px 90px rgba(0, 0, 0, .58),
		0 1px 0 rgba(255, 255, 255, .04) inset;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.login-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 72px;
	height: 2px;
	background: linear-gradient(90deg, var(--champagne-bright), rgba(197, 164, 108, .08));
	box-shadow: 0 0 18px rgba(197, 164, 108, .32);
	transform: translateX(-50%);
}

.login-panel::after {
	content: "DERIVATIVES RISK CONTROL";
	display: block;
	margin-top: 24px;
	color: rgba(174, 183, 197, .42);
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .25em;
	text-align: center;
}

.login-title {
	margin: 0 0 30px;
	color: #f2f4f7;
	font-size: clamp(13px, 1.55vw, 18px);
	line-height: 1.25;
	font-weight: 750;
	letter-spacing: .06em;
	text-align: center;
	white-space: nowrap;
}

.form-field {
	margin-bottom: 17px;
}

.form-field label {
	display: block;
	margin-bottom: 8px;
	color: #b9c0cc;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

.form-field input {
	width: 100%;
	height: 44px;
	padding: 8px 13px;
	border: 1px solid rgba(157, 168, 184, .25);
	border-radius: 7px;
	color: #f4f6f8;
	background: rgba(4, 6, 9, .55);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset;
	font-size: 15px;
	font-weight: 650;
	outline: 0;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-field input:hover {
	border-color: rgba(190, 199, 211, .38);
}

.form-field input:focus {
	border-color: rgba(216, 184, 126, .82);
	background: rgba(6, 8, 12, .78);
	box-shadow: 0 0 0 3px rgba(197, 164, 108, .11);
}

.login-error {
	margin: 0 0 15px;
	padding: 10px 12px;
	border: 1px solid rgba(226, 104, 104, .35);
	border-radius: 7px;
	color: #f0b3b3;
	background: rgba(114, 26, 32, .24);
	font-size: 12px;
	font-weight: 700;
}

.login-button {
	position: relative;
	width: 100%;
	height: 46px;
	margin-top: 3px;
	overflow: hidden;
	border: 1px solid rgba(213, 183, 128, .62);
	border-radius: 7px;
	color: #f6f2ea;
	background: linear-gradient(180deg, #363a42 0%, #242830 48%, #191c22 100%);
	box-shadow:
		0 9px 24px rgba(0, 0, 0, .32),
		0 1px 0 rgba(255, 255, 255, .1) inset;
	font-size: 14px;
	font-weight: 750;
	letter-spacing: .14em;
	cursor: pointer;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.login-button:hover {
	border-color: var(--champagne-bright);
	box-shadow:
		0 12px 28px rgba(0, 0, 0, .42),
		0 0 0 1px rgba(197, 164, 108, .08) inset;
	transform: translateY(-1px);
}

.login-button:focus-visible {
	outline: 2px solid var(--champagne-bright);
	outline-offset: 3px;
}

.login-button:active {
	transform: translateY(0);
}

@media (max-width: 900px) {
	body {
		justify-content: center;
		padding: 20px;
		background-image:
			linear-gradient(rgba(3, 7, 13, .38), rgba(3, 7, 13, .38)),
			url("../img/login-options-surface-v2.png");
		background-position: center;
	}
}

@media (max-width: 560px) {
	body {
		padding: 16px;
	}

	.login-panel {
		padding: 34px 26px 28px;
	}

	.login-title {
		letter-spacing: .04em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.login-button,
	.form-field input {
		transition: none;
	}
}