:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.wrap { margin: 0px auto; padding: 0px; }
.card {
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.wrap .row {
	display: flex;
	gap: 10px;
	margin: 0px;
	padding: 0px 0px 2rem 0px;
}
.wrap input[type="email"]{
	flex: 1;
	padding: 12px 12px;
	border-radius: 10px;
	border: 1px solid #cfcfcf;
	outline: none;
	font-size: 14px;
}
.wrap input[type="email"]:focus { border-color: #7c7c7c; }
.wrap button{
	padding: 12px 14px;
	border: 0;
	border-radius: 0px;
	cursor: pointer;
	font-weight: 600;
}
.wrap .btn-primary{
	background: linear-gradient(to bottom, #5814CC 0, #5814CC 50%, #5814CC 51%, #4709B2 100%);
	color: #FFA300;
	transition: box-shadow .3s ease-out;
}

.wrap .btn-primary:hover{
	box-shadow: 0 7px 13px 0 #19073F;
}
.wrap .btn-primary:disabled{
	opacity: 0.6; cursor: not-allowed;
}
.wrap .error {
	margin-top: 10px;
    color: #5814CC;
    font-size: 12px;
    min-height: 18px;
    text-indent: 4px;
}

/* Modal */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal-backdrop .modal {
	width: min(420px, 100%);
	background: #fff;
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.modal-backdrop .modal h3 { margin: 0 0 8px; font-size: 18px; }
.modal-backdrop .modal p { margin: 0 0 16px; color: #333; }
.modal-backdrop .modal .actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-backdrop .btn-ghost { background: #f3f3f3; color: #111; }
.show { display: flex; }