.age-calculator-container {max-width: 400px;margin: 50px auto;background: #f8f9fa;padding: 25px;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,.1);font-family: "Segoe UI",sans-serif;text-align: left;}
h2 {text-align: center;color: #333;margin-bottom: 20px;}
.input-group {margin-bottom: 20px;}
.input-group label {display: block;margin-bottom: 6px;font-weight: 500;}
input[type="date"] {width: 100%;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 8px;}
.button-group {display: flex;justify-content: space-between;margin-bottom: 20px;}
button {flex: 1;padding: 10px;font-size: 16px;border: none;border-radius: 8px;cursor: pointer;margin-right: 10px;transition: background .3s ease;}
button:last-child {margin-right: 0;}
#calculateBtn {background-color: #4caf50;color: #fff;}
#calculateBtn:hover {background-color: #43a047;}
#clearBtn {background-color: #a6acaf;color: #fff;}
#clearBtn:hover {background-color: #90989b;}
.result p {font-size: 16px;margin: 10px 0;color: #333;}
.result span {font-weight: bold;}
.green-text {color: #4caf50;font-weight: bold;}