@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

*,*::before,*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--red: #02647E !important;
	--red-dark: #007695;
	--red-light: #3D9FC4;
	--red-soft: rgba(2, 100, 126, 0.08);
	--ink: rgb(15, 29, 39);
	--slate: #13131E;
	--card: #16161F;
	--mid: #2A2A3C;
	--border: rgba(20, 20, 30, 0.125);
	--border-lit: rgba(20, 20, 30, 0.125);
	--muted: rgba(255, 255, 255, 0.5);
	--dark-muted: rgba(20, 20, 30, 0.5);
	--sub: rgba(255, 255, 255, 0.55);
	--white: #FFFFFF;
	--offwhite: #F4F4F4;
	--gold: #C9A227;
	--gold-soft: rgba(201, 162, 39, 0.15);
	--danger: #D53347;
	--danger-h: #BA2436;
	--green: #22c55e;
	--font: "Plus Jakarta Sans", 'Segoe UI', sans-serif;
	--serif: 'Plus Jakarta Sans', serif;
	
	--login-form-width: 450px;
	--login-bg-width: 400px;
}

html,
body {
	width: 100%;
	height: 100%;
	font-family: var(--font) !important;
	background: var(--ink);
	color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font) !important;
}

.invalid-feedback {
	color: var(--danger) !important;
}

/* ── LAYOUT ── */
.layout, .layout2 {
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
}
.layout {
	grid-template-columns: var(--login-bg-width) 1fr var(--login-bg-width);
}
.layout2 {
	grid-template-columns: 1fr var(--login-bg-width);
}

/* ── LEFT PANEL ── */
.left {
/*
	position: relative;
	flex: 1 1 320px;
	box-sizing: border-box;
	padding: 56px 40px;
	background: var(--ink);
	color: rgb(255, 255, 255);
	display: flex;
	flex-direction: column;
	gap: 36px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
*/
	
	flex: 1 1 320px;
	box-sizing: border-box;
	padding: 1.875rem 2.5rem 2.5rem;
	background: rgb(15, 29, 39);
	color: rgb(255, 255, 255);
	display: flex;
	flex-direction: column;
	gap: 32px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

/* Animated grid background */
.grid-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
	background-size: 56px 56px;
	animation: gridPulse 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes gridPulse {
	0%,
	100% {
		opacity: 0.6;
	}

	50% {
		opacity: 1;
	}
}

/* Red glow orb */
.orb {
	z-index: 1;
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

.orb-1 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(2, 100, 126, 0.22) 0%, transparent 70%);
	top: -100px;
	left: -80px;
	animation: orbFloat1 12s ease-in-out infinite;
}

.orb-2 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 70%);
	bottom: 0;
	right: 100px;
	animation: orbFloat2 15s ease-in-out infinite;
}

.orb-3 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(2, 100, 126, 0.12) 0%, transparent 70%);
	bottom: 200px;
	left: 200px;
	animation: orbFloat3 10s ease-in-out infinite;
}

@keyframes orbFloat1 {

	0%,
	100% {
		transform: translate(0, 0);
	}

	33% {
		transform: translate(60px, 40px);
	}

	66% {
		transform: translate(-30px, 70px);
	}
}

@keyframes orbFloat2 {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-50px, -60px);
	}
}

@keyframes orbFloat3 {

	0%,
	100% {
		transform: translate(0, 0);
	}

	40% {
		transform: translate(40px, -30px);
	}

	80% {
		transform: translate(-20px, 40px);
	}
}

/* Top nav */
.left-top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	animation: fadeDown 0.6s 0.1s both;
}

@keyframes fadeDown {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.logo {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--white);
	text-decoration: none;
}

.logo span {
	color: var(--red);
}

.logo-badge {
	display: inline-block;
	margin-left: 10px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	background: var(--gold-soft);
	border: 1px solid rgba(201, 162, 39, 0.25);
	border-radius: 4px;
	padding: 3px 8px;
	vertical-align: middle;
}

.left-top-nav {
	display: flex;
	gap: 24px;
}

.left-top-nav a {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s;
}

.left-top-nav a:hover {
	color: var(--white);
}

/* Center hero text */
.left-center {
	position: relative;
	z-index: 2;
	animation: fadeUp 0.8s 0.25s both;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.left-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--red-light);
	margin-bottom: 20px;
}

.left-eyebrow::before {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.left-h1 {
	font-size: clamp(2.5rem, 2.375rem + 0.5vw, 2.75rem);
	font-weight: 800 !important;
	margin-bottom: 20px;
	margin: 24px 0 0;
	line-height: 1.08;
	letter-spacing: -0.02em !important;
	color: var(--white);
}
.left-h1 em {
	font-style: normal;
	font-family: var(--serif) !important;
	font-weight: 800 !important;
	color: var(--red-light);
	letter-spacing: -1px;
}
.left-sub, .left-lead {
	font-size: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem);
	line-height: 1.5;
  	color: rgb(169, 186, 198);
	max-width: 550px;
}
.left-lead {
	color: var(--red-light);
	margin-bottom: 0.75rem;
}

/* Floating module cards */
.module-cards {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	animation: fadeUp 0.8s 0.5s both;
}

.mod-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 10px;
	padding: 0.625rem 0.875rem;
	transition: all 0.3s;
	cursor: default;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.mod-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(2, 100, 126, 0.3);
	transform: translateY(-3px);
}

.mod-card-icon {
	font-size: 16px;
}

.mod-card-name {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: -0.1px;
}

.mod-card-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	margin-left: 4px;
	box-shadow: 0 0 6px var(--green);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.6;
		transform: scale(0.85);
	}
}

.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.pill { display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgb(44, 62, 74);
  border-radius: 999px;
  background: rgb(23, 39, 47);
  color: rgb(197, 210, 219);
  font-size: 14px;
  font-weight: 500; }
.dot { width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(91, 156, 201); flex-shrink: 0; }

/* Vertical separator line */
.divider {
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom,
			transparent 0%,
			rgba(255, 255, 255, 0.08) 20%,
			rgba(255, 255, 255, 0.08) 80%,
			transparent 100%);
	position: absolute;
	z-index: 11;
	top: 0;
	right: 0;
	pointer-events: none;
}

/* ── RIGHT PANEL ── */
.right {
	background: var(--white);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: center;
	padding: 2.5rem 4rem;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
}

/* Subtle noise texture */
.right::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
	opacity: 0.4;
	pointer-events: none;
}

/* Top right gradient */
.right::after {
	content: '';
	position: absolute;
	top: -200px;
	right: -100px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(2, 100, 126, 0.07) 0%, transparent 70%);
	pointer-events: none;
}

.form-wrap {
	width: 100%;
	max-width: 600px;
	position: relative;
	z-index: 2;
	animation: formIn 0.7s 0.3s both;
}

@keyframes formIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Form header */
.form-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-end: 28px;
}

.form-title {
	font-size: clamp(2rem, 1.25rem + 2vw, 2.75rem);
	font-weight: 800 !important;
	letter-spacing: -0.03em;
	color: #111827;
	line-height: 1.1;
	font-family: var(--font) !important;
}

.form-title em {
	font-style: normal;
	font-family: var(--font) !important;
	font-weight: 500;
	color: #6b7280;
}

.form-sub {
	margin: 0;
	font-size: 17px;
	color: #4b5563;
	font-weight: 400;
}

.form-sub a {
	color: rgba(2, 100, 126, 0.9);
	text-decoration: none;
	font-weight: 600;
}

/* SSO buttons */
.sso-row {
	display: grid;
	/*grid-template-columns: 1fr 1fr;*/
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0.75rem;
	margin-bottom: 20px;
}
.sso-row:empty {
	display: none;
}

.sso-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 60px;
	padding: 0 16px;
	background: #f6f7f8;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	cursor: pointer;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 600;
	color: #111827;
	transition: all 0.2s;
}
.sso-btn span {
	display: flex;
}
#login-form .sso-row .sso-btn span,
#login-form .sso-row .sso-btn span img {
	width: 24px !important;
	height: 24px !important;
	max-width: none !important;
	max-height: none !important;
}
.sso-btn:hover {
	background: rgba(20, 20, 30, 0.08);
	border-color: rgba(20, 20, 30, 0.25);
	color: var(--slate) !important;
}

.sso-icon {
	font-size: 16px;
}

/* Divider */
.or-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.or-line {
	flex: 1;
	height: 1px;
	background: var(--border);
}

.or-line {
	background: #e5e7eb;
}

.or-text {
	font-size: 12px;
	font-weight: 650 !important;
	color: #6b7280;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Fields */
.field {
	margin-bottom: 20px;
}

.field-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 10px;
}

.field-label span {
	font-size: 16px;
	font-weight: 500;
	color: #4b5563;
}

.field-label a {
	font-size: 15px;
	color: rgba(2, 100, 126, 0.8);
	text-decoration: none;
	transition: color 0.2s;
	font-weight: 600;
}

.input-wrap {
	position: relative;
}
.input-wrap input {
	width: 100%;
	height: 60px;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 0 20px;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	color: #111827;
	outline: none;
	transition: all 0.2s;
	-webkit-appearance: none;
}
.input-wrap input::placeholder {
	color: #6b7280;
}
.input-wrap input[type="password"],
.input-wrap input#password {
	padding-right: 96px;
}
.input-wrap input:focus {
	border-color: rgba(2, 100, 126, 0.6);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(2, 100, 126, 0.12);
}
.input-wrap input:focus + .input-icon {
	color: rgba(20, 20, 30, 0.5);
}

.input-wrap input.is-invalid {
	border: 1px solid var(--danger);
}
.input-wrap input.is-invalid::placeholder {
	opacity: 0.25;
	color: var(--danger);
}
.input-wrap input.is-invalid:focus {
	border-color: rgba(213, 51, 71, 0.6);
	background: rgba(213, 51, 71, 0.06);
	box-shadow: 0 0 0 3px rgba(213, 51, 71, 0.12);
}

.input-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.2);
	font-size: 15px;
	pointer-events: none;
	transition: color 0.2s;
}
.toggle-pw {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	height: 44px;
	color: #4b5563;
	font-size: 15px !important;
	cursor: pointer;
	background: none;
	border: none;
	border-radius: 8px;
	font-family: var(--font);
	font-weight: 600;
	transition: color 0.2s, background 0.2s;
	padding: 0 16px;
}
.toggle-pw:hover {
	color: #111827;
	background: #f3f4f6;
}

/* Autocomplete indicator */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
	box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
	-webkit-text-fill-color: var(--slate) !important;
	background: rgba(255, 255, 255, 0.04) !important;
	font-family: var(--font) !important;
	border: 1px solid #d7d7d9 !important;
  	outline: none !important;
}

/* Remember row */
.remember-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.remember-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.remember-label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--red);
}

.remember-text {
	font-size: 16px;
	color: #4b5563;
	font-weight: 400;
}

/* Sign in button */
.signin-btn {
	width: 100%;
	height: 64px;
	padding: 0 24px;
	background: var(--red);
	border: none;
	border-radius: 10px;
	font-family: var(--font);
	font-size: 18px !important;
	font-weight: 700;
	color: var(--white);
	cursor: pointer;
	letter-spacing: -0.2px;
	transition: all 0.2s;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block-end: 28px;
}

.signin-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
	pointer-events: none;
}

.signin-btn:hover {
	background: var(--red-dark);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(2, 100, 126, 0.35);
}

.signin-btn:active {
	transform: translateY(0);
}

.signin-btn .btn-arrow {
	transition: transform 0.2s;
}

/* Arrow icon (links + sign in button) */
.arrow-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.28em;
	flex-shrink: 0;
}

.signin-btn:hover .btn-arrow {
	transform: translateX(4px);
}

/* Loading state */
.signin-btn.loading .btn-text {
	opacity: 0;
}

.signin-btn.loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.3);
	border-top-color: var(--white);
	animation: spin 0.7s linear infinite;
}

.signin-btn[disabled]:hover, .signin-btn[disabled]:hover {
    border: 2px solid rgba(0, 0, 0, 0.3);
    background-color: rgba(20, 20, 30, 0.3) !important;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Signup link */
.signup-prompt {
	margin: 0;
	text-align: center;
	font-size: 16px;
	color: #4b5563;
	font-weight: 400;
}

.signup-prompt a {
	color: rgba(2, 100, 126, 0.85);
	text-decoration: none;
	font-weight: 600;
}

.form-sub a:hover,
.field-label a:hover,
.signup-prompt a:hover {
	color: var(--red-light) !important;
}

/* Right bottom */
.right-bottom {
	text-align: center;
	font-size: 0.75rem;
	color: rgba(20, 20, 30, 0.35);
	font-weight: 500;
	width: 100%;
    padding-block-start: 1rem;
}
.right-bottom a {
	color: rgba(20, 20, 30, 0.5);
	text-decoration: none;
}
.right-bottom a:hover {
	color: rgba(2, 100, 126, 0.75) !important;
}
.right-bottom-copy {
	padding-block-start: 0.375rem;
}

/* Error shake */
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-6px);
	}

	40% {
		transform: translateX(6px);
	}

	60% {
		transform: translateX(-4px);
	}

	80% {
		transform: translateX(4px);
	}
}

.field.error input {
	border-color: rgba(239, 68, 68, 0.7);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.field.error {
	animation: shake 0.4s ease;
}

.field-error-msg {
	font-size: 11px;
	color: #f87171;
	font-weight: 500;
	margin-top: 6px;
	display: none;
}

.field.error .field-error-msg {
	display: block;
}

/* Success state */
.signin-btn.success {
	background: #16a34a;
}

.signin-btn.success::after {
	content: '✔';
	border: none;
	animation: none;
	font-size: 18px;
}

.layout .right .form-wrap .mobile-nav-logo {
	display: none;
}

.grecaptcha-badge {
	z-index: 10;
}

.loginBg {
	background-color: rgb(217, 225, 230);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* WorkSpace */
.user-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 100px;
	padding: 0.375rem;
	padding-inline-end: 0.75rem;
	cursor: pointer;
	transition: background 0.2s;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.user-pill:hover {
	background: rgba(255, 255, 255, 0.09);
}
.user-avatar {
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--red), var(--red-light));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	font-weight: 600;
	color: white;
	flex-shrink: 0;
}
.user-name {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	white-space: nowrap;
	max-width: 9.375rem;
}

.login-workspace {
	flex: 1;
	z-index: 4;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 700px;
	margin: 0 auto;
	margin-block-start: 1.5rem;
	width: 100%;
	animation: fadeUp 0.8s 0.25s both;
}
.login-workspace .left-h1 {
	font-size: clamp(40px, 4.5vw, 56px);
}
.login-workspace .left-sub {
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
	line-height: 1.75;
	max-width: 420px;
}
.login-workspace .left-center {
	position: relative;
	z-index: 2;
	margin-block-end: 1.875rem;
}

.email-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(2, 100, 126, 0.1);
	border: 0.5px solid rgba(2, 100, 126, 0.5);
	border-radius: 100px;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	color: var(--red-light);
	margin-block-end: 2rem;
	font-family: var(--font);
}
.email-badge svg {
	width: 1rem;
	height: 1rem;
	display: inline-flex;
}

.ws-label {
	font-size: 0.75rem;
	color: var(--sub);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-block-end: 0.75rem;
	font-family: var(--font);
}
.workspaces {
	display: grid;
	gap: 0.75rem;
	width: 100%;
	margin-block-end: 1.5rem;
	overflow-y: auto;
	scrollbar-width: none;
	padding-block: 0.25rem;
	max-height: 268px;
	grid-template-columns: repeat(2, minmax(0, 1fr))
}
.workspaces > .ws-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.ws-card {
	display: flex;
	align-items: center;
	color: var(--white);
	min-height: 5rem;
	max-height: 5rem;
	padding: 0.875rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1.5px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.875rem;
	cursor: pointer;
	transition: all 0.22s ease;
	position: relative;
	overflow: hidden;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	text-decoration: none;
}
.ws-card:hover {
	background: rgba(2, 100, 126, 0.1);
	border-color: rgba(2, 100, 126, 0.25);
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	text-decoration: none;
}
.ws-card.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	text-decoration: none;
}
.ws-card-wrap {
	width: 100%;
	gap: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ws-icon {
	width: 3rem;
	height: 3rem;
	padding: 0.125rem;
	border-radius: 0.75rem;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 400;
	position: relative;
	background-color: var(--muted);
}
/* Two-letter fallback initials (e.g. "NH" for Network Handlers), matching
   the same bold/uppercase treatment as the profile-dropdown's .initials-avatar
   — kept as its own rule instead of reusing that class directly since this
   page doesn't load main.css/portal.css (where .initials-avatar's colors are
   defined), and those light-theme colors wouldn't fit this page's dark cards. */
.ws-icon-initials {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
/* Same shimmer placeholder as .avatar-skeleton in main.css/portal.css (used
   while the logo <img> is loading, before onload/onerror swaps it out) —
   redefined here since this page doesn't load either of those files. */
@keyframes wsAvatarSkeletonGlow {
	0% { background-position: -150% 0; }
	100% { background-position: 150% 0; }
}
.ws-icon .avatar-skeleton {
	position: absolute;
	inset: 0.125rem;
	border-radius: inherit;
	background: linear-gradient(90deg, #e2e5ea 0%, #f2f4f7 50%, #e2e5ea 100%);
	background-size: 250% 100%;
	animation: wsAvatarSkeletonGlow 1.4s ease-in-out infinite;
}
.ws-icon.teal {
	background: linear-gradient(135deg, var(--white), var(--offwhite));
}
.ws-icon.purple {
	background: linear-gradient(135deg, var(--purple), var(--purple-light));
}
.ws-icon img {
	width: calc(3rem - 0.25rem);
	height: calc(3rem - 0.25rem);
	aspect-ratio: 1;
	border-radius: 0.5rem;
}

.ws-icon-inner {
	display: grid;
	grid-template-columns: repeat(3, 6px);
	gap: 2.5px;
}

.dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

.d-w {
	background: rgba(255, 255, 255, 0.9);
}

.d-f {
	background: rgba(255, 255, 255, 0.25);
}

.ws-info {
	flex: 1;
}

.ws-name {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 0;
}

.ws-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 0.25rem;
}

.ws-dot {
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
}
.ws-arrow {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	flex-shrink: 0;
	margin-left: auto;
}
.ws-card:hover .ws-arrow {
	background: rgba(255, 255, 255, 0.125);
	border-color: rgba(255, 255, 255, 0.25);
}

.ws-card.purple:hover .ws-arrow {
	background: rgba(127, 119, 221, 0.15);
	border-color: rgba(127, 119, 221, 0.4);
}

.ws-arrow svg {
	width: 0.875rem;
	height: 0.875rem;
	aspect-ratio: 1;
}

.footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.switch-link {
	font-size: 0.813rem;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: color 0.2s;
	background: none;
	border: none;
	font-family: var(--font);
	font-weight: 500;
	text-decoration: none;
}
.switch-link:hover {
	color: rgba(2, 100, 126, 1);
}

.status-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.2);
	font-family: var(--font);
}

.status-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--red);
	animation: pulse 2.5s ease infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

.active-tag {
	font-size: 10px;
	padding: 2px 8px;
	background: rgba(29, 158, 117, 0.12);
	color: #5DCAA5;
	border-radius: 100px;
	border: 0.5px solid rgba(29, 158, 117, 0.2);
	font-family: var(--font);
}

@media (max-width: 767.98px) {
	html, body {
		overflow-y: auto;
		overflow-x: hidden;
	}
	.layout {
		display: flex;
		flex-direction: column;
		height: auto;
	}
	.layout .left {
		width: 100%;
		padding-block: 2.5rem;
		padding-inline: 1.25rem;
		order: 3;
		overflow: visible;
	}
	.left-top,
	.left-top-nav{display:none}
	.module-cards{gap:0.5rem;margin-top:1.875rem}
	.module-cards .mod-card {
		padding: 0.5rem 0.625rem; gap: 0.5rem;
	}
	
	.loginBg {
		order: 1;
	}
	
	.layout .right {
		order: 2;
		padding: 1.25rem;
		padding-block-end: 2.5rem;
	}
	.layout .right .form-wrap .mobile-nav-logo {
		display: block;
	}
	.layout .left .nav-logo {
		display: none;
	}
	.right-bottom {
		bottom: auto;
		position: relative;
		margin-block-start: 1rem;
	}
	.divider {
		display: none;
	}
	.layout .left::before {
		top: 0;
		left: 0;
		content: "";
		width: 100%;
		height: 1px;
		position: absolute;
		background: linear-gradient(to right,
				transparent 0%,
				rgba(255, 255, 255, 0.08) 20%,
				rgba(255, 255, 255, 0.08) 80%,
				transparent 100%);
		position: absolute;
		z-index: 2;
	}
	.h100vh {
		min-height: 150px;
		max-height: 150px;
		background-size: cover !important;
    	background-position: center 25% !important;
	}
	
	.workspaces {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.workspaces > .ws-card:last-child:nth-child(odd) {
		grid-column: auto;
	}
	
	.layout2 {
		display: flex;
		flex-direction: column;
		height: auto;
	}
	.layout2 .loginBg {
		order: 1;
		min-height: 150px;
		max-height: 150px;
		background-size: cover !important;
		background-position: center 25% !important;
	}
	.layout2 .left {
		width: 100%;
		padding-block: 1.5rem;
		padding-inline: 1.25rem;
		order: 2;
	}
}

@media screen and (min-width: 768px) and (max-width: 1399.98px) {
	.layout {
		grid-template-columns: clamp(280px, 38vw, 400px) minmax(0, 1fr);
	}
	.loginBg {
		display: none;
	}
}