/* === Referral Login Page === */

#login_wrap.ref_login {
	min-height:100vh;
	background:#0a0a0f;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
#login_wrap.ref_login * { box-sizing:border-box; }

/* background */
.ref_scene {
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:0;
}
.ref_grid {
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
	background-size:44px 44px;
}
.ref_blob {
	position:absolute;
	border-radius:50%;
	filter:blur(90px);
	opacity:.28;
}
.ref_blob_one {
	width:520px; height:520px;
	top:-100px; left:-60px;
	background:radial-gradient(circle, #6d28d9 0%, transparent 70%);
	animation:refDrift 16s ease-in-out infinite alternate;
}
.ref_blob_two {
	width:440px; height:440px;
	bottom:-80px; right:-40px;
	background:radial-gradient(circle, #0ea5e9 0%, transparent 70%);
	animation:refDrift 20s ease-in-out infinite alternate-reverse;
}
@keyframes refDrift {
	from { transform:translate(0,0) scale(1); }
	to   { transform:translate(24px,16px) scale(1.05); }
}

/* shell */
.ref_shell {
	position:relative;
	z-index:2;
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px 20px;
	min-height:100vh;
}

/* panel */
.ref_panel {
	width:100%;
	max-width:400px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);
	border-radius:20px;
	backdrop-filter:blur(22px);
	padding:36px 32px;
	display:flex;
	flex-direction:column;
	gap:22px;
	animation:refPanelIn .4s cubic-bezier(.22,.8,.36,1) both;
}
@keyframes refPanelIn {
	from { opacity:0; transform:translateY(14px); }
	to   { opacity:1; transform:translateY(0); }
}

/* brand */
.ref_brand { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
#login_logo { max-width:76px; max-height:76px; object-fit:contain; border-radius:14px; }
.ref_site_title { font-size:21px; font-weight:800; color:#fff; margin:0; letter-spacing:-.3px; }
.ref_lead { font-size:13px; color:rgba(255,255,255,.5); margin:0; line-height:1.55; }

/* buttons */
.ref_actions { display:flex; flex-direction:column; gap:10px; }
.ref_primary_btn {
	width:100%; padding:13px 18px; border-radius:10px; border:none;
	background:linear-gradient(135deg,#6d28d9,#4f46e5);
	color:#fff; font-size:14px; font-weight:700; cursor:pointer;
	transition:filter .12s, transform .12s, box-shadow .12s;
	box-shadow:0 4px 18px rgba(109,40,217,.38);
	display:flex; align-items:center; justify-content:center; gap:8px;
}
.ref_primary_btn:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 6px 24px rgba(109,40,217,.52); }
.ref_primary_btn:active { transform:translateY(0); }

.ref_secondary_btn {
	width:100%; padding:12px 18px; border-radius:10px;
	border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.05);
	color:rgba(255,255,255,.65); font-size:13px; font-weight:600; cursor:pointer;
	transition:background .14s, border-color .14s, color .14s;
}
.ref_secondary_btn:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); color:#fff; }

/* register */
.ref_register { text-align:center; }
.ref_register span { font-size:12px; color:rgba(255,255,255,.38); display:block; margin-bottom:6px; }
.ref_register button { background:none; border:none; color:#818cf8; font-size:13px; font-weight:700; cursor:pointer; padding:0; transition:color .12s; }
.ref_register button:hover { color:#a5b4fc; }

/* bottom row: flag + badge */
.ref_bottom {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	padding-top:4px;
	border-top:1px solid rgba(255,255,255,.06);
}
.ref_lang_wrap { opacity:.45; transition:opacity .14s; cursor:pointer; }
.ref_lang_wrap:hover { opacity:.8; }
img.intro_lang { width:22px; height:16px; object-fit:cover; border-radius:2px; display:block; }

/* footer */
#login_wrap.ref_login #page_footer { position:relative; z-index:2; }

@media screen and (max-width:460px) {
	.ref_panel { padding:26px 18px; }
	.ref_bottom { justify-content:center; flex-direction:column; align-items:center; }
}