/* --- Global Resets & Variables (Same as before) --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --card-min-width: 280px; 
    --primary-color: #007bff; 
    --primary-hover-color: #0056b3;
    --success-color: #28a745;
    --success-hover-color: #1e7e34;
    --danger-color: #dc3545;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #6c757d;
    --text-color: #212529;
    --border-radius: 6px;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Define a threshold for when we switch to the 4-column explicit layout */
    /* (4 * card-min-width) + (3 * gap) approx. (4*280) + (3*20) = 1120 + 60 = 1180px */
    /* Let's use a slightly smaller threshold to ensure it kicks in */
    --layout-4-col-threshold: 1150px; 
    /* Threshold for 3 columns: (3*280) + (2*20) = 840 + 40 = 880px */
    --layout-3-col-threshold: 880px;
    /* Threshold for 2 columns: (2*280) + (1*20) = 560 + 20 = 580px */
    --layout-2-col-threshold: 580px; 
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--light-gray); color: var(--text-color); line-height: 1.6; font-size: 15px; }

/* --- App Layout (Same as before) --- */
.app-container-full-page { display: flex; flex-direction: column; min-height: 100vh; }
.app-header { background-color: #fff; padding: 15px 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-bottom: 1px solid var(--medium-gray); text-align: center; z-index: 10; }
.app-header h1 { font-size: 1.6em; color: var(--primary-color); margin: 0; }
.sidebar-controls-main-panel { flex-grow: 1; padding: 20px; overflow-y: auto; }

/* --- Options Panel Grid (UPDATED for explicit column counts on wider screens) --- */
.options-panel {
    display: grid;
    gap: 20px; /* Space between cards */
    /* Default to auto-fit for smaller screens up to 2-column layout */
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
}

/* Apply 4 columns for screens wide enough for the 4-3 layout */
@media (min-width: var(--layout-4-col-threshold)) {
    .options-panel {
        grid-template-columns: repeat(4, 1fr); /* Explicitly 4 columns */
    }
    /* Card 5 (Corner Styles) needs to span if we want it wider than others on the second row */
    /* However, if we want a 4-3 split, Card 5 will just be the first on the second row. */
    /* If Card 5 itself should be wider than other cards on the second row (e.g., span 2 of 3 potential slots),
       we'd need a more complex setup or target it specifically.
       For a simple 4 then 3, Card 5 just starts the new row.
       The internal flex for corner styles will make it *appear* wider if its content needs it.
    */
}

/* For screens that can fit 3 but not 4 cards comfortably */
@media (min-width: var(--layout-3-col-threshold)) and (max-width: calc(var(--layout-4-col-threshold) - 1px)) {
    .options-panel {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* For screens that can fit 2 but not 3 cards comfortably */
@media (min-width: var(--layout-2-col-threshold)) and (max-width: calc(var(--layout-3-col-threshold) - 1px)) {
    .options-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Single column for cards on small screens (mobile) */
@media (max-width: calc(var(--layout-2-col-threshold) - 1px)) {
    .options-panel {
        grid-template-columns: 1fr !important; /* Force single column */
    }
    .sidebar-controls-main-panel { padding: 15px; }
    .options-group.card { padding: 15px; }
    .app-header h1 { font-size: 1.4em; }
    .corner-styles-container { flex-direction: column; } /* Stack corner sections vertically */
}


/* --- Card Styling (Same as before) --- */
.options-group.card { background-color: #fff; border: 1px solid var(--medium-gray); border-radius: var(--border-radius); padding: 20px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
.options-group.card h4 { font-size: 1.15em; color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--medium-gray); }
.options-group.card h5 { font-size: 1em; color: #444; margin-top: 10px; margin-bottom: 8px; font-weight: 600; }

/* --- Form Elements (Same as before) --- */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.9em; color: #555; }
.form-group label.checkbox-label { display: inline-block; margin-left: 8px; font-weight: normal; vertical-align: middle; cursor: pointer; }
input[type="checkbox"] { vertical-align: middle; width: auto; margin-right: 5px; cursor: pointer; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: var(--border-radius); font-size: 0.95em; background-color: #fff; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
input:focus, textarea:focus, select:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid #ced4da; border-radius: var(--border-radius); background-color: #fff; cursor: pointer; }
input[type="file"] { padding: 8px; }
textarea { resize: vertical; min-height: 70px; }
select { appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; padding-right: 30px; }
.gradient-controls { border-left: 3px solid var(--primary-color); padding-left: 10px; margin-top: 10px; margin-left: 5px; }
.gradient-controls .form-group label { font-size: 0.85em; }
hr.subtle-hr { border: none; border-top: 1px solid var(--medium-gray); margin: 15px 0; }

/* --- Styles for Corner Styles Card Internal Layout (Same as before) --- */
.corner-styles-container { display: flex; flex-wrap: wrap; gap: 20px; }
.corner-style-section { flex: 1; min-width: calc(var(--card-min-width) / 2 - 30px); /* Adjusted min-width slightly */ }

/* --- Live Preview Card Specifics (Same as before) --- */

#live-preview-container-sidebar { width: 100%; aspect-ratio: 1 / 1; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; background-color: #fff; overflow: hidden; margin-bottom: 10px; position: relative; }
#live-preview-container-sidebar canvas, #live-preview-container-sidebar img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
#preview-placeholder-message-sidebar { color: var(--dark-gray); text-align: center; padding: 10px; position: absolute; }

/* --- Contrast Checker UI Elements (Same as before) --- */
#contrast-checker-ui-container { margin-top: 10px; font-size: 0.85em; }
.contrast-feedback { padding: 8px; border-radius: var(--border-radius); margin-bottom: 8px; text-align: center; font-weight: 500; }
.contrast-bar-container { width: 100%; height: 15px; background-color: var(--medium-gray); border-radius: var(--border-radius); overflow: hidden; margin-bottom: 8px; }
.contrast-bar { height: 100%; width: 0%; transition: width 0.3s ease, background-color 0.3s ease; }
.button-small { padding: 6px 12px; font-size: 0.8em; width: auto; background-color: var(--dark-gray); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; }
.button-small:hover { background-color: #5a6268; }
.image-info-text { font-size: 0.8em; color: #777; text-align: center; margin-top: 5px; }

/* --- Action Buttons Footer (Same as before) --- */
.action-buttons-footer { padding: 15px 25px; background-color: #fff; border-top: 1px solid var(--medium-gray); box-shadow: 0 -2px 4px rgba(0,0,0,0.05); text-align: center; position: sticky; bottom: 0; z-index: 5; }
.action-buttons-footer button { width: auto; min-width: 200px; padding: 12px 25px; background-color: var(--success-color); color: white; border: none; border-radius: var(--border-radius); font-size: 1em; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; }
.action-buttons-footer button:hover { background-color: var(--success-hover-color); }
.error { color: var(--danger-color); font-size: 0.9em; font-weight: 500; margin-top: 10px; }

/* Media query for the "Corner Styles" card's internal layout when the card itself is narrow */
/* This applies when the main grid puts the card into a narrow slot. */
@media (max-width: calc(var(--card-min-width) * 1.5)) { /* Example: if card is less than 1.5x its min-width */
    .corner-styles-container {
        flex-direction: column; /* Stack sections if card is too narrow for side-by-side */
    }
    .corner-style-section {
        min-width: 100%; /* Take full width when stacked */
    }
}