/* G6M_BUNDLE_02 — 3 feuilles, ordre du document preserve */
/* ==== g6m-avatar-file-v209.css ==== */
/* G6M_AVATAR_FILE_V209 — premium file picker for avatar overlay
   END G6M_AVATAR_FILE_V209 */

/* Avatar upload overlay / account avatar form */
html body .js-uploadAvatar,
html body input.js-uploadAvatar[type="file"],
html body .avatarControl input[type="file"],
html body .avatarControl-inputs input[type="file"],
html body form[data-xf-init="avatar-upload"] input[type="file"],
html body .overlay-container .overlay-content input[type="file"],
html body .overlay-content form[action*="avatar"] input[type="file"],
html body .overlay-content input[type="file"][name="upload"],
html body .overlay-content input[type="file"].input,
html body .block[data-xf-init*="avatar"] input[type="file"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0.35rem 0 0.5rem !important;
	padding: 0.35rem 0.45rem !important;
	box-sizing: border-box !important;
	border-radius: 12px !important;
	border: 1px solid rgba(141, 56, 255, 0.35) !important;
	background: linear-gradient(180deg, rgba(22, 18, 36, 0.95), rgba(12, 10, 22, 0.98)) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
	color: rgba(220, 214, 240, 0.88) !important;
	font-size: 0.85rem !important;
	line-height: 1.25 !important;
	cursor: pointer !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html body .js-uploadAvatar::file-selector-button,
html body input.js-uploadAvatar[type="file"]::file-selector-button,
html body .avatarControl input[type="file"]::file-selector-button,
html body form[data-xf-init="avatar-upload"] input[type="file"]::file-selector-button,
html body .overlay-container .overlay-content input[type="file"]::file-selector-button,
html body .overlay-content form[action*="avatar"] input[type="file"]::file-selector-button,
html body .overlay-content input[type="file"][name="upload"]::file-selector-button,
html body .overlay-content input[type="file"].input::file-selector-button,
html body .block[data-xf-init*="avatar"] input[type="file"]::file-selector-button,
html body .js-uploadAvatar::-webkit-file-upload-button,
html body input.js-uploadAvatar[type="file"]::-webkit-file-upload-button,
html body .avatarControl input[type="file"]::-webkit-file-upload-button,
html body form[data-xf-init="avatar-upload"] input[type="file"]::-webkit-file-upload-button,
html body .overlay-container .overlay-content input[type="file"]::-webkit-file-upload-button,
html body .overlay-content form[action*="avatar"] input[type="file"]::-webkit-file-upload-button,
html body .overlay-content input[type="file"][name="upload"]::-webkit-file-upload-button,
html body .overlay-content input[type="file"].input::-webkit-file-upload-button,
html body .block[data-xf-init*="avatar"] input[type="file"]::-webkit-file-upload-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;
	margin: 0 0.65rem 0 0 !important;
	padding: 0.4rem 0.9rem !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	border-radius: 9px !important;
	border: 1px solid rgba(255, 11, 139, 0.45) !important;
	background: linear-gradient(135deg, #ff0b8b 0%, #8d38ff 100%) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.8rem !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	cursor: pointer !important;
	box-shadow: 0 0 12px rgba(255, 11, 139, 0.22) !important;
	transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}

html body .js-uploadAvatar:hover,
html body input.js-uploadAvatar[type="file"]:hover,
html body .avatarControl input[type="file"]:hover,
html body form[data-xf-init="avatar-upload"] input[type="file"]:hover,
html body .overlay-container .overlay-content input[type="file"]:hover,
html body .overlay-content form[action*="avatar"] input[type="file"]:hover,
html body .overlay-content input[type="file"][name="upload"]:hover {
	border-color: rgba(255, 11, 139, 0.55) !important;
	box-shadow:
		0 0 0 2px rgba(255, 11, 139, 0.12),
		inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html body .js-uploadAvatar:hover::file-selector-button,
html body .js-uploadAvatar:hover::-webkit-file-upload-button,
html body .avatarControl input[type="file"]:hover::file-selector-button,
html body .avatarControl input[type="file"]:hover::-webkit-file-upload-button,
html body .overlay-container .overlay-content input[type="file"]:hover::file-selector-button,
html body .overlay-content input[type="file"]:hover::-webkit-file-upload-button,
html body .overlay-content form[action*="avatar"] input[type="file"]:hover::file-selector-button,
html body .overlay-content form[action*="avatar"] input[type="file"]:hover::-webkit-file-upload-button {
	filter: brightness(1.06) !important;
	box-shadow: 0 0 16px rgba(255, 11, 139, 0.32) !important;
}

/* Keep avatar modal upload row from blowing up vertically */
html body .avatarControl-inputs,
html body .overlay-content .formRow:has(input[type="file"]),
html body .overlay-content dd:has(input[type="file"]) {
	overflow: visible !important;
	min-width: 0 !important;
}

html body .avatarControl-inputs label + .js-uploadAvatar,
html body .avatarControl-inputs .js-uploadAvatar {
	margin-top: 0.4rem !important;
}

html body .overlay-content .formRow:has(input[type="file"]) .formRow-input,
html body .overlay-content dd:has(input[type="file"]) {
	max-width: 100% !important;
}

@media (max-width: 520px) {
	html body .overlay-container .overlay-content input[type="file"],
	html body .overlay-content form[action*="avatar"] input[type="file"] {
		font-size: 0.78rem !important;
		padding: 0.3rem 0.35rem !important;
	}

	html body .overlay-container .overlay-content input[type="file"]::file-selector-button,
	html body .overlay-container .overlay-content input[type="file"]::-webkit-file-upload-button,
	html body .overlay-content form[action*="avatar"] input[type="file"]::file-selector-button,
	html body .overlay-content form[action*="avatar"] input[type="file"]::-webkit-file-upload-button {
		padding: 0.35rem 0.7rem !important;
		height: 30px !important;
		font-size: 0.75rem !important;
	}
}

/* ==== g6m-avatar-online-fix-v223.css ==== */
/* G6M avatar online badge — clean status dot (no FA user-circle) */
/* --g6m-avatar-online-fix: V223 */

html body .message-avatar-wrapper .message-avatar-online,
html body .message-avatar .message-avatar-online,
html body .message-cell--user .message-avatar--online .message-avatar-online {
	position: absolute !important;
	inset: auto 0.12rem 0.12rem auto !important;
	left: auto !important;
	top: auto !important;
	right: 0.12rem !important;
	bottom: 0.12rem !important;
	width: 0.72rem !important;
	height: 0.72rem !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	border-radius: 50% !important;
	border: 2px solid #0c0a14 !important;
	background: #22c55e !important;
	color: transparent !important;
	box-shadow:
		0 0 0 1px rgba(34, 197, 94, 0.35),
		0 0 10px rgba(34, 197, 94, 0.45) !important;
	transform: none !important;
	z-index: 5 !important;
	overflow: hidden !important;
	font-size: 0 !important;
}

/* Kill XF FA user-circle mask (::before) — that person glyph is the glitch */
html body .message-avatar-wrapper .message-avatar-online::before,
html body .message-avatar .message-avatar-online::before,
html body .message-cell--user .message-avatar--online .message-avatar-online::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
}

html body .message-avatar-wrapper .message-avatar-online::after,
html body .message-avatar .message-avatar-online::after,
html body .message-cell--user .message-avatar--online .message-avatar-online::after {
	content: none !important;
	display: none !important;
}

/* ==== g6m-credits-amount-fix-v172.css ==== */
/* G6M_CREDITS_AMOUNT_FIX_V172
   Widen credits transaction amount/solde column; stop truncation. */

html body .structItem-cell--transaction-meta,
html body .structItem.structItem--transaction .structItem-cell--meta,
html body .p-body-pageContent .structItem-cell--meta {
	width: 13.5rem !important;
	min-width: 12.5rem !important;
	max-width: none !important;
	flex: 0 0 13.5rem !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
}

html body .structItem-cell--transaction-meta dl,
html body .structItem-cell--transaction-meta dd,
html body .structItem-cell--transaction-meta dt,
html body .structItem-cell--meta .pairs,
html body .structItem-cell--meta .pairs > dd,
html body .structItem-cell--meta a {
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: unset !important;
	max-width: none !important;
}

html body .block[data-widget-definition="dbtech_credits_richest"] .contentRow-minor,
html body .block[data-widget-key="dbtech_credits_richest"] .contentRow-minor,
html body .block[data-widget-definition="dbtech_credits_wallet"] .pairs > dd,
html body .block[data-widget-key="dbtech_credits_wallet"] .pairs > dd {
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: unset !important;
}

/* END G6M_CREDITS_AMOUNT_FIX_V172 */
/* G6M_LOGIN_FINAL_V177
   Complete login redesign in one file — must win document cascade. */

/* ─── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes g6mLoginTitlePulse {
	0%, 100% {
		filter: drop-shadow(0 0 16px rgba(196, 77, 255, 0.32))
			drop-shadow(0 0 28px rgba(255, 11, 139, 0.18));
	}
	50% {
		filter: drop-shadow(0 0 22px rgba(255, 11, 139, 0.48))
			drop-shadow(0 0 36px rgba(141, 56, 255, 0.28));
	}
}

@keyframes g6mLoginLinePulse {
	0%, 100% { opacity: 0.72; box-shadow: 0 0 12px rgba(255, 11, 139, 0.35); }
	50% { opacity: 1; box-shadow: 0 0 18px rgba(141, 56, 255, 0.55); }
}

/* ─── Page shell — no horizontal scroll, depth ──────────────────────────── */
html body[data-template="login"],
html body.template-login,
html body[data-template="login_password"],
html body.template-login_password {
	overflow-x: hidden !important;
}

html body[data-template="login"] .p-pageWrapper,
html body.template-login .p-pageWrapper,
html body[data-template="login_password"] .p-pageWrapper,
html body.template-login_password .p-pageWrapper {
	position: relative !important;
	isolation: isolate !important;
	overflow-x: hidden !important;
	min-height: 100vh !important;
	background-color: #07070b !important;
	/* Soft scenic base (palms stay via image layer below) */
	background-image: none !important;
	background-attachment: scroll !important;
	filter: none !important;
}

/* Palm layer — slight blur + reduced opacity for depth */
html body[data-template="login"] .p-pageWrapper::after,
html body.template-login .p-pageWrapper::after,
html body[data-template="login_password"] .p-pageWrapper::after,
html body.template-login_password .p-pageWrapper::after {
	content: "" !important;
	position: absolute !important;
	inset: -12px !important;
	z-index: 0 !important;
	pointer-events: none !important;
	background-image: url(/forum/styles/g6m/gta6modding-forum-bg-desktop.webp?v=bg175) !important;
	background-position: center top !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	opacity: 0.72 !important;
	filter: blur(2.5px) saturate(0.95) !important;
	-webkit-filter: blur(2.5px) saturate(0.95) !important;
	transform: scale(1.02) !important;
}

/* Veil + vignette (replaces prior full-bleed ::before artifacts) */
html body[data-template="login"] .p-pageWrapper::before,
html body.template-login .p-pageWrapper::before,
html body[data-template="login_password"] .p-pageWrapper::before,
html body.template-login_password .p-pageWrapper::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	pointer-events: none !important;
	background:
		radial-gradient(ellipse 85% 70% at 50% 40%, transparent 35%, rgba(4, 4, 8, 0.55) 100%),
		radial-gradient(ellipse 70% 45% at 50% 0%, rgba(141, 56, 255, 0.14), transparent 58%),
		linear-gradient(180deg, rgba(6, 6, 12, 0.38) 0%, rgba(6, 6, 12, 0.52) 48%, rgba(6, 6, 12, 0.78) 100%) !important;
	width: auto !important;
	height: auto !important;
	left: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
}

html body[data-template="login"] .p-header,
html body[data-template="login"] .p-navSticky,
html body[data-template="login"] .p-body,
html body.template-login .p-header,
html body.template-login .p-navSticky,
html body.template-login .p-body {
	position: relative !important;
	z-index: 2 !important;
	background: transparent !important;
}

html body[data-template="login"] .p-body,
html body.template-login .p-body {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* ─── Kill stray neon rail (forum titlebar V80/V89 ::before) ─────────────── */
html body[data-template="login"] .p-body-header::before,
html body[data-template="login"] .p-pageWrapper > .p-body-header::before,
html body[data-template="login"] .uix_pageWrapper--fixed > .p-body-header::before,
html body.template-login .p-body-header::before,
html body.template-login .p-pageWrapper > .p-body-header::before,
html body[data-template="login_password"] .p-body-header::before,
html body.template-login_password .p-body-header::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ─── Layout — centered column, more air under header ───────────────────── */
html body[data-template="login"] .p-body .p-body-inner,
html body[data-template="login"] .p-pageWrapper .p-body-inner,
html body[data-template="login"] .p-body-inner,
html body.template-login .p-body .p-body-inner,
html body.template-login .p-pageWrapper .p-body-inner,
html body.template-login .p-body-inner,
html body[data-template="login_password"] .p-body-inner,
html body.template-login_password .p-body-inner {
	max-width: 460px !important;
	width: 100% !important;
	margin: 3.25rem auto 3.5rem !important;
	padding: 0 1.15rem !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

html body[data-template="login"] .p-body-pageContent,
html body.template-login .p-body-pageContent {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

html body[data-template="login"] .p-body-sideNav,
html body[data-template="login"] .p-body-sidebar,
html body.template-login .p-body-sideNav,
html body.template-login .p-body-sidebar {
	display: none !important;
}

/* ─── Header / title block ──────────────────────────────────────────────── */
html body[data-template="login"] .p-body-header,
html body.template-login .p-body-header,
html body[data-template="login_password"] .p-body-header,
html body.template-login_password .p-body-header {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto 1.65rem !important;
	padding: 0.35rem 0 0.15rem !important;
	text-align: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

html body[data-template="login"] .p-body-header .pageContent,
html body.template-login .p-body-header .pageContent,
html body[data-template="login"] .p-body-header .uix_headerInner,
html body.template-login .p-body-header .uix_headerInner,
html body[data-template="login"] .p-body-header .uix_headerInner--opposite {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	text-align: center !important;
	transform: none !important;
	order: unset !important;
	flex: none !important;
	gap: 0 !important;
}

html body[data-template="login"] .p-body-header .p-title,
html body.template-login .p-body-header .p-title,
html body[data-template="login"] .p-title {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	transform: none !important;
	gap: 0 !important;
}

html body[data-template="login"] .p-title-pageAction,
html body.template-login .p-title-pageAction {
	display: none !important;
}

/* Hero wordmark — purple → pink, glow, tracking, soft pulse */
html body[data-template="login"] .p-body-header .p-title-value,
html body.template-login .p-body-header .p-title-value,
html body[data-template="login"] .p-body-header h1.p-title-value,
html body.template-login h1.p-title-value,
html body[data-template="login"] .p-title-value,
html body.template-login .p-title-value,
html body[data-template="login_password"] .p-title-value {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0.15rem 0.5rem !important;
	font-family: Rajdhani, Orbitron, "Segoe UI", sans-serif !important;
	font-size: clamp(2.35rem, 5.2vw, 3.35rem) !important;
	font-weight: 800 !important;
	letter-spacing: 0.22em !important;
	text-indent: 0.22em !important; /* optical center with letter-spacing */
	text-transform: uppercase !important;
	line-height: 1.08 !important;
	text-align: center !important;
	background: linear-gradient(105deg, #8d38ff 0%, #c44dff 32%, #ff4db8 68%, #ff0b8b 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	text-shadow: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	filter: drop-shadow(0 0 16px rgba(196, 77, 255, 0.32))
		drop-shadow(0 0 28px rgba(255, 11, 139, 0.18)) !important;
	animation: g6mLoginTitlePulse 4.5s ease-in-out infinite !important;
}

/* Fine luminous line under title (flex-column sibling) */
html body[data-template="login"] .p-body-header .p-title::after,
html body.template-login .p-body-header .p-title::after,
html body[data-template="login_password"] .p-body-header .p-title::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	width: 5.25rem !important;
	height: 2px !important;
	margin: 0.95rem auto 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, transparent 0%, #ff0b8b 22%, #8d38ff 50%, #00d7ff 78%, transparent 100%) !important;
	box-shadow: 0 0 14px rgba(255, 11, 139, 0.4) !important;
	animation: g6mLoginLinePulse 4.5s ease-in-out infinite !important;
}

/* ─── Glass card ────────────────────────────────────────────────────────── */
html body[data-template="login"] .block,
html body.template-login .block {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

html body[data-template="login"] .block--login .block-container,
html body[data-template="login"] .block-container,
html body.template-login .block-container,
html body[data-template="login_password"] .block-container {
	position: relative !important;
	width: 100% !important;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
		linear-gradient(165deg, rgba(22, 16, 34, 0.72) 0%, rgba(10, 8, 16, 0.78) 100%) !important;
	border: 1px solid rgba(200, 160, 255, 0.22) !important;
	border-radius: 20px !important;
	box-shadow:
		0 0 0 1px rgba(141, 56, 255, 0.12),
		0 28px 64px rgba(0, 0, 0, 0.52),
		0 0 40px rgba(141, 56, 255, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(141, 56, 255, 0.06) !important;
	backdrop-filter: blur(22px) saturate(1.2) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
	overflow: hidden !important;
}

/* Soft top specular highlight */
html body[data-template="login"] .block-container::before,
html body.template-login .block-container::before {
	content: "" !important;
	position: absolute !important;
	left: 8% !important;
	right: 8% !important;
	top: 0 !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
	pointer-events: none !important;
	z-index: 1 !important;
	opacity: 0.85 !important;
}

html body[data-template="login"] .block-body,
html body.template-login .block-body {
	padding: 1.5rem 1.55rem 1.65rem !important;
}

html body[data-template="login"] .formRow,
html body.template-login .formRow {
	margin-bottom: 1.05rem !important;
}

html body[data-template="login"] .formRow > dt,
html body[data-template="login"] .formRow-label,
html body.template-login .formRow > dt {
	color: rgba(230, 226, 245, 0.9) !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	margin-bottom: 0.4rem !important;
}

/* Hide XF submit-row chrome bar (not the artifact, but cleans the CTA zone) */
html body[data-template="login"] .formSubmitRow-bar,
html body.template-login .formSubmitRow-bar {
	display: none !important;
	background: none !important;
	box-shadow: none !important;
	height: 0 !important;
}

html body[data-template="login"] .formSubmitRow-controls,
html body.template-login .formSubmitRow-controls {
	padding: 0.35rem 0 0 !important;
	text-align: stretch !important;
}

/* ─── Inputs ────────────────────────────────────────────────────────────── */
html body[data-template="login"] .input,
html body[data-template="login"] input[type="text"],
html body[data-template="login"] input[type="password"],
html body[data-template="login"] input[type="email"],
html body.template-login .input {
	background: rgba(6, 6, 12, 0.72) !important;
	border: 1px solid rgba(200, 160, 255, 0.2) !important;
	border-radius: 12px !important;
	color: #f5f4fa !important;
	padding: 0.8rem 1rem !important;
	font-size: 0.95rem !important;
	min-height: 2.9rem !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
	transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}

html body[data-template="login"] .input:hover,
html body.template-login .input:hover {
	border-color: rgba(200, 160, 255, 0.35) !important;
}

html body[data-template="login"] .input:focus,
html body[data-template="login"] input:focus,
html body.template-login .input:focus {
	outline: none !important;
	border-color: rgba(255, 11, 139, 0.55) !important;
	background: rgba(10, 8, 18, 0.9) !important;
	box-shadow:
		0 0 0 3px rgba(141, 56, 255, 0.2),
		0 0 20px rgba(255, 11, 139, 0.18),
		inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html body[data-template="login"] .inputGroup--joined > .input,
html body[data-template="login"] .inputGroup--joined .input.js-password {
	padding-right: 2.75rem !important;
	border-top-right-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

html body[data-template="login"] a[href*="lost-password"],
html body[data-template="login"] .formRow-explain a {
	color: #c084fc !important;
	font-size: 0.84rem !important;
	text-decoration: none !important;
	transition: color 0.18s ease !important;
}

html body[data-template="login"] a[href*="lost-password"]:hover,
html body[data-template="login"] .formRow-explain a:hover {
	color: #00d7ff !important;
	text-decoration: underline !important;
}

html body[data-template="login"] .formRow .iconic-label {
	color: rgba(225, 222, 240, 0.88) !important;
	font-size: 0.88rem !important;
}

html body[data-template="login"] .iconic.iconic--checkbox > i {
	color: #8d38ff !important;
}

/* ─── Premium CTA ───────────────────────────────────────────────────────── */
html body[data-template="login"] .button--primary,
html body[data-template="login"] .formSubmitRow .button--primary,
html body[data-template="login"] .button.button--primary,
html body[data-template="login"] .button.button--icon--login,
html body[data-template="login"] .button.button--primary.button--icon--login,
html body[data-template="login"] .button.button--primary.button--icon.button--icon--login,
html body.template-login .button--primary,
html body.template-login .button.button--primary.button--icon--login {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 3.15rem !important;
	margin-top: 0.25rem !important;
	padding: 0.85rem 1.2rem !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-family: Rajdhani, Inter, "Segoe UI", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	color: #fff !important;
	background: linear-gradient(135deg, #ff0b8b 0%, #c026d3 42%, #8d38ff 100%) !important;
	background-image: linear-gradient(135deg, #ff0b8b 0%, #c026d3 42%, #8d38ff 100%) !important;
	background-size: 160% 160% !important;
	background-position: 0% 50% !important;
	box-shadow:
		0 8px 28px rgba(255, 11, 139, 0.38),
		0 0 24px rgba(141, 56, 255, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
	transition:
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s ease,
		filter 0.22s ease,
		background-position 0.35s ease !important;
}

html body[data-template="login"] .button--primary:hover,
html body[data-template="login"] .button.button--primary.button--icon--login:hover,
html body.template-login .button--primary:hover {
	transform: translateY(-2px) !important;
	filter: brightness(1.08) saturate(1.05) !important;
	background-position: 100% 50% !important;
	box-shadow:
		0 14px 36px rgba(255, 11, 139, 0.48),
		0 0 36px rgba(141, 56, 255, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

html body[data-template="login"] .button--primary:active,
html body[data-template="login"] .button.button--primary.button--icon--login:active,
html body.template-login .button--primary:active {
	transform: translateY(0) scale(0.985) !important;
	filter: brightness(1.12) !important;
	box-shadow:
		0 0 0 3px rgba(255, 11, 139, 0.35),
		0 0 40px rgba(255, 11, 139, 0.55),
		0 0 28px rgba(141, 56, 255, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

html body[data-template="login"] .button--primary .button-text,
html body.template-login .button--primary .button-text {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

html body[data-template="login"] .button--primary::before,
html body[data-template="login"] .button--icon--login::before,
html body[data-template="login"] .button--primary .fa--xf,
html body[data-template="login"] .button--primary i {
	position: static !important;
	top: auto !important;
	transform: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
	height: 1em !important;
	width: 1em !important;
}

html body[data-template="login"] .button.button--icon--login > .button-text,
html body[data-template="login"] .button--primary.button--icon > .button-text {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* ─── Register row (keep tidy under card) ───────────────────────────────── */
html body[data-template="login"] .block-outer.block-outer--after,
html body.template-login .block-outer.block-outer--after {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 1rem 0 0 !important;
	padding: 0.9rem 1rem !important;
	background: rgba(14, 12, 22, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	box-sizing: border-box !important;
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html body[data-template="login"] .p-title-value,
	html body[data-template="login"] .p-body-header .p-title::after {
		animation: none !important;
	}

	html body[data-template="login"] .button--primary {
		transition: none !important;
	}
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	html body[data-template="login"] .p-pageWrapper::after,
	html body.template-login .p-pageWrapper::after {
		background-image: url(/forum/styles/g6m/gta6modding-forum-bg-mobile.webp?v=bg175) !important;
		opacity: 0.65 !important;
		filter: blur(2px) !important;
	}

	html body[data-template="login"] .p-body-inner,
	html body.template-login .p-body-inner {
		max-width: 100% !important;
		margin: 2.25rem auto 2.75rem !important;
		padding: 0 0.95rem !important;
	}

	html body[data-template="login"] .p-body-header {
		margin-bottom: 1.35rem !important;
	}

	html body[data-template="login"] .p-title-value,
	html body.template-login .p-title-value {
		font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important;
		letter-spacing: 0.16em !important;
		text-indent: 0.16em !important;
	}

	html body[data-template="login"] .block-body {
		padding: 1.25rem 1.2rem 1.35rem !important;
	}
}

@media (max-width: 420px) {
	html body[data-template="login"] .p-body-inner {
		margin-top: 1.75rem !important;
		padding: 0 0.75rem !important;
	}

	html body[data-template="login"] .p-title-value {
		letter-spacing: 0.12em !important;
		text-indent: 0.12em !important;
	}

	html body[data-template="login"] .block-container {
		border-radius: 16px !important;
	}
}

/* ─── Raise & widen the login column ────────────────────────────────────── */
html body[data-template="login"] .p-body .p-body-inner,
html body[data-template="login"] .p-pageWrapper .p-body-inner,
html body[data-template="login"] .p-body-inner,
html body.template-login .p-body .p-body-inner,
html body.template-login .p-pageWrapper .p-body-inner,
html body.template-login .p-body-inner,
html body[data-template="login_password"] .p-body-inner,
html body.template-login_password .p-body-inner {
	max-width: 560px !important;
	width: 100% !important;
	margin: 1.35rem auto 2.5rem !important;
	padding: 0 1.1rem !important;
}

html body[data-template="login"] .p-body-pageContent,
html body.template-login .p-body-pageContent,
html body.template-login_view .p-body-pageContent {
	max-width: 560px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* Tighter title → form gap */
html body[data-template="login"] .p-body-header,
html body.template-login .p-body-header,
html body[data-template="login_password"] .p-body-header {
	margin: 0 auto 0.75rem !important;
	padding: 0.15rem 0 0 !important;
}

html body[data-template="login"] .p-body-header .p-title::after,
html body.template-login .p-body-header .p-title::after {
	margin: 0.65rem auto 0 !important;
}

/* ─── Card: no clipping, full width inside column ───────────────────────── */
html body[data-template="login"] .block,
html body.template-login .block {
	width: 100% !important;
	max-width: 100% !important;
}

html body[data-template="login"] .block--login .block-container,
html body[data-template="login"] .block-container,
html body.template-login .block-container,
html body[data-template="login_password"] .block-container {
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* Kill stray specular / empty chrome that reads as a grey chip */
html body[data-template="login"] .block-container::before,
html body.template-login .block-container::before,
html body[data-template="login"] .block-container::after,
html body.template-login .block-container::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body[data-template="login"] .block-body,
html body.template-login .block-body {
	padding: 1.35rem 1.5rem 1.15rem !important;
	overflow: visible !important;
}

/* ─── Stack labels above fields (kills left grey dt column) ─────────────── */
html body[data-template="login"] .formRow,
html body.template-login .formRow,
html body[data-template="login"] dl.formRow,
html body.template-login dl.formRow {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0.4rem !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
	float: none !important;
	clear: both !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body[data-template="login"] .formRow > dt,
html body[data-template="login"] .formRow > dd,
html body.template-login .formRow > dt,
html body.template-login .formRow > dd {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

/* Hide empty label cells (remember row + submit row) — the grey blocks */
html body[data-template="login"] .formRow > dt:empty,
html body[data-template="login"] .formSubmitRow > dt,
html body[data-template="login"] .formRow > dt:has(.formRow-labelWrapper:empty),
html body[data-template="login"] .formRow > dt:has(.formRow-labelWrapper:not(:has(*))),
html body.template-login .formRow > dt:empty,
html body.template-login .formSubmitRow > dt,
html body.template-login .formRow > dt:has(.formRow-labelWrapper:empty) {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

html body[data-template="login"] .formRow-labelWrapper,
html body.template-login .formRow-labelWrapper {
	display: block !important;
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

html body[data-template="login"] .formRow-label,
html body.template-login .formRow-label {
	display: block !important;
	width: 100% !important;
	color: rgba(230, 226, 245, 0.92) !important;
	font-size: 0.86rem !important;
	font-weight: 600 !important;
	background: transparent !important;
}

/* Submit row — full-width CTA, no side label gutter */
html body[data-template="login"] .formSubmitRow,
html body.template-login .formSubmitRow {
	margin-top: 0.35rem !important;
	margin-bottom: 0 !important;
}

html body[data-template="login"] .formSubmitRow-main,
html body[data-template="login"] .formSubmitRow-controls,
html body.template-login .formSubmitRow-main,
html body.template-login .formSubmitRow-controls {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: stretch !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body[data-template="login"] .formSubmitRow-bar,
html body.template-login .formSubmitRow-bar {
	display: none !important;
}

/* ─── Turnstile / captcha — no crop, wrap cleanly ───────────────────────── */
html body[data-template="login"] .formRow[context="xf_login"],
html body[data-template="login"] .formRow:has([data-xf-init="turnstile"]),
html body[data-template="login"] .formRow:has(.cf-turnstile),
html body.template-login .formRow:has([data-xf-init="turnstile"]) {
	overflow: visible !important;
}

html body[data-template="login"] [data-xf-init="turnstile"],
html body[data-template="login"] .cf-turnstile,
html body[data-template="login"] iframe[src*="turnstile"],
html body[data-template="login"] iframe[src*="challenges.cloudflare"],
html body.template-login [data-xf-init="turnstile"] {
	max-width: 100% !important;
	width: 100% !important;
	overflow: visible !important;
	transform: none !important;
}

html body[data-template="login"] .formRow:has([data-xf-init="turnstile"]) > dd,
html body[data-template="login"] .formRow[context="xf_login"] > dd {
	overflow: visible !important;
	min-width: 0 !important;
	width: 100% !important;
}

/* reCAPTCHA status chip if present */
html body[data-template="login"] .g6m-recaptcha3-status,
html body.template-login .g6m-recaptcha3-status {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	flex-wrap: wrap !important;
}

/* Passkey / external login row */
html body[data-template="login"] .formRow--button,
html body.template-login .formRow--button {
	margin-top: 0.75rem !important;
}

html body[data-template="login"] .listHeap,
html body.template-login .listHeap {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Register strip stays under the wider card */
html body[data-template="login"] .block-outer.block-outer--after,
html body.template-login .block-outer.block-outer--after {
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 0.85rem !important;
}

@media (max-width: 700px) {
	html body[data-template="login"] .p-body-inner,
	html body.template-login .p-body-inner {
		max-width: 100% !important;
		margin: 1rem auto 2rem !important;
		padding: 0 0.85rem !important;
	}

	html body[data-template="login"] .p-body-header {
		margin-bottom: 0.55rem !important;
	}

	html body[data-template="login"] .block-body {
		padding: 1.15rem 1.1rem 1rem !important;
	}
}


/* V177 hard overrides — visible premium login no matter cascade */
html body[data-template="login"] .p-body-inner,
html body.template-login .p-body-inner,
html body[data-template="login"] .p-body .p-body-inner,
html body[data-template="login"] .p-pageWrapper .p-body-inner {
	max-width: 580px !important;
	width: 100% !important;
	margin: 1.1rem auto 2.25rem !important;
	padding: 0 1.1rem !important;
}

html body[data-template="login"] .p-body-pageContent,
html body.template-login .p-body-pageContent {
	max-width: 580px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

html body[data-template="login"] .p-body-header,
html body.template-login .p-body-header {
	margin: 0 auto 0.55rem !important;
	padding: 0.1rem 0 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* Kill EVERY decorative pseudo on login header (rainbow smear) */
html body[data-template="login"] .p-body-header::before,
html body[data-template="login"] .p-body-header::after,
html body[data-template="login"] .p-pageWrapper > .p-body-header::before,
html body[data-template="login"] .uix_pageWrapper--fixed > .p-body-header::before,
html body.template-login .p-body-header::before,
html body.template-login .p-body-header::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

html body[data-template="login"] .p-title,
html body.template-login .p-title,
html body[data-template="login"] .p-body-header .p-title {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	gap: 0 !important;
	transform: none !important;
}

html body[data-template="login"] .p-title-value,
html body.template-login .p-title-value,
html body[data-template="login"] h1.p-title-value,
html body[data-template="login"] .p-body-header .p-title-value,
html body[data-template="login"] .p-body-header h1.p-title-value {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0.1rem 0.5rem !important;
	font-family: Rajdhani, Orbitron, "Segoe UI", sans-serif !important;
	font-size: clamp(2.4rem, 5.5vw, 3.4rem) !important;
	font-weight: 800 !important;
	letter-spacing: 0.22em !important;
	text-indent: 0.22em !important;
	line-height: 1.08 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	background-image: linear-gradient(105deg, #8d38ff 0%, #c44dff 32%, #ff4db8 68%, #ff0b8b 100%) !important;
	background-color: transparent !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	text-shadow: none !important;
	filter: drop-shadow(0 0 18px rgba(196, 77, 255, 0.42)) !important;
	animation: g6mLoginTitlePulse 4.5s ease-in-out infinite !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

/* Underline ONLY via .p-title::after — never on header */
html body[data-template="login"] .p-body-header .p-title::after,
html body.template-login .p-body-header .p-title::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	order: 2 !important;
	width: 5.5rem !important;
	height: 2px !important;
	margin: 0.7rem auto 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, transparent, #ff0b8b, #8d38ff, #00d7ff, transparent) !important;
	box-shadow: 0 0 14px rgba(255, 11, 139, 0.45) !important;
	animation: g6mLoginLinePulse 4.5s ease-in-out infinite !important;
}


/* END G6M_LOGIN_FINAL_V177 */