/* --- basic layout & styling --- */
 * {
   box-sizing: border-box;
 }

 body {
   font-family: "Segoe UI", Roboto, Arial, sans-serif;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   min-height: 100vh;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .card {
   width: 100%;
   max-width: 520px;
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
   padding: 28px;
   text-align: center;
 }

 h1 {
   margin: 0 0 8px;
   font-size: 1.8rem;
   color: #222;
 }

 .subtitle {
   color: #666;
   margin-bottom: 18px;
 }

 form.input-form {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   align-items: end;
   margin-bottom: 16px;
 }

 .input-group {
   display: flex;
   flex-direction: column;
   text-align: left;
 }

 label {
   font-size: 0.85rem;
   color: #444;
   margin-bottom: 6px;
   font-weight: 600;
 }

 input[type=number] {
   padding: 12px;
   border: 2px solid #e6e6e6;
   border-radius: 10px;
   font-size: 1rem;
   text-align: center;
 }

 input[type=number]:focus {
   outline: none;
   border-color: #667eea;
   box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.08);
 }

 input.invalid {
   border-color: #ff4757;
   background: #fff5f5;
 }

 button.calculate {
   grid-column: span 3;
   padding: 12px;
   border: 0;
   color: #fff;
   background: linear-gradient(135deg, #667eea, #764ba2);
   border-radius: 10px;
   font-weight: 700;
   cursor: pointer;
   transition: transform .12s ease, box-shadow .12s ease;
 }

 button.calculate:active {
   transform: translateY(1px);
 }

 .result {
   margin-top: 16px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   padding: 16px;
   border-radius: 10px;
   background: linear-gradient(180deg, #f8f9fa, #e9ecef);
   align-items: center;
   justify-items: center;
 }

 .age-number {
   font-size: 1.8rem;
   color: #2b46d3;
   font-weight: 800;
 }

 .age-label {
   font-size: .78rem;
   color: #666;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

 .hidden {
   display: none;
 }

 .error {
   margin-top: 12px;
   background: #fff5f5;
   border-left: 4px solid #ff4757;
   color: #b71c1c;
   padding: 10px 12px;
   border-radius: 8px;
   text-align: left;
 }

 .status {
   margin-top: 12px;
   font-size: .85rem;
   color: #333;
   opacity: .9;
   text-align: left;
   background: #f1f7ff;
   padding: 8px 10px;
   border-radius: 8px;
   border-left: 4px solid #3b82f6;
 }

 @media (max-width:520px) {
   form.input-form {
     grid-template-columns: 1fr;
   }

   .result {
     grid-template-columns: 1fr;
   }

   button.calculate {
     grid-column: span 1;
   }
 }