body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;background-color:#f0f2f5;color:#333;padding:20px;box-sizing:border-box;}
.calculator-container{background-color:#fff;padding:25px 30px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);width:100%;max-width:520px;text-align:center;}
h2{color:#333;margin-top:0;margin-bottom:20px;font-size:1.5em;}
.input-group{margin-bottom:18px;text-align:left;}
label{display:block;margin-bottom:6px;font-weight:600;color:#555;}
.date-input-container{display:flex;align-items:center;gap:8px;}
input[type="date"]{flex-grow:1;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:1em;box-sizing:border-box;}
.year-buttons{display:flex;gap:4px;}
.year-buttons button{padding:8px 9px;font-size:0.9em;background-color:#6c757d;color:white;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.2s ease;white-space:nowrap;}
.year-buttons button:hover{background-color:#5a6268;}
#calculateAgeButton{width:100%;padding:12px;background-color:#007bff;color:white;border:none;border-radius:5px;font-size:1em;font-weight:600;cursor:pointer;transition:background-color 0.2s ease-in-out;margin-top:10px;}
#calculateAgeButton:hover{background-color:#0056b3;}
#result{margin-top:20px;font-size:1.1em;font-weight:500;min-height:1.5em;}
.error{color:#dc3545;}
.success{color:#28a745;}