/* Shared styles for /wa/ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #004d40 0%, #00897b 50%, #4db6ac 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; min-width: 320px; }
.card { background: rgba(255,255,255,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.25); border-radius: 24px; padding: 40px 32px; width: 100%; max-width: 400px; min-width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3); text-align: center; }
.card.wide { max-width: 480px; }
.logos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.logo { width: 64px; height: 64px; background: linear-gradient(45deg, #25d366, #0fbd5c, #43e97b); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(37,211,102,.4), 0 0 30px rgba(37,211,102,.2), 0 4px 12px rgba(0,0,0,.15); }
.dmi-logo { height: 64px; width: auto; border-radius: 12px; box-shadow: 0 0 15px rgba(37,211,102,.4), 0 0 30px rgba(37,211,102,.2), 0 4px 12px rgba(0,0,0,.15); }
.logo svg { width: 36px; height: 36px; fill: #fff; }
h1 { font-size: 1.4rem; color: #fff; margin-bottom: 24px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
label { display: block; text-align: left; font-size: .85rem; color: rgba(255,255,255,.95); margin-bottom: 6px; }
label.mt { margin-top: 12px; }
input[type="tel"], textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; font-size: 1.1rem; outline: none; background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 2px 2px 6px rgba(0,0,0,.12), inset -2px -2px 6px rgba(255,255,255,.08); transition: all .2s; }
input[type="tel"]::placeholder, textarea::placeholder { color: rgba(255,255,255,.45); }
input[type="tel"]:focus, textarea:focus { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); box-shadow: inset 3px 3px 8px rgba(0,0,0,.15), inset -3px -3px 8px rgba(255,255,255,.1); }
textarea { font-size: 1rem; resize: vertical; min-height: 60px; font-family: inherit; margin-top: 12px; }
button { width: 100%; margin-top: 16px; padding: 14px; background: linear-gradient(45deg, #25d366, #0fbd5c, #43e97b); color: #fff; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 0 15px rgba(37,211,102,.4), 0 0 30px rgba(37,211,102,.2), 0 4px 12px rgba(0,0,0,.15); transition: all .3s; }
button:hover { box-shadow: 0 0 20px rgba(37,211,102,.6), 0 0 40px rgba(37,211,102,.3), 0 6px 16px rgba(0,0,0,.2); }
button:active { box-shadow: 0 0 10px rgba(37,211,102,.3), inset 3px 3px 8px rgba(0,0,0,.15); }
button:disabled { opacity: .5; cursor: not-allowed; }
.status { margin-top: 16px; font-size: .85rem; color: rgba(255,255,255,.9); min-height: 20px; }
footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; padding: 12px; font-size: .8rem; color: rgba(255,255,255,.6); }
footer a.subtle { color: rgba(255,255,255,.6); text-decoration: none; font-size: .8rem; }
@media (max-width: 420px) { .card { padding: 28px 20px; min-width: 0; } h1 { font-size: 1.2rem; } }
@media (max-height: 580px) { body { align-items: flex-start; padding: 20px 0 60px; } footer { position: relative; margin-top: 16px; } }