/* 1. BRANDING & MOBILE-FIRST RESET */
:root {
    --theory-blue: #1a365d;
    --accent-red: #e63946;
    --bg-light: #f1f5f9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background-color: var(--bg-light);
    line-height: 1.5;
    color: #1e293b;
}

/* 2. THE BLUE HEADER */
header { 
    background-color: var(--theory-blue); 
    color: white; 
    padding: 3rem 1.5rem; 
    text-align: center;
    border-bottom: 6px solid var(--accent-red);
}

header h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }

/* 3. MAIN CARD (The "Tunnel" Look) */
main { 
    max-width: 550px; 
    margin: -1.5rem auto 2rem; 
    background: white; 
    padding: 2rem; 
    border-radius: 12px; 
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    width: 92%; /* Side spacing for mobile */
}

/* 4. SECTION SPACING */
section { margin-bottom: 2.5rem; }
h2 { 
    font-size: 1.25rem; 
    color: var(--theory-blue); 
    margin-bottom: 1.25rem; 
    border-bottom: 2px solid #f1f5f9; 
    padding-bottom: 0.5rem; 
}

/* 5. INPUTS (Preventing iPhone Zoom) */
label { display: block; margin-top: 1.25rem; font-weight: 600; font-size: 0.85rem; color: #475569; }
select, input, textarea { 
    width: 100%; 
    padding: 0.85rem; 
    margin-top: 0.5rem; 
    border: 1px solid #cbd5e0; 
    border-radius: 8px; 
    font-size: 16px; /* Essential for mobile friendliness */
}

/* 6. THE RESULTS BOX */
.result-box { 
    background: #f0fdf4; 
    border: 2px dashed #22c55e; 
    padding: 1.5rem; 
    text-align: center; 
    margin: 2rem 0; 
    border-radius: 10px; 
}
#priceRange { color: #15803d; font-size: 2.25rem; font-weight: 800; }

/* 7. BUTTONS */
button { 
    width: 100%; 
    padding: 1.15rem; 
    background-color: var(--accent-red); 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-size: 1.1rem; 
    font-weight: 700; 
    cursor: pointer; 
}

/* 8. FOOTER */
footer { text-align: center; padding: 2rem 1.5rem; font-size: 0.8rem; color: #64748b; }
.network-links a { color: var(--theory-blue); text-decoration: none; font-weight: 700; margin: 0 8px; }