:host {
	top: 50%;
	left: 50%;
	width: 394px;
	height: 366px;
	font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#WinLogin {
	position: absolute;
	width: 394px;
	height: 366px;
	color: #203b5b;
}

#WinLogin .login-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 22px;
	border: 1px solid rgba(104, 177, 236, 0.58);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(229, 244, 255, 0.9)),
		rgba(244, 250, 255, 0.92);
	box-shadow: 0 18px 48px rgba(28, 78, 132, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
}

#WinLogin .login-copy {
	padding-right: 38px;
	margin-bottom: 16px;
}

#WinLogin .login-kicker {
	color: #2b83ca;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

#WinLogin .login-title {
	margin-top: 2px;
	color: #1f4568;
	font-size: 30px;
	font-weight: 950;
	line-height: 1;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

#WinLogin .server-title {
	position: static;
	width: auto;
	height: auto;
	margin-top: 7px;
	color: #5a7893;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.2;
	text-align: left;
	text-shadow: none;
}

#WinLogin .login-form {
	display: grid;
	gap: 10px;
}

#WinLogin .field-row {
	display: grid;
	gap: 5px;
	color: #476986;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

#WinLogin input {
	box-sizing: border-box;
	position: static;
	width: 100%;
	height: 39px;
	padding: 0 13px;
	border: 1px solid rgba(92, 160, 225, 0.42);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
	color: #183a59;
	font-size: 14px;
	font-weight: 800;
	outline: none;
	text-align: left;
}

#WinLogin input:focus {
	border-color: rgba(47, 141, 226, 0.92);
	box-shadow: 0 0 0 3px rgba(74, 159, 238, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#WinLogin .save {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	height: 22px;
	padding: 0;
	border: 0;
	background: none !important;
	color: #4e6f8c;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

#WinLogin .save-check {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1px solid rgba(81, 151, 218, 0.55);
	background: rgba(255, 255, 255, 0.76);
}

#WinLogin .save.is-on .save-check::before {
	width: 8px;
	height: 4px;
	border-left: 2px solid #1d83d0;
	border-bottom: 2px solid #1d83d0;
	content: "";
	transform: rotate(-45deg);
}

#WinLogin .btn,
#WinLogin .social-login {
	box-sizing: border-box;
	border-radius: 11px;
	font-family: inherit;
	font-weight: 900;
	cursor: pointer;
	transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

#WinLogin .btn.connect {
	position: static;
	width: 100%;
	height: 42px;
	border: 1px solid rgba(50, 129, 205, 0.6);
	background: linear-gradient(180deg, #83c8ff, #4d94e7) !important;
	color: #ffffff;
	font-size: 16px;
	text-shadow: 0 1px 3px rgba(25, 73, 130, 0.36);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 17px rgba(62, 132, 211, 0.22);
}

#WinLogin .social-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

#WinLogin .social-login {
	height: 34px;
	border: 1px solid rgba(89, 154, 216, 0.38);
	background: rgba(255, 255, 255, 0.76);
	color: #2c587b;
	font-size: 12px;
}

#WinLogin .social-login.google {
	color: #265b9a;
}

#WinLogin .social-login.facebook {
	color: #2750a5;
}

#WinLogin .social-login.guest {
	color: #27745e;
}

#WinLogin .btn.signup {
	position: static;
	width: 100%;
	height: 34px;
	border: 1px solid rgba(89, 154, 216, 0.38);
	background: linear-gradient(180deg, #ffffff, #e4f2ff) !important;
	color: #286da6;
	font-size: 12px;
}

#WinLogin .btn.exit {
	position: absolute;
	top: 13px;
	right: 13px;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(89, 154, 216, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.68) !important;
	color: #2b5e85;
	font-size: 18px;
	line-height: 26px;
}

#WinLogin .btn:hover,
#WinLogin .social-login:hover,
#WinLogin .save:hover {
	filter: brightness(1.04);
	transform: translateY(-1px);
}

#WinLogin .btn:active,
#WinLogin .social-login:active,
#WinLogin .save:active {
	transform: translateY(1px);
}

#WinLogin input:-webkit-autofill,
#WinLogin input:-webkit-autofill:hover,
#WinLogin input:-webkit-autofill:focus,
#WinLogin input:-webkit-autofill:active,
#WinLogin input:-internal-autofill-selected,
#WinLogin input:-internal-autofill-previewed {
	-webkit-background-clip: text;
	transition: background-color 5000s ease-in-out 0s;
	box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0);
}

html.rb-mobile-client #WinLogin {
	width: min(360px, calc(var(--rb-game-w, 100vw) - 36px));
	height: 342px;
}

html.rb-mobile-client #WinLogin .login-card {
	padding: 18px;
	border-radius: 16px;
}

html.rb-mobile-client #WinLogin .login-title {
	font-size: 25px;
}

html.rb-mobile-client #WinLogin input {
	height: 36px;
}

html.rb-mobile-client #WinLogin .btn.connect {
	height: 40px;
}

/* Codex login polish: lighter glass, cleaner type, aligned account actions. */
:host {
	width: 408px !important;
	height: 358px !important;
}

#WinLogin {
	width: 408px !important;
	height: 358px !important;
}

#WinLogin .login-card {
	padding: 21px 22px !important;
	border-radius: 16px !important;
	border-color: rgba(143, 202, 244, 0.52) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(231, 246, 255, 0.62)), rgba(240, 249, 255, 0.48) !important;
	box-shadow: 0 18px 42px rgba(28, 78, 132, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(14px) saturate(1.08) !important;
}

#WinLogin .login-kicker,
#WinLogin .field-row {
	font-weight: 700 !important;
}

#WinLogin .login-title {
	font-size: 28px !important;
	font-weight: 760 !important;
}

#WinLogin .server-title,
#WinLogin input,
#WinLogin .save {
	font-weight: 620 !important;
}

#WinLogin input {
	background: rgba(255, 255, 255, 0.5) !important;
}

#WinLogin .btn,
#WinLogin .social-login {
	font-weight: 700 !important;
}

#WinLogin .account-actions {
	display: grid !important;
	grid-template-columns: 1fr 106px !important;
	gap: 8px !important;
}

#WinLogin .social-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#WinLogin .social-login,
#WinLogin .btn.signup {
	background: rgba(255, 255, 255, 0.56) !important;
}

#WinLogin .btn.exit {
	border-color: rgba(89, 154, 216, 0.28) !important;
	background: rgba(255, 255, 255, 0.42) !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

#WinLogin .btn.exit::before,
#WinLogin .btn.exit::after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: "";
	transform-origin: center;
}

#WinLogin .btn.exit::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

#WinLogin .btn.exit::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

html.rb-mobile-client #WinLogin {
	width: min(360px, calc(var(--rb-game-w, 100vw) - 36px)) !important;
	height: 342px !important;
}

html.rb-mobile-client #WinLogin .account-actions {
	grid-template-columns: 1fr 92px !important;
}

/* Final login-only redesign: compact Ragnarok glass panel with underline fields. */
:host {
	top: 50% !important;
	left: 50% !important;
	width: 386px !important;
	height: 344px !important;
	font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

#WinLogin {
	width: 386px !important;
	height: 344px !important;
	color: #173a59 !important;
}

#WinLogin .login-card {
	padding: 20px 22px 18px !important;
	border: 1px solid rgba(132, 196, 239, 0.5) !important;
	border-radius: 18px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(225, 243, 255, 0.66)),
		rgba(240, 249, 255, 0.62) !important;
	box-shadow:
		0 16px 38px rgba(28, 86, 139, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
	backdrop-filter: blur(13px) saturate(1.08) !important;
}

#WinLogin .login-copy {
	margin-bottom: 15px !important;
	padding-right: 38px !important;
}

#WinLogin .login-kicker {
	color: #287ec5 !important;
	font-size: 10px !important;
	font-weight: 750 !important;
	letter-spacing: 0 !important;
}

#WinLogin .login-title {
	margin-top: 3px !important;
	color: #173f63 !important;
	font-size: 28px !important;
	font-weight: 780 !important;
	letter-spacing: 0 !important;
	line-height: 1.02 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

#WinLogin .server-title {
	margin-top: 6px !important;
	color: rgba(55, 94, 126, 0.75) !important;
	font-size: 11px !important;
	font-weight: 650 !important;
}

#WinLogin .login-form {
	gap: 9px !important;
}

#WinLogin .field-row {
	position: relative !important;
	display: block !important;
	padding: 0 28px 0 26px !important;
	border-bottom: 1px solid rgba(74, 143, 204, 0.45) !important;
	color: rgba(48, 89, 123, 0.82) !important;
	font-size: 9px !important;
	font-weight: 780 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

#WinLogin .field-row:focus-within {
	border-bottom-color: rgba(40, 149, 232, 0.95) !important;
	box-shadow: 0 1px 0 rgba(91, 186, 248, 0.28) !important;
}

#WinLogin .field-row::before,
#WinLogin .field-pass::after {
	position: absolute !important;
	content: "" !important;
	pointer-events: none !important;
}

#WinLogin .field-row::before {
	left: 2px !important;
	bottom: 9px !important;
	width: 15px !important;
	height: 15px !important;
	opacity: 0.74 !important;
}

#WinLogin .field-user::before {
	border-radius: 50% 50% 45% 45% !important;
	background:
		radial-gradient(circle at 50% 32%, transparent 0 3px, #2a6f9f 3.5px 5.5px, transparent 6px),
		radial-gradient(ellipse at 50% 92%, #2a6f9f 0 7px, transparent 7.5px) !important;
}

#WinLogin .field-pass::before {
	bottom: 8px !important;
	border: 2px solid #2a6f9f !important;
	border-top-width: 6px !important;
	border-radius: 3px !important;
	background: transparent !important;
	clip-path: inset(4px 1px 0 1px) !important;
}

#WinLogin .field-pass::after {
	right: 4px !important;
	bottom: 11px !important;
	width: 17px !important;
	height: 10px !important;
	border: 1.5px solid rgba(42, 111, 159, 0.72) !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at 50% 50%, rgba(42, 111, 159, 0.8) 0 2px, transparent 2.5px) !important;
}

#WinLogin .field-row > span {
	display: block !important;
	margin-bottom: 1px !important;
}

#WinLogin input {
	position: static !important;
	width: 100% !important;
	height: 27px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #153856 !important;
	font-size: 14px !important;
	font-weight: 680 !important;
	line-height: 27px !important;
	outline: none !important;
}

#WinLogin input:focus {
	border-color: transparent !important;
	box-shadow: none !important;
}

#WinLogin .save {
	height: 20px !important;
	gap: 7px !important;
	color: rgba(50, 87, 119, 0.82) !important;
	font-size: 11px !important;
	font-weight: 690 !important;
}

#WinLogin .save-check {
	width: 15px !important;
	height: 15px !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.44) !important;
}

#WinLogin .btn.connect {
	height: 40px !important;
	border: 1px solid rgba(45, 129, 207, 0.55) !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg, #72bef7, #408fdc) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 760 !important;
	box-shadow:
		0 8px 18px rgba(48, 133, 214, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
	text-shadow: 0 1px 2px rgba(24, 72, 124, 0.34) !important;
}

#WinLogin .social-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 7px !important;
}

#WinLogin .social-login {
	height: 28px !important;
	border: 1px solid rgba(107, 166, 218, 0.32) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.42) !important;
	box-shadow: none !important;
	color: rgba(38, 82, 118, 0.84) !important;
	font-size: 11px !important;
	font-weight: 680 !important;
}

#WinLogin .social-login.google,
#WinLogin .social-login.facebook,
#WinLogin .social-login.guest {
	color: rgba(38, 82, 118, 0.84) !important;
}

#WinLogin .account-actions {
	display: flex !important;
	gap: 18px !important;
	justify-content: center !important;
	margin: -1px 0 0 !important;
}

#WinLogin .btn.signup,
#WinLogin .btn.repair {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #246fa8 !important;
	font-size: 11px !important;
	font-weight: 720 !important;
	text-decoration: none !important;
}

#WinLogin .btn.repair {
	color: rgba(38, 92, 128, 0.78) !important;
}

#WinLogin .btn.signup:hover,
#WinLogin .btn.repair:hover {
	text-decoration: underline !important;
}

#WinLogin .btn.exit {
	top: 13px !important;
	right: 13px !important;
	width: 28px !important;
	height: 28px !important;
	border: 1px solid rgba(83, 153, 216, 0.34) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.36) !important;
	box-shadow: none !important;
	color: #2f6f9e !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

#WinLogin .btn.exit::before,
#WinLogin .btn.exit::after {
	width: 12px !important;
	height: 2px !important;
}

#WinLogin .btn:hover,
#WinLogin .social-login:hover,
#WinLogin .save:hover {
	filter: brightness(1.03) !important;
	transform: translateY(-1px) !important;
}

html.rb-mobile-client #WinLogin {
	width: min(354px, calc(var(--rb-game-w, 100vw) - 36px)) !important;
	height: 332px !important;
}

html.rb-mobile-client #WinLogin .login-card {
	padding: 18px 20px 16px !important;
}

html.rb-mobile-client #WinLogin .login-title {
	font-size: 25px !important;
}

html.rb-mobile-client #WinLogin input {
	height: 25px !important;
	line-height: 25px !important;
}

/* Final translucent login pass: centered panel, clean inline icons, underline fields. */
:host {
	left: var(--login-left, 50%) !important;
	top: var(--login-top, 50%) !important;
	transform: var(--login-transform, translate(-50%, -50%)) !important;
}

#WinLogin .field-row::before,
#WinLogin .field-pass::after {
	display: none !important;
	content: none !important;
}

#WinLogin .field-row {
	padding: 0 25px 0 24px !important;
}

#WinLogin .field-row > span:not(.login-field-icon):not(.login-eye-icon):not(.brand-icon) {
	display: block !important;
	margin-bottom: 2px !important;
}

#WinLogin .login-field-icon,
#WinLogin .login-eye-icon {
	position: absolute !important;
	display: grid !important;
	place-items: center !important;
	bottom: 6px !important;
	width: 17px !important;
	height: 17px !important;
	margin: 0 !important;
	color: rgba(45, 119, 169, 0.82) !important;
	opacity: 0.9 !important;
	pointer-events: none !important;
}

#WinLogin .login-field-icon {
	left: 0 !important;
}

#WinLogin .login-eye-icon {
	right: 0 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

#WinLogin .login-field-icon svg,
#WinLogin .login-eye-icon svg {
	width: 100% !important;
	height: 100% !important;
	fill: currentColor !important;
}

#WinLogin .field-row:focus-within .login-field-icon,
#WinLogin .field-row:focus-within .login-eye-icon {
	color: #1f8ee6 !important;
	opacity: 1 !important;
}

#WinLogin .social-login {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

#WinLogin .brand-icon {
	display: inline-grid !important;
	place-items: center !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
}

#WinLogin .brand-icon svg {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
}