:root{
	--ss-navy-950:#050b1a;
	--ss-navy-900:#0a1230;
	--ss-navy-800:#101b3f;
	--ss-blue-500:#3b6cf6;
	--ss-blue-400:#6d93ff;
	--ss-cyan-400:#3ee6e0;
	--ss-text:#eef2ff;
	--ss-text-dim:#9aa7c7;
	--ss-danger:#ff6b7a;
	--ss-success:#3ee68f;
	--ss-radius:20px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body.ss-auth-body{
	margin:0;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
	color:var(--ss-text);
	background:var(--ss-navy-950);
	position:relative;
	overflow:hidden;
}

.ss-bg-gradient{
	position:fixed; inset:0; z-index:0;
	background:
		radial-gradient(circle at 15% 20%, rgba(59,108,246,.35), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(62,230,224,.18), transparent 50%),
		linear-gradient(160deg, var(--ss-navy-950) 0%, var(--ss-navy-900) 55%, #060c22 100%);
}
.ss-orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation:ss-float 12s ease-in-out infinite;}
.ss-orb-1{width:360px;height:360px; top:-80px; left:-100px; background:var(--ss-blue-500);}
.ss-orb-2{width:300px;height:300px; bottom:-100px; right:-80px; background:var(--ss-cyan-400); animation-delay:-6s;}
@keyframes ss-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }

.ss-auth-wrap{position:relative; z-index:1; width:100%; max-width:420px; padding:24px; text-align:center;}

.ss-auth-card{
	background:rgba(16,27,63,.55);
	border:1px solid rgba(255,255,255,.08);
	border-radius:var(--ss-radius);
	padding:40px 36px 32px;
	backdrop-filter:blur(20px) saturate(140%);
	-webkit-backdrop-filter:blur(20px) saturate(140%);
	box-shadow:0 25px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
	animation:ss-rise .5s ease both;
	text-align:left;
}
@keyframes ss-rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }

.ss-auth-brand{text-align:center; margin-bottom:28px;}
.ss-auth-logo{
	width:56px;height:56px; margin:0 auto 14px; border-radius:16px;
	display:flex; align-items:center; justify-content:center;
	font-weight:700; font-size:20px; letter-spacing:.5px;
	background:linear-gradient(135deg,var(--ss-blue-500),var(--ss-cyan-400));
	box-shadow:0 8px 24px rgba(59,108,246,.4);
}
.ss-auth-logo-sm{width:36px;height:36px;font-size:14px;border-radius:11px;margin:0;}
.ss-auth-company{margin:0; font-size:20px; letter-spacing:1.5px; font-weight:700;}
.ss-auth-subtitle{margin:6px 0 0; color:var(--ss-text-dim); font-size:13.5px;}

.ss-field{display:block; margin-bottom:18px;}
.ss-field-label{display:block; font-size:12.5px; color:var(--ss-text-dim); margin-bottom:7px; letter-spacing:.3px;}
.ss-field input[type="text"],
.ss-field input[type="email"],
.ss-field input[type="password"]{
	width:100%; padding:12px 14px; font-size:14.5px; color:var(--ss-text);
	background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
	border-radius:12px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.ss-field input:focus{border-color:var(--ss-blue-400); box-shadow:0 0 0 3px rgba(109,147,255,.18);}

.ss-password-wrap{position:relative;}
.ss-password-wrap input{padding-right:44px;}
.ss-toggle-pass{
	position:absolute; right:8px; top:50%; transform:translateY(-50%);
	background:none; border:none; color:var(--ss-text-dim); cursor:pointer; padding:6px; border-radius:8px;
}
.ss-toggle-pass:hover{color:var(--ss-text); background:rgba(255,255,255,.06);}

.ss-row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:13px;}
.ss-checkbox{display:flex; align-items:center; gap:7px; color:var(--ss-text-dim); cursor:pointer;}
.ss-checkbox input{accent-color:var(--ss-blue-500);}
.ss-link{color:var(--ss-blue-400); text-decoration:none;}
.ss-link:hover{text-decoration:underline;}

.ss-submit{
	width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer;
	font-size:14.5px; font-weight:600; color:#fff; letter-spacing:.3px;
	background:linear-gradient(135deg,var(--ss-blue-500),#5b7ff9);
	box-shadow:0 10px 24px rgba(59,108,246,.35);
	display:flex; align-items:center; justify-content:center; gap:10px;
	transition:transform .12s, box-shadow .12s, opacity .12s;
}
.ss-submit:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(59,108,246,.45);}
.ss-submit:active{transform:translateY(0);}
.ss-submit:disabled{opacity:.7; cursor:not-allowed; transform:none;}

.ss-spinner{
	width:16px;height:16px; border-radius:50%;
	border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
	animation:ss-spin .7s linear infinite;
}
@keyframes ss-spin{to{transform:rotate(360deg);}}

.ss-alert{
	margin-bottom:18px; padding:11px 14px; border-radius:10px; font-size:13.5px;
	background:rgba(255,107,122,.12); border:1px solid rgba(255,107,122,.35); color:#ffc2c9;
}
.ss-alert.is-success{background:rgba(62,230,143,.12); border-color:rgba(62,230,143,.35); color:#b7ffd8;}

.ss-back-link{text-align:center; margin-top:18px; font-size:13.5px;}
.ss-footnote{position:relative; z-index:1; margin-top:20px; color:var(--ss-text-dim); font-size:12px;}

@media (max-width:480px){
	.ss-auth-card{padding:30px 24px 26px;}
}