:root {
	--bg: #0b0c10;
	--panel: #2d2f36;
	--panel-dark: #1b1c22;
	--text: #f3f3f3;
	--muted: #c7c7c9;
	--line: #ffffff33;
	--accent: #8c8f9d;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
	color: var(--text);
	background: radial-gradient(1200px 700px at 20% 0%, #1b1d24, #0b0c10 62%);
	min-height: 100vh;
}

.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 32px);
}

.login-shell {
	width: min(1180px, 96vw);
	min-height: clamp(620px, 85vh, 760px);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: #0f1014;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	animation: shell-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes shell-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.field-with-icon { position: relative; }
.field-with-icon .field-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #b6b7bb;
	font-size: 14px;
	pointer-events: none;
}
.field-with-icon input { padding-left: 44px !important; }

.secure-note {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #ffffff08;
	border: 1px solid #ffffff14;
	color: var(--muted);
	font-size: 12px;
	letter-spacing: 0.02em;
}
.secure-note .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7bd88f;
	box-shadow: 0 0 0 3px #7bd88f33;
}

.panel {
	position: relative;
}

.panel-left {
	background: radial-gradient(circle at 20% 20%, #3a3c46 0%, #2e3038 36%, #272931 72%);
	padding: clamp(20px, 4vw, 32px);
	padding-top: clamp(40px, 6vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.brand-pill {
	align-self: flex-start;
	padding: 8px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #0f1014cc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px #ffffff18;
}

.brand-pill img {
	height: 22px;
	width: auto;
	display: block;
}

.brand-pill .brand-text {
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0 4px;
}

.form-wrap {
	margin-top: clamp(6px, 1vw, 12px);
	max-width: 440px;
}

.form-wrap h1 {
	margin: 0 0 6px;
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 600;
}

.lead {
	margin: 0 0 18px;
	color: var(--muted);
	font-size: 15px;
}

.form-card {
	display: grid;
	gap: 12px;
}

.step-group {
	display: grid;
	gap: 10px;
}

.field {
	display: grid;
	gap: 6px;
	color: var(--muted);
	font-size: 14px;
}

.field input,
.field select,
.field textarea,
.password-wrap input {
	width: 100%;
	padding: 14px 16px;
	border-radius: 999px;
	border: 1px solid #ffffff1a;
	background: var(--panel-dark);
	color: var(--text);
	font-size: 15px;
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.password-wrap input:focus {
	border-color: #ffffff44;
	box-shadow: 0 0 0 4px #ffffff0c;
}

.field textarea {
	border-radius: 22px;
	min-height: 140px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}

.field textarea::placeholder { color: #b6b7bb; }
.select-picker {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--panel-dark);
	border: 1px solid #ffffff1a;
	border-radius: 999px;
}

.select-trigger {
	width: 100%;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 15px;
	padding: 14px 46px 14px 16px;
	text-align: left;
	border-radius: 999px;
	cursor: pointer;
	position: relative;
}

.select-trigger:focus-visible {
	outline: 2px solid #9fc5ff44;
	outline-offset: 2px;
}

.icon-chevron {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.select-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: #1b1c22;
	border: 1px solid #ffffff1a;
	border-radius: 14px;
	box-shadow: 0 16px 50px rgba(0,0,0,0.55);
	padding: 6px;
	z-index: 10;
}

.select-dropdown .option {
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	color: var(--text);
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
}

.select-dropdown .option:hover,
.select-dropdown .option:focus {
	background: #22242c;
	outline: none;
}

.select-dropdown .option.is-placeholder {
	color: #b6b7bb;
}

.date-picker {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 4px;
	border-radius: 999px;
	background: var(--panel-dark);
	border: 1px solid #ffffff1a;
}

.date-picker input[data-date-input] {
	background: transparent;
	border: none;
	outline: none;
	color: var(--text);
	padding: 10px 12px 10px 14px;
	font-size: 15px;
	width: 100%;
}

.date-picker input[data-date-input]::placeholder { color: #b6b7bb; }

.date-trigger {
	min-width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid #ffffff22;
	background: #1c1d23;
	color: var(--text);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.date-trigger:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.35); }
.date-trigger:active { transform: translateY(1px); }

.icon-calendar {
	width: 18px;
	height: 18px;
	background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='17' rx='3' ry='3'/><line x1='3' y1='9' x2='21' y2='9'/><line x1='9' y1='3' x2='9' y2='6'/><line x1='15' y1='3' x2='15' y2='6'/></svg>");
}

.date-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: 360px;
	background: #1b1c22;
	border: 1px solid #ffffff1a;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	padding: 12px;
	z-index: 10;
}

.date-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.date-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.date-select-wrap {
	position: relative;
	flex: 1 1 0;
}

.date-select-trigger {
	width: 100%;
	border: 1px solid #ffffff22;
	border-radius: 12px;
	background: linear-gradient(180deg, #22242c, #1a1b22);
	color: var(--text);
	padding: 10px 40px 10px 14px;
	font-weight: 600;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	position: relative;
}

.date-select-trigger:focus-visible {
	outline: 2px solid #9fc5ff44;
	outline-offset: 2px;
}

.date-select-wrap .icon-chevron {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.date-select-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	background: #1b1c22;
	border: 1px solid #ffffff1a;
	border-radius: 12px;
	box-shadow: 0 16px 50px rgba(0,0,0,0.55);
	max-height: 220px;
	overflow-y: auto;
	z-index: 12;
	padding: 6px;
}

.date-select-dropdown button {
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	color: var(--text);
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
}

.date-select-dropdown button:hover,
.date-select-dropdown button:focus {
	background: #22242c;
	outline: none;
}

.date-title select::-ms-expand { display: none; }

.nav-btn {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #ffffff22;
	background: linear-gradient(180deg, #22242c, #1a1b22);
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.date-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
	margin-bottom: 6px;
}

.date-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 10px;
}

.date-grid .day-spacer {
	width: 34px;
	height: 32px;
	display: block;
}

.date-grid button {
	width: 36px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: #22242c;
	color: var(--text);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.1s ease, background 0.1s ease, transform 0.1s ease;
}

.date-grid button:hover { border-color: #ffffff33; }
.date-grid button:active { transform: translateY(1px); }
.date-grid button.is-today { border-color: #6ea8fe; }
.date-grid button.is-selected {
	background: linear-gradient(180deg, #1c1d23, #0f1014);
	border-color: #9fc5ff;
}

.date-actions {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.date-actions .btn { flex: 1 1 0; padding-inline: 12px; }

.field input::placeholder { color: #b6b7bb; }

.password-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.password-wrap .eye {
	display: block;
	width: 16px;
	height: 10px;
	border-radius: 999px;
	box-shadow: inset 0 -2px 0 #ffffff88;
	border: 1px solid #ffffff60;
}

.password-wrap .eye-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.password-wrap input { padding-right: 44px; }

.confirm-wrap {
	margin-top: 8px;
}

.field input.is-error,
.password-wrap input.is-error {
	border-color: #ff6b6b;
	box-shadow: 0 0 0 1px #ff6b6b55;
}

.pwd-req-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
}

.pwd-req-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 10px;
	background: #1a1b22;
	border: 1px solid #ffffff12;
}

.pwd-req-list li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff33;
}

.pwd-req-list li.is-ok {
	color: #99e6a7;
	border-color: #99e6a744;
}

.pwd-req-list li.is-ok::before {
	background: #7bd88f;
}

.pwd-req-list li.is-bad {
	color: #ff9b9b;
	border-color: #ff9b9b55;
}

.pwd-req-list li.is-bad::before {
	background: #ff6b6b;
}

.pwd-popup {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #ff9b9b55;
	background: #2a1c1c;
	color: #ffb3b3;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.pwd-popup-close {
	background: transparent;
	border: none;
	color: #ffb3b3;
	font-size: 16px;
	cursor: pointer;
}

.auth-error {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #ff9b9b55;
	background: #2a1c1c;
	color: #ffb3b3;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.auth-error-close {
	background: transparent;
	border: none;
	color: #ffb3b3;
	font-size: 16px;
	cursor: pointer;
}

.confirm-wrap input.is-error {
	border-color: #ff6b6b;
	box-shadow: 0 0 0 1px #ff6b6b55;
}

.form-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	margin-top: 4px;
}

.form-actions .btn {
	flex: 1 1 0;
}

.reset-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

.link-reset {
	background: none;
	border: none;
	color: var(--muted);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 6px 0;
}

.link-reset:hover,
.link-reset:focus-visible {
	color: var(--text);
	outline: none;
}

.reset-notice {
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #6ea8fe55;
	background: #182132;
	color: #cfe2ff;
	font-size: 13px;
	line-height: 1.4;
}

.btn {
	border: 1px solid #ffffff1f;
	border-radius: 999px;
	background: linear-gradient(180deg, #22242c, #1a1b22);
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 18px;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.35); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.55;
	filter: grayscale(1);
	cursor: not-allowed;
	box-shadow: none;
}

.btn.primary {
	background: linear-gradient(180deg, #1c1d23, #0f1014);
	border-color: #ffffff26;
}

.btn.accent {
	background: linear-gradient(180deg, #f78f53, #d97a45);
	border-color: #f78f5380;
	color: #1a0e08;
}

.btn.accent:hover { box-shadow: 0 12px 30px rgba(247, 143, 83, 0.35); }

.notice-success {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid #99e6a766;
	background: #18241c;
	color: #c2f2cf;
	font-size: 13px;
	line-height: 1.5;
}

.lead-info {
	display: grid;
	gap: 14px;
	margin-top: 18px;
	color: var(--muted);
	font-size: 14px;
}

.lead-info .info-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.lead-info .info-icon {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: #ffffff10;
	border: 1px solid #ffffff20;
	display: grid;
	place-items: center;
	color: var(--text);
	flex-shrink: 0;
}

.lead-info strong { color: var(--text); display: block; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }

.btn.pill { min-width: 150px; }
.btn.ghost {
	background: transparent;
	color: var(--text);
}

.providers {
	display: flex;
	gap: 14px;
	margin-top: 10px;
}

.verify-block {
	margin-top: 14px;
	display: grid;
	gap: 10px;
	color: var(--muted);
	font-size: 14px;
}

.verify-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.verify-actions .btn {
	min-width: 140px;
	justify-content: center;
	padding-inline: 18px;
}

.has-icon { gap: 10px; }

.icon-google {
	width: 20px;
	height: 20px;
	display: inline-block;
	background: center / contain no-repeat
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%234285F4' d='M44.5 20H24v8.5h11.8C34.5 32.9 29.8 36 24 36c-7 0-12.8-5.8-12.8-12.8S17 10.5 24 10.5c3.2 0 6.1 1.2 8.3 3.2l6.2-6.2C34.6 3.1 29.6 1 24 1 11.3 1 1 11.3 1 24s10.3 23 23 23 23-10.3 23-23c0-1.3-.1-2.2-.5-4Z'/><path fill='%2334A853' d='M6.3 14.7 12.9 19.5c1.5-4.5 5.7-9 11.1-9 3.2 0 6.1 1.4 8.3 3.2l6.2-6.2C34.6 3.1 29.6 1 24 1 15.3 1 7.7 5.9 4 12.8Z'/><path fill='%23FBBC05' d='M24 47c5.6 0 10.6-1.9 14.4-5.3l-6.7-5.5c-2 1.4-4.7 2.3-7.7 2.3-5.9 0-10.9-3.9-12.7-9.2l-6.8 5.2C8.3 40.7 15.5 47 24 47Z'/><path fill='%23EA4335' d='M44.5 20H24v8.5h11.8c-.9 2.5-2.7 4.6-4.9 5.8l6.7 5.5C40.5 41.1 47 35.7 47 24c0-1.3-.2-2.6-.5-4Z'/></svg>");
	border-radius: 4px;
}

.footer-links {
	margin-top: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--muted);
	font-size: 14px;
}

.footer-links a { color: var(--muted); text-decoration: underline; }

.switch-row {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.is-hidden { display: none !important; }

.panel-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 960px) {
	.login-shell {
		grid-template-columns: 1fr;
		min-height: unset;
	}
	.panel-right { height: 46vh; }
	.panel-left { padding-bottom: 28px; }
}

@media (max-width: 600px) {
	.providers { flex-direction: column; }
	.footer-links { flex-direction: column; gap: 8px; align-items: flex-start; }
}