:root {
	--primary: #512da8;
	--primary-light: #8559da;
	--bg: #f5f5f5;
	--text: #333;
	--gray: #757575;
	--error: #f44336;
	--success: #4caf50;
}

* {box-sizing: border-box; margin: 0; padding: 0;}

body {font-family: 'Poppins', sans-serif; background: var(--bg); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px;}

.container {background: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.1); position: relative; width: 800px; max-width: 100%; min-height: 700px; overflow: hidden;}

.form-container {position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; width: 50%;}
.sign-in-container {left: 0; z-index: 2;}
.sign-up-container {left: 0; opacity: 0; z-index: 1;}

.container.right-panel-active .sign-in-container {transform: translateX(100%);}
.container.right-panel-active .sign-up-container {transform: translateX(100%); opacity: 1; z-index: 5;}

form { background: #fff; display: flex; flex-direction: column; padding: 0 20px; height: 100%; justify-content: center; align-items: center; text-align: center;}

input, select {background: #eee; border: none; padding: 10px 15px; margin: 6px 0; width: 100%; border-radius: 5px; font-family: inherit;}

.password-container { position: relative; width: 100%; }
.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--gray);}

button {border-radius: 20px; border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 12px 45px; font-weight: bold; text-transform: uppercase; cursor: pointer; margin-top: 15px; transition: 0.3s;}
button:hover {background: var(--primary-light);}
button.ghost {background: transparent; border-color: #fff;}

.overlay-container {position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s; z-index: 100;}
.container.right-panel-active .overlay-container {transform: translateX(-100%);}
.overlay { background: linear-gradient(to right, var(--primary-light), var(--primary)); color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s;}
.container.right-panel-active .overlay { transform: translateX(50%);}
.overlay-panel {position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%;}
.overlay-right {right: 0;}

.password-strength-meter {width: 100%; margin-top: 5px;}
.strength-bar {height: 4px; background: #ddd; border-radius: 2px; position: relative; overflow: hidden;}
.strength-bar::after {content: ''; display: block; height: 100%; width: var(--strength-width, 0%); background: var(--strength-color, var(--error)); transition: 0.3s;}
.strength-labels {display: flex; justify-content: space-between; font-size: 10px; margin-top: 4px; color: var(--gray);}

.modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center;}
.modal-content {background: #fff; padding: 30px; border-radius: 10px; width: 90%; max-width: 400px; position: relative;}
.close {position: absolute; top: 10px; right: 20px; font-size: 25px; cursor: pointer;}

.notification {position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 5px; color: #fff; transform: translateX(200%); transition: 0.5s; z-index: 2000;}
.notification.show {transform: translateX(0);}

@media (max-width: 768px) {
	.container {box-shadow: none; background: transparent; display: flex; flex-direction: column; overflow: visible;}
	.form-container {position: relative; width: 100% !important; height: auto !important; opacity: 1 !important; transform: none !important; margin-bottom: 20px; background: #fff; border-radius: 10px; padding: 40px 0;}
	.overlay-container {display: none;}
}