/* Basic Reset & Body Styles */
body {
    font-family: sans-serif; /* Use a common sans-serif font */
    line-height: 1.6;      /* Improve readability */
    margin: 0;             /* Remove default body margin */
    padding: 20px;         /* Add some padding around the content */
    background-color: #f4f4f4; /* Light grey background */
    color: #333;           /* Dark grey text color */
}

/* Container for Centering (Optional) */
/* If you want to center the content with a max-width, wrap <main> in a div with class="container" */
/*
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
*/

/* Header and Footer */
header, footer {
    text-align: center;
    margin-bottom: 20px;
}

footer {
    margin-top: 30px;
    font-size: 0.9em;
    color: #777;
}

/* Main Content Area */
main {
    max-width: 700px; /* Limit width for better readability */
    margin: 0 auto;    /* Center the main content */
    background-color: #fff; /* White background for content */
    padding: 25px;
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* Section Styling */
section {
    margin-bottom: 25px;
    padding-bottom: 15px;
}

h1 {
    color: #1a237e; /* Dark blue heading */
}

h2 {
    color: #3949ab; /* Slightly lighter blue */
    border-bottom: 1px solid #eee; /* Underline for separation */
    padding-bottom: 5px;
    margin-top: 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 30px 0;
}

/* Button Styling */
button {
    padding: 10px 15px;
    font-size: 1em;
    color: #fff;
    background-color: #1976d2; /* Blue background */
    border: none;
    border-radius: 4px;
    cursor: pointer; /* Indicate it's clickable */
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

button:hover {
    background-color: #1565c0; /* Darker blue on hover */
}

/* Input Field Styling */
input[type="text"] {
    padding: 8px 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px; /* Space between input and button */
    min-width: 200px; /* Give it some width */
}

/* Display Area Styling */
#trn-display-area, #feedback-display-area {
    margin-top: 15px;
    padding: 15px;
    background-color: #e8f5e9; /* Light green background */
    border: 1px solid #c8e6c9; /* Green border */
    border-radius: 4px;
}

#trn-value {
    font-weight: bold;
    font-size: 1.2em;
    color: #2e7d32; /* Darker green text */
    display: block; /* Put TRN on its own line */
    margin-top: 5px;
}

#feedback-placeholder {
    color: #777;
    font-style: italic;
}

/* Style the image when it becomes visible */
#target-image {
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* max-width is already set inline, but good practice */
    max-width: 100%;
    height: auto;
    display: block; /* Make it a block element */
}

/* Error Message Area */
#error-message-area {
    margin-top: 10px;
    color: #d32f2f; /* Red color for errors */
    font-weight: bold;
}