:root {
	--bg-dark: #060606;
	--muted: #b8b8bd;
	--white-text: #ffffff;
	--danger: #ff6b6b;
	--max-w: 460px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
	color-scheme: dark;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	height: calc(var(--vh, 1vh) * 100);
	background: var(--bg-dark);
	display: grid;
	place-items: center;
	padding: 28px;
	overflow: hidden;

	/* NEW — dossier background */
	background-image: url('../images/login-screen-background.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* allow overlay */
	position: relative;
}

/* dark overlay so the login panel stays readable */
body::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.50); /* adjust if needed */
	z-index: 0;
}

/* LOGIN PANEL */
.login-shell {
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.login-panel {
	background-color: rgba(17, 18, 20, 0.8);
	padding: 28px;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	border: 1px solid rgba(255,255,255,0.05);
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 460px;
}

.login-panel::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
	z-index: -1;
	pointer-events: none;
}

/* small header row */
.login-head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:18px;
}

/* smiley holder */
.smiley{
	width:64px;
	height:64px;
	flex:0 0 64px;
	display:grid;
	place-items:center;
	border-radius:12px;
}

/* title and subtitle */
.login-head h1{
	margin:0;
	font-size:18px;
	color:var(--white-text);
	letter-spacing:0.02em;
}
.login-head p{
	margin:0;
	color:var(--muted);
	font-size:13px;
}

/* FORM STYLING */
form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

label {
	font-size: 13px;
	color: var(--muted);
}

.input {
	position: relative;
	width: 100%;
}

.input input {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.1);
	background-color: rgba(40,40,45,0.95);
	color:var(--white-text);
	font-size: 15px;
	box-sizing: border-box;
}

.input input::placeholder {
	color: rgba(255,255,255,0.28);
}

.toggle-btn {
	position: absolute;
	right: 8px;
	top: 8px;
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	font-size: 13px;
}

.btn {
	padding: 12px 14px;
	border-radius: 12px;
	border: 0;
	font-weight: 700;
	cursor: pointer;
	background: linear-gradient(90deg, #ffdf5d, #ffd13f);
	color: #111;
}

.msg {
	color:var(--danger);
	font-size: 13px;
	visibility: hidden;
}

/* FORM ACTIONS WRAPPER */
.form-actions {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.form-actions-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


/* ---------- Smiley SVG styling ---------- */
.smiley svg{width:56px;height:56px;display:block}
.smile-path{filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));}

/* animated scratched eyes / glitch */
.eye-left, .eye-right{
	transform-origin:center;
	transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .25s;
}
.smiley:hover .eye-left{ transform:translateX(-2px) rotate(-6deg); opacity:0.95}
.smiley:hover .eye-right{ transform:translateX(2px) rotate(6deg); opacity:0.95}

/* --------------------------------------------------
   MOBILE FIX: Prevent sideways scrolling, center panel,
   use mobile background, fix body padding & layout
   -------------------------------------------------- */
@media (max-width: 640px) {

	/* Fix body layout */
	body {
		display: block;             /* remove problematic grid centering */
		padding: 16px;              /* reduce padding so no overflow */
		overflow-x: hidden;         /* guarantee no sideways scroll */
		overflow-y: auto;

		background-image: url('../images/mobile-login-screen-background.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Keep login box centered */
	.login-shell {
		width: 100%;
		max-width: 380px;
		margin: 0 auto;              /* ensures horizontal centering */
		padding-top: 40px;           /* space from top */
	}

	/* Make the panel fit smaller phones better */
	.login-panel {
		max-width: 380px;
		width: 100%;
		padding: 24px;
	}

	/* Prevent flex headers from pushing width wider */
	.login-head {
		flex-wrap: nowrap;
	}

	/* Just to be safe, prevent any element from overflowing */
	* {
		max-width: 100%;
		box-sizing: border-box;
	}
}