* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { 
    background-color: #fefae0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    padding: 20px; 
}

.container { 
    background: #fff; 
    padding: 40px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    max-width: 700px; 
    width: 100%; 
    opacity: 0; 
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards; 
}

@keyframes fadeInUp { to { transform: translateY(0); opacity: 1; } }

h2 { text-align: center; margin-bottom: 30px; font-size: 2.2rem; color: #333; }
h2 span { font-size: 1rem; color: #ff5252; text-transform: uppercase; letter-spacing: 1px; }

.row { display: flex; gap: 20px; margin-bottom: 15px; }
.input-group { flex: 1; display: flex; flex-direction: column; }

label { font-weight: 600; margin-bottom: 5px; color: #444; }

input, select, textarea { 
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    background-color: #f9f9ff; 
    outline: none; 
    transition: all 0.3s ease; 
}

input:focus, select:focus, textarea:focus { 
    border-color: #ff5252; 
    background-color: #fff; 
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.15); 
}

button { 
    width: 160px; 
    padding: 14px; 
    background-color: #ff5252; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-size: 1rem; 
    font-weight: bold; 
    cursor: pointer; 
    float: right; 
    transition: 0.3s; 
    margin-top: 10px;
}

button:hover { background-color: #e04444; transform: translateY(-2px); }
button:disabled { background-color: #ccc; cursor: not-allowed; }

#result { 
    margin-top: 70px; 
    text-align: center; 
    font-weight: 600; 
    min-height: 25px; 
}

.success-msg { color: #27ae60; }
.error-msg { color: #e74c3c; }

@media (max-width: 600px) { .row { flex-direction: column; } button { width: 100%; } }