body {
    background-color: #f9f9f9;
    font-family: Arial, sans-serif; /* A more common, readable font */
}

.container {
    max-width: 1200px; /* Limit container width for better readability */
}

/* Step tabs styling */
.step-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-radius: 4px; /* Consistent border-radius */
    overflow: hidden; /* Ensures child borders are contained */
}

.step-tabs .step {
    flex: 1;
    text-align: center;
    padding: 12px 10px; /* Slightly more vertical padding */
    border: 1px solid #e0e0e0; /* Lighter border */
    background-color: #f0f0f0; /* Lighter background */
    font-weight: 500;
    color: #555; /* Softer text color */
    transition: all 0.3s ease; /* Smooth transition for active state */
}

.step-tabs .step.active {
    background-color: #434242;
    color: #fff;
    border-color: #434242; /* Match border to background */
}

/* Drawing canvas styling */
#svgCanvas {
    background-color: #fff;
    border: 2px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Softer shadow */
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-radius: 8px; /* Rounded corners for the canvas */
}

/* Button styling */
.btn-dark {
    background-color: #343a40; /* Darker default for contrast */
    border-color: #343a40;
    transition: background-color 0.2s ease;
}

.btn-dark:hover {
    background-color: #434242;
    border-color: #434242;
    color: #fff; /* Ensure text color stays white */
}

/* Click prompt styling */
#clickPrompt {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    animation: fadeOut 3s forwards; /* Increased duration for better visibility */
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-weight: bold;
}

@keyframes fadeOut {
    0% { opacity: 1; display: block; }
    80% { opacity: 1; } /* Stay visible for most of the duration */
    100% { opacity: 0; display: none; }
}

/* Table styling */
.table {
    margin-bottom: 20px;
}
.table thead th {
    background-color: #f0f0f0;
    border-bottom: 2px solid #dee2e6;
}
.table tbody td {
    vertical-align: middle;
}