#birthdate-calculator{ max-width: var(--max-width); margin: 0 auto; padding: 32px 16px 80px; color: var(--text-main); }

.date-type-group{ display: flex; flex-wrap: wrap; gap: 12px; }

.inline-option-row{ display: flex; flex-wrap: wrap; gap: 12px; }

input[type="date"]{ width: 100%; min-height: 52px; padding: 0 16px; font-size: 1rem; border: 1px solid rgba(var(--heading-rgb),0.1); border-radius: 14px; outline: none; background: var(--surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; }

input[type="date"]:focus{ border-color: rgba(var(--blue-rgb),0.35); box-shadow: 0 0 0 4px rgba(var(--blue-rgb),0.08); }

#result p{ margin: 0; }

.result-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }

@media (max-width: 768px){
    
    #birthdate-calculator{ padding: 20px 12px 60px; }
    
    
  }

@media (max-width: 640px){
    .result-grid{ grid-template-columns: 1fr; }
    .result-value{ font-size: 1rem; }
  }

@media (max-width: 480px){
    
    .date-type-group, .inline-option-row{ flex-direction: column; }
    }