/* ============================================================
   LOGIN PAGE STYLES
   ============================================================ */

/* ===== RADIAL GLOW ===== */
.glow-top-right {
	position: absolute;
	top: -100px;
	right: -100px;
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(201, 51, 63, 0.35) 0%, rgba(201, 51, 63, 0.12) 40%, transparent 70%);
	pointer-events: none;
	z-index: 1;
}

.glow-top-left {
	position: absolute;
	top: -80px;
	left: -80px;
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, rgba(201, 51, 63, 0.22) 0%, transparent 65%);
	pointer-events: none;
	z-index: 1;
}

/* ===== GRADIENT CRANK ===== */
.grad-crank {
	background: linear-gradient(135deg, #c9333f 0%, #9b1c1f 65%, #4a0d0f 100%);
}

/* ===== DIVIDER LINE (Vertical) ===== */
.divider-line {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent 0%, rgba(201, 51, 63, 0.3) 15%, rgba(201, 51, 63, 0.9) 50%, rgba(201, 51, 63, 0.3) 85%, transparent 100%);
	box-shadow: 0 0 15px rgba(201, 51, 63, 0.8);
}

.divider-orb {
	position: absolute;
	right: -4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 15px 4px #c9333f;
	animation: scanLine 6s ease-in-out infinite alternate;
}

@keyframes scanLine {
	0% {
		top: 10%;
	}

	100% {
		top: 90%;
	}
}

/* ===== STAT CARDS (Creative) ===== */
.stat-card-creative {
	position: relative;
	background: rgba(17, 17, 22, 0.7);
	border: 1px solid rgba(201, 51, 63, 0.25);
	border-radius: 1.25rem;
	padding: 1.25rem;
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px -6px rgba(201, 51, 63, 0.25);
	transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

	.stat-card-creative:hover {
		transform: translateY(-4px) scale(1.02);
		border-color: rgba(201, 51, 63, 0.6);
		background: rgba(23, 23, 30, 0.85);
		box-shadow: 0 0 25px 0px rgba(201, 51, 63, 0.4), 0 12px 30px -5px rgba(201, 51, 63, 0.4);
	}

.stat-number {
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
	background: linear-gradient(135deg, #ffffff 50%, #e98a8f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ===== INPUT DARK ===== */
.input-dark {
	background: #0b0b0f;
	border: 1px solid #23232e;
	transition: all .25s ease;
}

	.input-dark:focus {
		outline: none;
		border-color: #c9333f;
		background: #111116;
		box-shadow: 0 0 20px -3px rgba(201, 51, 63, .4);
	}

/* ===== BUTTON CRANK ===== */
.btn-crank {
	background: linear-gradient(135deg, #c9333f 0%, #9b1c1f 100%);
	transition: all .3s ease;
	position: relative;
	overflow: hidden;
}

	.btn-crank::after {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transform: rotate(30deg) translateY(-100%);
		transition: transform 0.6s ease;
	}

	.btn-crank:hover::after {
		transform: rotate(30deg) translateY(100%);
	}

	.btn-crank:hover {
		transform: translateY(-2px);
		box-shadow: 0 0 25px 2px rgba(201, 51, 63, 0.6), 0 12px 30px -5px rgba(201, 51, 63, .7);
	}

/* ===== CREATIVE CHECKBOX ===== */
.creative-checkbox {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid #23232e;
	border-radius: 6px;
	background: #0b0b0f;
	transition: all 0.2s ease;
	cursor: pointer;
	position: relative;
}

	.creative-checkbox:checked {
		background: linear-gradient(135deg, #c9333f, #9b1c1f);
		border-color: #c9333f;
		box-shadow: 0 0 10px rgba(201, 51, 63, 0.5);
	}

		.creative-checkbox:checked::after {
			content: '✓';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			font-size: 11px;
			font-weight: 800;
		}

/* ===== THEME TOGGLE (Login) ===== */
.theme-toggle {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(17, 17, 22, 0.85);
	backdrop-filter: blur(12px);
	border: 1px solid #23232e;
	color: #94a3b8;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

	.theme-toggle:hover {
		transform: scale(1.05);
		border-color: #c9333f;
		color: #ffffff;
		box-shadow: 0 0 25px rgba(201, 51, 63, 0.3);
	}

/* ============================================================
   LIGHT MODE (Login)
   ============================================================ */
body.light-mode .glow-top-right {
	background: radial-gradient(circle, rgba(201, 51, 63, 0.08) 0%, rgba(201, 51, 63, 0.03) 40%, transparent 70%);
}

body.light-mode .glow-top-left {
	background: radial-gradient(circle, rgba(201, 51, 63, 0.05) 0%, transparent 65%);
}

body.light-mode .stat-number {
	background: linear-gradient(135deg, #1a1714 50%, #5a5248 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.light-mode .stat-card-creative {
	background: rgba(240, 234, 227, 0.8);
	border-color: rgba(201, 51, 63, 0.2);
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.08);
}

	body.light-mode .stat-card-creative:hover {
		background: rgba(240, 234, 227, 0.95);
		border-color: rgba(201, 51, 63, 0.5);
		box-shadow: 0 0 25px 0px rgba(201, 51, 63, 0.15), 0 12px 30px -5px rgba(0, 0, 0, 0.1);
	}

body.light-mode .input-dark {
	background: #f5f0eb !important;
	border-color: #d5ccc2 !important;
	color: #1a1714 !important;
}

	body.light-mode .input-dark:focus {
		border-color: #c9333f !important;
		background: #f0eae3 !important;
		box-shadow: 0 0 20px -3px rgba(201, 51, 63, 0.2);
	}

	body.light-mode .input-dark::placeholder {
		color: #8a7e72 !important;
	}

body.light-mode .creative-checkbox {
	border-color: #d5ccc2;
	background: #f5f0eb;
}

	body.light-mode .creative-checkbox:checked {
		background: linear-gradient(135deg, #c9333f, #9b1c1f);
		border-color: #c9333f;
	}

body.light-mode .btn-crank:hover {
	box-shadow: 0 0 25px 2px rgba(201, 51, 63, 0.4), 0 12px 30px -5px rgba(201, 51, 63, 0.5);
}

body.light-mode .divider-line {
	background: linear-gradient(180deg, transparent 0%, rgba(201, 51, 63, 0.15) 15%, rgba(201, 51, 63, 0.6) 50%, rgba(201, 51, 63, 0.15) 85%, transparent 100%);
	box-shadow: 0 0 15px rgba(201, 51, 63, 0.3);
}

body.light-mode .theme-toggle {
	background: rgba(240, 234, 227, 0.95);
	border-color: #d5ccc2;
	color: #5a5248;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

	body.light-mode .theme-toggle:hover {
		border-color: #c9333f;
		color: #1a1714;
		box-shadow: 0 0 25px rgba(201, 51, 63, 0.2);
	}