body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #f5f7fa;

}


header {

    background: #1f4ed8;

    color: white;

    padding: 14px 20px;

}


header h1 {

    margin-bottom: 10px;

}


.container {

    display: grid;

    grid-template-columns: 260px 1fr 260px;

    gap: 16px;

    padding: 16px;

}


.panel {

    background: white;

    border-radius: 10px;

    padding: 16px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}


button {

    width: 100%;

    margin-bottom: 10px;

    padding: 9px;

    font-size: 15px;

}


input[type=range] {

    width: 100%;

    margin-bottom: 18px;

}


#network {

    height: 450px;

    border: 2px dashed #cccccc;

}


#explanation {

    margin-top: 16px;

    padding: 14px;

    background: #f5f5f5;

    border-radius: 8px;

}


#living,
#employment,
#inflation,
#housingIndicator,
#services {

    margin-bottom: 12px;

    padding: 10px;

    background: #f8fafc;

    border-radius: 6px;

}


.conjecture-active {

    background: #2563eb;

    color: white;

    border: none;

    font-weight: bold;

}