/* Styles extracted from LoginbyLoopA login.html */
:root{--bg:linear-gradient(135deg,#eef8ff 0%,#f3f0ff 100%);--card:#ffffff;--accent:#4f46e5;--muted:#64748b}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a}
/* Centering container and prevent page scroll */
body{display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden}

.container{
	width:clamp(280px,90%,420px);
	padding:24px;
	border-radius:12px;
	background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.98));
	box-shadow:0 10px 30px rgba(2,6,23,0.08);
	margin:16px auto;
}

.header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:18px}
.logo{width:64px;height:64px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
h1{font-size:1.25rem;margin:0}
p.lead{margin:6px 0 0;color:var(--muted);font-size:0.95rem}

form{display:flex;flex-direction:column;gap:12px}

/* Floating-label input group (from Uiverse example), adjusted for full width */
.inputGroup {
	font-family: 'Segoe UI', sans-serif;
	margin: 1em 0 1em 0;
	max-width: 100%;
	position: relative;
}

/* Password toggle styles */
.inputGroup--password input { padding-right:48px }

.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;z-index:3;width:32px;height:32px}
.password-toggle:focus{outline:0;box-shadow:none}
.password-toggle::-moz-focus-inner{border:0}
.password-toggle .toggle-icon{width:20px;height:20px;display:block;pointer-events:none;filter: invert(100%) sepia(0%) saturate(3406%) hue-rotate(31deg) brightness(113%) contrast(57%);}

/* Hide browser native password reveal/clear controls */
input[type="password"]::-ms-clear,
input[type="password"]::-ms-reveal { display: none; width: 0; height: 0; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container { display: none !important; }

/* Flip card styles for reset form */
.flip-card{perspective:1000px}
.flip-inner{position:relative;transition:transform 0.6s cubic-bezier(.2,.9,.2,1);transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{backface-visibility:hidden;min-height:220px}
.flip-back{position:absolute;inset:0;transform:rotateY(180deg);padding:0}
.flip-card .flip-front,.flip-card .flip-back{width:100%}
/* smooth filter transition */
.password-toggle .toggle-icon{transition:filter 160ms ease}

.inputGroup input {
	font-size: 100%;
	padding: 0.85em 0.9em;
	outline: none;
	border: 2px solid rgb(200, 200, 200);
	background-color: #fff;
	border-radius: 8px; /* slightly rounded rectangular */
	width: 100%;
	font-size:1rem;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.01);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	color: #0f172a;
}

.inputGroup label {
	font-size: 100%;
	position: absolute;
	left: 0;
	padding: 0.8em;
	margin-left: 0.5em;
	pointer-events: none;
	transition: all 0.3s ease, color 0.15s ease;
	color: rgb(100, 100, 100);
	background: transparent;
	border-radius:8px;
}

.inputGroup :is(input:focus, input:valid)~label {
	transform: translateY(-50%) scale(.9);
	margin: 0em;
	margin-left: 1.3em;
	padding: 0.4em;
	background-color: #ffffff; /* white on focus */
	color: var(--accent);
}

/* ensure the input itself stays white when focused and text color changes */
.inputGroup :is(input:focus, input:valid) {
	border-color: rgb(120, 120, 200);
	background-color: #ffffff;
	color: #000000; /* input text stays black when typing */
}
button{width:100%;padding:12px;border-radius:10px;border:0;background:var(--accent);color:white;font-weight:600;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
button:focus{outline:0;box-shadow:none}
button::-moz-focus-inner{border:0}
button .btn-icon{width:20px;height:20px;display:inline-block;flex-shrink:0;filter: invert(100%) sepia(12%) saturate(7489%) hue-rotate(198deg) brightness(121%) contrast(98%);}
.small{display:flex;justify-content:space-between;align-items:center;font-size:0.9rem;color:var(--muted)}
.small label{display:inline-flex;align-items:center;gap:8px}
.small input[type="checkbox"]{width:16px;height:16px;margin:0}

.reset-desc{margin:8px 0 0;color:var(--muted);font-size:0.95rem;text-align:left;max-width:100%;box-sizing:border-box}
.flip-back .small{justify-content:flex-end}

/* On very short screens, allow the container to align near top so content remains visible */
@media (max-height:520px){
	body{align-items:flex-start;padding-top:12px;padding-bottom:12px}
	.container{margin:8px 12px;border-radius:8px}
}