/* --- TOOL CARD (Copied from your PAN Tool) --- */
.tool-card {
    background: var(--bg-card); 
    padding: 35px; 
    border-radius: 15px;
    border: 1px solid var(--border); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    margin: 40px 0;
}

/* --- 3-COLUMN GRID --- */
.converter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 Equal Columns */
    gap: 15px;
    margin-bottom: 30px;
}

.input-group-clean label {
    display: block; 
    font-weight: 800; 
    color: var(--brand-blue); 
    margin-bottom: 8px; 
    font-size: 11px; 
    text-transform: uppercase;
}

.input-group-clean input {
    width: 100%; 
    padding: 12px; 
    border: 1.5px solid var(--border);
    border-radius: 8px; 
    font-size: 18px; 
    font-weight: 700;
    background: var(--bg-body); 
    box-sizing: border-box; /* Prevents input from spilling out */
    -moz-appearance: textfield; /* Firefox Fix */
}

/* Hide Ugly Spinners (Arrows) on Numbers */
.input-group-clean input::-webkit-outer-spin-button,
.input-group-clean input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- SETTINGS ROW --- */
.settings-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    border-top: 1px solid var(--border); 
    padding-top: 25px;
}

.setting-item label { 
    font-size: 12px; font-weight: 800; color: var(--text-muted); 
    display: block; margin-bottom: 8px; 
}
.setting-item select { 
    width: 100%; padding: 12px; border-radius: 8px; 
    border: 1.5px solid var(--border); background: var(--bg-body); 
    font-size: 14px;
}

/* --- PROGRESS BAR --- */
.progress-bar { 
    width: 100%; height: 10px; background: #e2e8f0; 
    border-radius: 10px; margin-top: 15px; overflow: hidden; 
}
#progressFill { 
    width: 0%; height: 100%; background: linear-gradient(90deg, #0b57d0, #00d2ff); transition: 0.5s ease; 
}
.cost-est { 
    margin-top: 20px; font-size: 14px; font-weight: 800; 
    color: #28a745; text-align: right; 
}

/* --- MOBILE RESPONSIVENESS (Important for Sidebar) --- */
@media (max-width: 768px) {
    .converter-grid {
        grid-template-columns: 1fr; /* Stack inputs on phone */
    }
    .settings-grid {
        grid-template-columns: 1fr;
    }
}