.tool-container { padding: 60px 20px; max-width: 800px; }
.tool-header { text-align: center; margin-bottom: 40px; }
.tool-grid { background: var(--white); padding: 40px; border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); }

/* FORM */
.form-group { margin-bottom: 20px; }
.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--dark); }
.form-control { width: 100%; padding: 12px; border: 2px solid #eee; border-radius: 8px; font-size: 16px; transition: 0.3s; }
.form-control:focus { border-color: var(--primary); outline: none; }

/* RESULTS */
.tool-results { margin-top: 40px; border-top: 2px dashed #eee; padding-top: 30px; text-align: center; }
.big-number { font-size: 48px; font-weight: 800; color: var(--primary); margin: 10px 0 30px; }

.goals-grid { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; }
.goal-box { flex: 1; padding: 15px; background: #f9f9f9; border-radius: 10px; }
.goal-box span { display: block; font-size: 14px; color: var(--gray); }
.goal-box strong { font-size: 24px; color: var(--dark); }

/* AFFILIATE BOX */
.recommendation-box { background: #fff8f0; border: 1px solid #ffeaa7; padding: 20px; border-radius: 10px; margin-top: 20px; }
.rec-btn { color: #d35400; font-weight: bold; font-size: 18px; display: inline-flex; align-items: center; gap: 10px; }
.rec-btn:hover { text-decoration: underline; }


/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    /* Stack Form Inputs that are side-by-side */
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    /* Stack the Result Boxes (Cut/Bulk) */
    .goals-grid {
        flex-direction: column;
    }
    
    .big-number {
        font-size: 36px;
    }
}