/* extracted styles from readme.html - trimmed for brevity */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:Inter, sans-serif;min-height:100%}
/* @keyframes bgGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body{background:linear-gradient(-45deg,#3CB4E5,#31006F,#3CB4E5,#31006F);background-size:400% 400%;animation:bgGradient 15s ease infinite} */
/* subtle entrance animations */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
} 
.contact-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:60px 20px;min-height:100vh;position:relative}
.contact-box{background:rgba(255,255,255,0.96);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.25);display:flex;flex-direction:column;width:100%;max-width:760px;padding:30px;opacity:0;transform:translateY(12px);animation:fadeInUp 0.7s ease-out 0.12s forwards}
.contact-box.admin-mode{max-height:80vh;overflow-y:auto;padding:30px}
.contact-info{display:none}
.contact-form{width:100%;padding:0}
.form-column{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.form-column input,.form-column select,.form-column textarea{background:#fff;border:1px solid #ccc;padding:12px;border-radius:6px;font-size:14px}
.contact-form button{background:#3CB4E5;color:#fff;border:none;padding:12px 28px;border-radius:26px;font-size:15px;cursor:pointer}
#spinnerOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center}

/* Title styling (formal serif) */
h1{color:rgb(18, 1, 255)55, 255, 255);font-size:34px;line-height:1.1;text-shadow:0 0 10px rgba(0,0,0,0.35);margin:0 0 26px 0;font-family:'Merriweather', Georgia, serif;font-weight:600;z-index:1;opacity:0;transform:translateY(-8px);animation:fadeInDown 0.6s ease-out 0s forwards}

@media (max-width: 768px) {
	.contact-wrapper {padding:30px 16px}
	h1 {font-size:26px;text-align:center}
	.contact-box{max-width:520px;padding:20px}
	.form-column{gap:12px}
}