* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; }
body { background-color: #f4f6f8; padding: 20px; }
.container { max-width: 900px; margin: 20px auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0px 4px 15px rgba(0,0,0,0.1); }
h2 { margin-bottom: 20px; color: #2c3e50; text-align: center; }
form label { display: block; font-weight: 600; margin: 4px 0 6px 2px; color: #2c3e50; }
form input[type='text'], form input[type='number'], form input[type='password'], form input[type='file'], form input[type='tel'], form select { width: 100%; padding: 10px; margin: 8px 0 15px 0; border: 1px solid #ccc; border-radius: 5px; transition: 0.3s; display:block; height:44px; }
form input[type='text']:focus, form input[type='number']:focus, form input[type='password']:focus, form input[type='file']:focus, form input[type='tel']:focus, form select:focus { border-color: #3498db; outline: none; }
/* Some browsers treat tel inputs differently; force full-width consistency */
form input[name='contact'] { width: 100% !important; display: block; height: 44px !important; padding: 10px !important; box-sizing: border-box; }
/* Ensure consistent typography and vertical rhythm across all text-ish inputs */
form input[type='text'], form input[type='number'], form input[type='password'], form input[type='tel'] { font: inherit; line-height: 1.2; }
/* Placeholder style consistency */
form input::placeholder { color: #888; opacity: 1; }
button, input[type='submit'] { background-color: #3498db; color: #fff; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.3s; }
button:hover, input[type='submit']:hover { background-color: #2980b9; }
a { text-decoration: none; color: #3498db; transition: 0.2s; }
a:hover { color: #2980b9; }
ul { list-style: none; margin: 20px 0; padding: 0; } ul li { margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table th, table td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
img { border-radius: 5px; max-width: 150px; }
p.success { color: green; font-weight: bold; } p.error { color: red; font-weight: bold; }
/* Navbar */
.navbar { background-color: #5dade2; padding: 6px 14px; border-radius: 5px; margin-bottom: 16px; }
.navbar ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.navbar ul li { margin: 3px 12px 3px 0; }
.navbar ul li a { color: #fff; text-decoration: none; font-weight: bold; padding: 6px 10px; border-radius: 5px; transition: 0.3s; }
.navbar ul li a:hover { background-color: #2980b9; }
/* Responsive */
@media screen and (max-width: 900px) { .container { padding: 25px; } }
@media screen and (max-width: 768px) { img { max-width: 120px; } }
@media screen and (max-width: 480px) { body { padding: 10px; } .container { padding: 15px; } h2 { font-size: 1.5em; } button, input[type='submit'] { width: 100%; padding: 12px 0; font-size: 16px; } table th, table td { font-size: 14px; padding: 8px; } ul li { font-size: 14px; } }
/* Mobile-friendly tables */
@media screen and (max-width: 600px) { table, thead, tbody, th, td, tr { display: block; } table tr { margin-bottom: 15px; border-bottom: 2px solid #ddd; } table td { text-align: right; padding-left: 50%; position: relative; } table td::before { content: attr(data-label); position: absolute; left: 15px; width: 45%; padding-left: 10px; font-weight: bold; text-align: left; } table th { display: none; } }

/* Normalize tel input appearance and tame invalid state */
form input[type='tel'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
form input:invalid { box-shadow: none; }
form input[type='tel']:invalid { border-color: #ccc; }
form input:-moz-ui-invalid { box-shadow: none; border-color: #ccc; }
form input:focus:invalid { border-color: #3498db; }