body {
    font-family: sans-serif;
    text-align: center;
    margin: 10px;
    touch-action: none;
}

#chart-container {
    width: 95%;
    max-width: 500px;
    height: 400px;
    margin: 10px auto;
    border: 1px solid #ccc;
    position: relative;
    background-color: #f9f9f9;
}

svg#chart {
    display: block;
    width: 100%;
    height: 100%;
}

/* Point Styles */
.data-point-train {
    fill: steelblue;
    opacity: 0.7;
}

.data-point-test {
    fill: orange;
    opacity: 0.9;
    stroke: #333;
    stroke-width: 0.5px;
}

/* Line Styles */
.user-line { /* User's draggable line */
    stroke: firebrick;
    stroke-width: 2.5px; /* Make it slightly thicker */
    stroke-linecap: round;
}

.handle {
    fill: red;
    stroke: darkred;
    stroke-width: 1px;
    cursor: move;
}

/* Calculated Regression Lines */
.calculated-line { /* Common class for calculated lines */
    stroke-width: 1.5px;
    stroke-linecap: round;
    pointer-events: none; /* Don't interfere with dragging */
}

.line-y-on-x {
    stroke: #2ecc71; /* Green */
    stroke-dasharray: 4, 2; /* Dashed line */
}

.line-x-on-y {
    stroke: #9b59b6; /* Purple */
    stroke-dasharray: 8, 4; /* Longer dashes */
}

.line-orthogonal {
    stroke: #f39c12; /* Orange/Gold */
    stroke-dasharray: 1, 3; /* Dotted line */
}


#controls {
    margin: 15px 0;
}

#controls hr {
    margin: 10px 0;
}

button {
    padding: 8px 12px; /* Slightly smaller padding */
    font-size: 0.9em; /* Slightly smaller font */
    margin: 5px;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 4px;
    background-color: #555; /* Default BG */
}

/* Specific Button Colors */
#test-button { background-color: #e74c3c; } /* Red */
#reset-button { background-color: #3498db; } /* Blue */
#show-y-on-x { background-color: #27ae60;} /* Green */
#show-x-on-y { background-color: #8e44ad;} /* Purple */
#show-orthogonal { background-color: #d35400;} /* Orange */
#clear-calc-lines { background-color: #7f8c8d;} /* Grey */


button:hover {
    opacity: 0.85;
}

#score-area {
    margin-top: 15px;
    font-size: 1.1em;
}

#score {
    font-weight: bold;
    color: #c0392b; /* Darker Red for score */
}

#score-feedback {
    font-style: italic;
    color: #555;
}