body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f4f7f6; 
    display: flex; 
    justify-content: center; 
    padding: 20px; 
}
.container { 
    background: white; 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    width: 100%; 
    max-width: 450px; 
}
h2 { text-align: center; color: #2c3e50; margin-bottom: 25px; font-size: 1.5rem; }
.search-box { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; }
input { padding: 12px; border: 1px solid #ddd; border-radius: 6px; outline: none; font-size: 1rem; }
input:focus { border-color: #27ae60; box-shadow: 0 0 5px rgba(39, 174, 96, 0.2); }
button { padding: 12px; background: #27ae60; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 1rem; }
button:hover { background: #219150; }
.result-card { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; background: #fafafa; animation: fadeIn 0.5s; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.info-item label { font-size: 0.8rem; color: #7f8c8d; display: block; }
.amount { font-size: 1.1rem; font-weight: bold; color: #2c3e50; margin: 5px 0; }
.error { color: #e74c3c; text-align: center; font-size: 0.9rem; margin-top: 10px; font-weight: 500; }
.total-box { margin-top: 20px; padding: 15px; background: #e8f8f5; border-radius: 8px; text-align: center; border: 1px solid #27ae60; }
.total-box label { font-size: 0.9rem; color: #27ae60; font-weight: bold; display: block; }
.total-amount { font-size: 1.5rem; font-weight: bold; color: #2c3e50; margin: 5px 0 0 0; }
.disclaimer { margin-top: 15px; font-size: 0.85rem; color: #d35400; text-align: center; font-style: italic; background-color: #fdf2e9; padding: 10px; border-radius: 6px; border: 1px dashed #e67e22; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }