/* Tools Page Styles */
.tool-hero{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-warm) 100%);padding:var(--space-12) 0 var(--space-16);text-align:center}
.tool-hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.8125rem;font-weight:600;color:var(--color-primary);margin-bottom:var(--space-5)}
.tool-hero h1{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3.5rem);font-weight:700;color:var(--color-text);margin-bottom:var(--space-4)}
.tool-hero p{font-size:1.125rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto}

.tool-container{max-width:800px;margin:0 auto;padding:var(--space-10);background:var(--color-surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);border:1px solid var(--color-border)}

.form-group{margin-bottom:var(--space-6)}
.form-label{display:block;font-weight:600;color:var(--color-text);margin-bottom:var(--space-2);font-size:0.9375rem}
.form-input,.form-select{width:100%;padding:var(--space-4);font-family:var(--font-body);font-size:1rem;color:var(--color-text);background:var(--color-bg-alt);border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--duration-fast);outline:none}
.form-input:focus,.form-select:focus{border-color:var(--color-primary);background:var(--color-surface);box-shadow:0 0 0 4px rgba(217,119,6,0.1)}

.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}
.option-card{position:relative}
.option-card input{position:absolute;opacity:0;pointer-events:none}
.option-card label{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5);background:var(--color-bg-alt);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast);text-align:center}
.option-card label:hover{border-color:var(--color-primary-200);background:var(--color-bg-warm)}
.option-card input:checked+label{border-color:var(--color-primary);background:var(--color-primary-100)}
.option-icon{font-size:2rem}
.option-text{font-weight:600;color:var(--color-text)}
.option-desc{font-size:0.8125rem;color:var(--color-text-muted)}

.tool-results{background:var(--color-bg-warm);border:2px solid var(--color-primary-200);border-radius:var(--radius-xl);padding:var(--space-8);margin-top:var(--space-8);animation:slideUp 0.4s var(--ease-out)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.results-title{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:1.5rem;color:var(--color-text);margin-bottom:var(--space-6)}

/* Name Generator */
.generated-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.name-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--duration-fast)}
.name-item:hover{border-color:var(--color-primary);background:var(--color-primary-100)}
.name-text{font-weight:600;color:var(--color-text);font-size:1.125rem}
.name-copy-btn{background:none;border:none;cursor:pointer;font-size:1rem;opacity:0.5;transition:opacity var(--duration-fast)}
.name-copy-btn:hover{opacity:1}

/* Age Calculator */
.age-display{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-bottom:var(--space-6)}
.age-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center}
.age-label{font-size:0.875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.age-value{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--color-primary);line-height:1}
.age-unit{font-size:1rem;font-weight:600;color:var(--color-text-muted)}
.life-stage{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center}
.life-stage-badge{display:inline-block;padding:var(--space-2) var(--space-5);background:var(--color-primary-100);color:var(--color-primary-dark);border-radius:var(--radius-full);font-weight:700;font-size:1.125rem;margin-bottom:var(--space-3)}

/* Food Calculator */
.food-recommendation{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6)}
.food-amount{text-align:center;margin-bottom:var(--space-5)}
.food-amount-value{font-family:var(--font-display);font-size:4rem;font-weight:700;color:var(--color-primary);line-height:1}
.food-amount-unit{font-size:1.25rem;color:var(--color-text-muted);font-weight:600}
.food-breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.food-meal{text-align:center;padding:var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-lg)}
.meal-label{font-size:0.8125rem;color:var(--color-text-muted);margin-bottom:var(--space-1)}
.meal-amount{font-size:1.25rem;font-weight:700;color:var(--color-text)}

/* Product Affiliate CTA */
.product-cta{background:linear-gradient(135deg,var(--color-bg-warm) 0%,var(--color-primary-100) 100%);border:1px solid var(--color-primary-200);border-radius:var(--radius-xl);padding:var(--space-8);margin-top:var(--space-8)}
.product-cta h3{font-size:1.25rem;color:var(--color-text);margin-bottom:var(--space-3)}
.product-cta p{color:var(--color-text-secondary);margin-bottom:var(--space-5)}
.product-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center;text-decoration:none;transition:all var(--duration-fast)}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.product-icon{font-size:2rem;margin-bottom:var(--space-2)}
.product-name{font-weight:600;color:var(--color-text);font-size:0.9375rem;margin-bottom:var(--space-1)}
.product-price{color:var(--color-primary);font-weight:700}

@media(max-width:768px){
    .tool-container{padding:var(--space-6);margin:0 var(--space-4);border-radius:var(--radius-xl)}
    .option-grid{grid-template-columns:1fr}
    .age-display,.food-breakdown{grid-template-columns:1fr}
}