body { font-family: 'Segoe UI', sans-serif; background: #F0F2F5; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.main-container { display: flex; width: 100%; max-width: 800px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; }
.form-section { flex: 1; padding: 30px; }
.keypad-section { flex: 0 0 300px; background-color: #F8F9FA; padding: 63px 20px 20px; border-left: 1px solid #DEE2E6; }
h2 { text-align: center; margin-bottom: 25px; }
.input-group { margin-bottom: 20px; position: relative; }
label { display: block; margin-bottom: 8px; font-weight: 500; }
input { width: 100%; padding: 12px; border: 1px solid #CED4DA; border-radius: 8px; font-size: 1rem; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad-btn { background-color: white; border: 1px solid #DEE2E6; border-radius: 8px; padding: 20px; font-size: 1.5rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.btn-submit { width: 48%; padding: 12px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 10px; background-color: #4361EE; color: white; height: 91px; }
button#submitBtn.btn-submit { height: 59px; display: none; }
#message { margin-top: 20px; padding: 15px; border-radius: 8px; text-align: center; display: none; font-weight: 500; }
.success { background-color: #D4EDDA; color: #155724; }
.error { background-color: #F8D7DA; color: #721C24; }
