/* --- styles.css --- */

/* --- Global Resets & Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa; /* A slightly off-white background */
    /* display: flex; <-- Removed flex from body */
    min-height: 100vh;
    margin: 0; /* Ensure no default body margin */
}

/* --- Layout --- */
.dashboard-container {
    display: flex;
    /* width: 100%; <-- Not strictly necessary with fixed sidebar */
    min-height: 100vh;
}

/* --- 🧭 Left Sidebar (Fixed) --- */
.sidebar {
    width: 240px;
    background-color: #f0f0f5; /* Light gray background */
    border-right: 1px solid #e0e0e0; /* Subtle separator */

    /* --- Fixed Positioning --- */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* Full viewport height */
    z-index: 100; /* Keep on top */
    overflow-y: auto; /* Allow sidebar scroll if needed */
    padding-top: 25px; /* Restore padding */
    /* padding: 25px 0; <-- Or keep original - padding-top might be sufficient */
    /* flex-shrink: 0; <-- Not needed for fixed position */
}

.sidebar nav ul {
    list-style: none;
    padding: 0; /* Ensure no default padding on ul */
    margin: 0; /* Ensure no default margin on ul */
}

.sidebar nav li {
    margin-bottom: 5px;
}

.sidebar .nav-link {
    display: block;
    color: #333; /* Black text */
    text-decoration: none;
    padding: 10px 25px; /* Consistent padding */
    font-size: 0.95em;
    position: relative; /* For the active indicator */
    border-left: 4px solid transparent; /* Placeholder for indicator */
    transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease; /* Added border transition */
}

.sidebar .nav-link:hover {
    background-color: #e9e9f0; /* Subtle hover */
}

.sidebar .nav-link.active {
    font-weight: 600; /* Bold black text */
    color: #0d6efd; /* Blue text for active */
    border-left-color: #0d6efd; /* Blue vertical bar */
    background-color: #e7f0ff; /* Optional light blue background for active */
}

/* --- 📋 Right Panel (Scrollable Content Area) --- */
.main-panel {
    flex-grow: 1; /* Allows panel to take remaining space */
    /* --- REMOVED the large padding-bottom --- */
    padding: 30px 40px; /* Back to original padding */
    background-color: #f8f9fa; /* Match body or slightly different */
    overflow-y: auto; /* Allow THIS panel to scroll its content */

    /* --- Offset for Fixed Sidebar --- */
    margin-left: 240px; /* MUST match .sidebar width */
    min-height: 100vh; /* Ensure it takes at least full height for scroll context */
}

/* --- Panel Sections within Main Panel --- */
.panel-section {
    background-color: #ffffff; /* White background */
    border-radius: 8px; /* Rounded corners */
    padding: 25px 30px; /* Padding inside sections */
    margin-bottom: 25px; /* Spacing between sections */
    border: 1px solid #e0e0e0; /* Subtle border for card effect */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */ /* Optional subtle shadow */
}

.panel-section:last-child {
    margin-bottom: 30px; /* Ensure some reasonable space at the bottom */
}

.panel-section h3 {
    font-size: 1.2em; /* Slightly larger title */
    font-weight: 600; /* Medium-bold */
    margin-bottom: 20px;
    color: #212529;
}

/* --- Form Elements & Controls --- */
.form-row {
    display: flex;
    gap: 25px; /* Spacing between horizontal elements */
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
}

.form-group {
    flex: 1; /* Allow groups to grow */
    min-width: 150px; /* Prevent extreme squishing */
    margin-bottom: 15px; /* Spacing below form groups */
}
.form-group:last-child {
     margin-bottom: 0;
}

.form-row .form-group {
    margin-bottom: 0; /* Reset bottom margin when inside a form-row */
}


label {
    display: block;
    font-weight: 500;
    font-size: 0.9em;
    margin-bottom: 6px;
    color: #495057;
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: #fff; /* Ensure background is white */
    color: #212529; /* Standard input text color */
}
input[type="number"] {
    /* Specific styles for number input if needed */
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

select {
     appearance: none; /* Remove default arrow */
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 0.75rem center;
     background-size: 16px 12px;
     cursor: pointer;
}


/* Segmented Buttons (Mode, Layout) */
.segmented-control {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ced4da;
}

.segment-btn {
    padding: 8px 18px;
    border: none;
    background-color: #ffffff;
    color: #495057;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-right: -1px; /* Overlap borders slightly to avoid double thickness */
    border-right: 1px solid #ced4da; /* Add border between buttons */
}
.segment-btn:first-child {
     border-top-left-radius: 5px; /* Match container */
     border-bottom-left-radius: 5px;
}
.segment-btn:last-child {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     margin-right: 0;
     border-right: none; /* No border on the very right */
}


.segment-btn:hover {
    background-color: #e9ecef;
}

.segment-btn.active {
    background-color: #0d6efd; /* Blue background */
    color: #ffffff; /* White text */
    border-color: #0d6efd; /* Match background (might not be visible due to background) */
    z-index: 1; /* Ensure active button is visually on top if overlapping occurs */
}
.segment-btn.active:hover {
     background-color: #0b5ed7; /* Slightly darker blue on hover */
}

/* Timer Toggle */
.timer-control {
    display: flex; /* Ensure row layout */
    align-items: center;
    gap: 15px; /* Adjusted gap */
    flex-wrap: wrap; /* Allow wrap on small screens */
}

.timer-control .toggle-group {
    display: flex;
    align-items: center;
    gap: 10px;
    /* No flex settings needed here, let it take natural width */
     margin-bottom: 0; /* Remove default bottom margin */
}
.timer-control .duration-group {
     flex: 1; /* Allow duration group to take remaining space */
     min-width: 150px; /* Prevent over-squishing */
     max-width: 200px; /* Limit width */
     margin-bottom: 0; /* Remove default bottom margin */
}

.timer-control .toggle-label {
    margin-bottom: 0; /* Align label vertically */
     cursor: pointer;
     font-weight: 500;
     font-size: 0.9em;
     color: #495057;
}


/* Basic CSS Toggle Switch Style */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0; /* Prevent switch from shrinking */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0d6efd; /* Blue when checked */
}

input:focus + .slider {
  box-shadow: 0 0 1px #0d6efd;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}


/* --- Specific Section Styles --- */

/* Drop Folders Setup */
.btn-add-folder {
    margin-bottom: 20px;
    display: inline-block;
}

/* Style for the container of a single folder's settings */
.folder-instance {
    margin-top: 25px;
    padding-top: 20px;
    position: relative;
}

/* Light separator between folders */
.folder-divider {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 0 0 25px 0; /* Increased margin below divider */
}

/* Hide divider above the very first folder instance */
.drop-folders-section > .folder-instance:first-of-type > .folder-divider {
   display: none;
}
/* Ensure subsequent folders *do* have the divider */
#new-folders-container .folder-instance {
   /* No need for specific rule here anymore, default applies */
}
/* Ensure the divider inside newly added folders is displayed */
#new-folders-container .folder-instance > .folder-divider {
   display: block;
}


/* Content Type Selector */
.content-type-selector {
    margin-bottom: 15px;
}

/* Container for the dynamic input fields */
.content-input-area {
    margin-top: 15px; /* Add space above content/link fields */
}

/* Style the textarea */
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95em;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
    min-height: 120px; /* Slightly taller */
    background-color: #fff;
    color: #212529;
}

textarea:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Style for the remove button */
.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    padding: 6px 12px; /* Slightly smaller padding */
    font-size: 0.85em; /* Smaller font */
}

.btn-danger:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* Positioning for remove button */
.folder-instance .btn-remove-folder {
     float: right; /* Position to the right */
     margin-top: 10px; /* Space above remove button */
     margin-left: 10px; /* Ensure space if other elements float right */
}


/* Style & Layout Options */
.layout-options {
    margin-bottom: 20px;
}

.style-controls {
    display: flex;
    align-items: flex-end;
    gap: 25px;
    flex-wrap: wrap; /* Allow wrapping */
}
.style-controls .form-group {
     flex: 0 1 auto; /* Allow grow/shrink but base on auto */
     margin-bottom: 0; /* Remove bottom margin when in flex row */
}

.color-selector-btn {
    padding: 5px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    height: 40px; /* Match input height */
}
.color-selector-btn:hover {
     border-color: #adb5bd;
}

.color-swatch {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Action Buttons (Preview/Launch Section) */
.action-buttons {
    display: flex;
    gap: 15px;
    /* margin-top: 10px; <-- Removed fixed margin-top, now spacing relies on element above */
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
}

/* --- Button Styles --- */
.btn {
    display: inline-block;
    font-weight: 500;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 8px 18px;
    font-size: 0.95em;
    border-radius: 6px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn:focus-visible {
    outline: 2px solid #0d6efd; /* Accessibility outline */
    outline-offset: 2px;
}


.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-secondary {
    color: #0d6efd;
    background-color: #ffffff;
    border-color: #0d6efd;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-neutral {
    color: #495057;
    background-color: #f8f9fa;
    border-color: #ced4da;
}
.btn-neutral:hover {
     background-color: #e2e6ea;
     border-color: #adb5bd;
}

/* =================================== */
/* == Pre-Flight Check Area Styles == */
/* =================================== */

.preflight-check-area {
    background-color: #f8f9fa; /* Light background, slightly different from section bg */
    border: 1px solid #e0e0e7; /* Subtle border */
    border-radius: 6px;
    padding: 20px 25px;
    margin-top: 10px; /* Space below section title */
    margin-bottom: 30px; /* Space above action buttons */
}

.preflight-check-area h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e7; /* Separator line below title */
    padding-bottom: 10px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-item {
    display: flex;
    justify-content: space-between; /* Push label and value apart */
    align-items: center;
    padding: 8px 0; /* Vertical spacing */
    border-bottom: 1px dashed #e9ecef; /* Subtle dashed separator */
    font-size: 0.95em;
}

.check-item:last-child {
    border-bottom: none; /* No border on the last item */
}

.check-label {
    color: #495057; /* Slightly muted label color */
    font-weight: 500;
    margin-right: 15px; /* Space between label and value */
    flex-shrink: 0; /* Prevent label from shrinking too much */
}

.check-value {
    text-align: right;
    font-weight: 500;
    display: flex; /* Align icon nicely with text */
    align-items: center;
    gap: 6px; /* Space between value text and icon */
    /* Allow value to wrap if needed */
    word-break: break-word; /* Break long words if necessary */
}

/* Status Colors and Icons (using emojis as placeholders) */
.check-value.status-ok {
    color: #198754; /* Green */
}
.check-value.status-warning {
    color: #ffc107; /* Amber */
}
.check-value.status-error {
     color: #dc3545; /* Red */
}
.check-value.status-neutral {
     color: #6c757d; /* Gray */
}

/* Style the placeholder icons (can replace emojis with real icons later) */
.status-icon {
    display: inline-block; /* Keep icon on same line */
    flex-shrink: 0; /* Prevent icon from being pushed off */
    /* font-size: 1.1em; /* Adjust size if needed */
}

/* Overall Status Paragraph */
.overall-status {
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    font-size: 0.95em;
}

.overall-status.status-ok {
    background-color: #d1e7dd; /* Light green */
    border: 1px solid #badbcc;
    color: #0f5132;
}
.overall-status.status-warning {
    background-color: #fff3cd; /* Light amber */
    border: 1px solid #ffecb5;
    color: #664d03;
}
.overall-status.status-error {
    background-color: #f8d7da; /* Light red */
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* --- Utility class for hiding upcoming features (Optional: Keep or Remove) --- */
.feature-hidden {
    display: none !important;
}

/* --- Style for the new Advanced Settings section (optional refinement) --- */
.advanced-settings-content p {
    margin-bottom: 10px;
    color: #495057;
}
.advanced-settings-content p em {
    color: #6c757d;
}

/* styles.css additions */

/* ============================== */
/* == Disabled Section Styling == */
/* ============================== */

.section-disabled {
    opacity: 0.5; /* Make it semi-transparent */
    pointer-events: none; /* Prevent all clicks, hovers, focus within */
    user-select: none; /* Prevent text selection */
    cursor: not-allowed; /* Indicate non-interactive state */
}

/* Optional: Explicitly grey out text inside, although opacity often handles this */
/*
.section-disabled h3,
.section-disabled p,
.section-disabled label {
    color: #6c757d !important; /* Grey text
}
*/

/* ============================== */

/* --- End Pre-Flight Check Styles --- */

/* styles.css additions */

/* ======================== */
/* == Sidebar Additions == */
/* ======================== */

.sidebar {
    /* ... existing styles ... */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    background-color: #f0f0f5;
    border-right: 1px solid #e0e0e0;
    z-index: 100;
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack items vertically */
    padding-top: 0; /* Remove top padding if header handles it */
}

.sidebar-header {
    padding: 20px 25px; /* Adjust padding as needed */
    border-bottom: 1px solid #e0e0e0; /* Separator line */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.sidebar-header .brand-title {
    font-size: 1.3em; /* Adjust size */
    font-weight: 600;
    color: #212529;
    margin: 0;
    line-height: 1.2;
}

.sidebar nav {
    flex-grow: 1; /* Allow nav to take up remaining space */
    overflow-y: auto; /* Allow nav itself to scroll if needed */
    padding: 20px 0; /* Add padding around nav links */
}

.sidebar-footer {
    padding: 15px 25px;
    border-top: 1px solid #e0e0e0; /* Separator line */
    flex-shrink: 0; /* Prevent footer from shrinking */
    text-align: left; /* Align text left */
}

.sidebar-footer p {
    margin: 0 0 5px 0; /* Spacing between lines */
    font-size: 0.8em; /* Smaller font size */
    color: #6c757d; /* Grey color */
    line-height: 1.4;
}
.sidebar-footer p:last-child {
    margin-bottom: 0;
}

/* Adjust main panel margin if sidebar width changed (it hasn't here) */
.main-panel {
    /* ... existing styles ... */
    margin-left: 240px;
}


/* ======================== */

/* styles.css additions */

/* =================================== */
/* == Section 3 Style Refinements == */
/* =================================== */

#style-layout .form-subsection {
    margin-bottom: 25px; /* Space between subsections */
    padding-top: 15px; /* Space above content within subsection */
    border-top: 1px solid #f0f0f5; /* Very light separator */
}
#style-layout .form-subsection:first-of-type {
    border-top: none; /* No border above the first subsection */
    padding-top: 0;
}

#style-layout .subsection-label {
    display: block;
    font-weight: 600; /* Make subsection labels bolder */
    font-size: 1.0em; /* Slightly smaller than h3 */
    margin-bottom: 15px; /* Space below label */
    color: #495057;
}

/* Ensure layout options don't have extra bottom margin now */
#style-layout .layout-options {
    margin-bottom: 0;
}

/* Ensure style controls don't have extra bottom margin now */
#style-layout .style-controls {
    margin-bottom: 0;
    /* Reset alignment if needed, align-items: center might be better now */
    align-items: center;
}

/* Ensure animation toggle group doesn't have extra bottom margin */
#style-layout .toggle-group {
    margin-bottom: 0;
}

/* Adjust spacing if original form-group margins interfere */
.form-subsection > .form-group {
    margin-bottom: 0; /* Remove bottom margin if direct child */
}
.form-subsection > .style-controls > .form-group {
     margin-bottom: 0; /* Remove bottom margin if inside style-controls */
}


/* =================================== */

/* styles.css additions */

/* ========================================= */
/* == Section 2: Horizontal Tab Styles == */
/* ========================================= */

/* Container for the whole tab system */
.folder-tab-container-horizontal {
    margin-top: 20px; /* Space below section header */
    /* Remove border from container, apply to list/content */
}

/* Horizontal Tab List Styling */
.folder-tab-list-horizontal {
    display: flex; /* Align tabs and add button horizontally */
    align-items: center; /* Vertically align items in the tab bar */
    border-bottom: 1px solid #dee2e6; /* Standard tab separator line */
    margin-bottom: 20px; /* Space between tabs and content */
    overflow-x: auto; /* Allow horizontal scrolling if tabs overflow */
    overflow-y: hidden; /* Hide vertical overflow */
    padding-bottom: 0; /* Remove padding if border is used */

    /* Styling for scrollbar (optional, webkit example) */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ced4da #f8f9fa; /* Firefox */
}
.folder-tab-list-horizontal::-webkit-scrollbar {
    height: 6px; /* Height of scrollbar */
}
.folder-tab-list-horizontal::-webkit-scrollbar-track {
    background: #f8f9fa; /* Track color */
}
.folder-tab-list-horizontal::-webkit-scrollbar-thumb {
    background-color: #ced4da; /* Thumb color */
    border-radius: 3px;
    border: 1px solid #f8f9fa; /* Padding around thumb */
}


.folder-tab-list-horizontal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Make list items flex items */
    flex-wrap: nowrap; /* Prevent tabs from wrapping */
}

.folder-tab-list-horizontal li {
    margin: 0;
}

/* Individual Tab Button Styling */
.folder-tab {
    display: block;
    padding: 10px 18px; /* Adjust padding */
    border: 1px solid transparent; /* Transparent border initially */
    border-bottom: none; /* No bottom border */
    margin-bottom: -1px; /* Overlap the main border-bottom */
    background: none;
    font-size: 0.95em;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    border-top-left-radius: 4px; /* Slight rounding */
    border-top-right-radius: 4px;
    white-space: nowrap; /* Prevent text wrapping */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    position: relative; /* For potential close icon */
}

.folder-tab:hover {
    background-color: #e9ecef;
    border-color: #e9ecef #e9ecef #dee2e6; /* Match background, connect to bottom */
    color: #0d6efd;
}

.folder-tab.active {
    background-color: #ffffff; /* White background for active tab */
    border-color: #dee2e6 #dee2e6 #ffffff; /* Connect borders */
    color: #0d6efd;
    font-weight: 600;
}

/* Add Folder Button Styling */
.btn-add-folder-tab {
    /* Use flex-shrink to prevent it from shrinking */
    flex-shrink: 0;
    margin-left: 10px; /* Space next to tabs */
    padding: 6px 8px; /* Small padding for icon button */
    line-height: 1; /* Align '+' icon better */
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    color: #495057;
    border-radius: 4px;
    font-size: 1.2em; /* Make '+' slightly larger */
    font-weight: bold;
    cursor: pointer;
}
.btn-add-folder-tab:hover {
     background-color: #e2e6ea;
     border-color: #adb5bd;
}


/* Tab Content Area Styling */
.folder-tab-content-horizontal {
    /* Content area doesn't need much specific styling now */
    /* Background comes from panel-section, padding is handled inside pane */
}

/* Individual Tab Pane Styling */
.folder-tab-pane {
    display: none; /* Hide all panes by default */
    padding: 20px; /* Add padding inside the pane */
    border: 1px solid #dee2e6; /* Border for the content area */
    border-top: none; /* Remove top border as tabs handle it */
    border-radius: 0 0 6px 6px; /* Round bottom corners */
    background-color: #ffffff; /* Ensure white background */
    animation: fadeIn 0.3s ease-in-out; /* Simple fade-in */
}

.folder-tab-pane.active {
    display: block; /* Show only the active pane */
}

/* Optional Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Adjust remove button style within pane */
.folder-tab-pane .btn-remove-folder {
    margin-top: 20px; /* Ensure space above */
}

/* ========================================= */

/* styles.css updates */

/* =================================== */
/* == Pre-Launch Check Area Styles (Revised) == */
/* =================================== */

.preflight-check-area {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e7;
    border-radius: 6px;
    padding: 20px 25px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.preflight-check-area h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e7;
    padding-bottom: 10px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Using CSS Grid for 3-column layout */
.check-item {
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr auto; /* Label | Value (stretches) | Icon */
    gap: 15px; /* Gap between columns */
    align-items: center;
    padding: 10px 0; /* Vertical padding */
    border-bottom: 1px dashed #e9ecef;
    font-size: 0.95em;
    position: relative; /* For potential background/border styling */
}

.check-item:last-child {
    border-bottom: none;
}

.check-label {
    grid-column: 1 / 2; /* Place in first column */
    color: #495057;
    font-weight: 500;
    white-space: nowrap; /* Prevent label wrapping */
}

.check-value {
    grid-column: 2 / 3; /* Place in second column */
    font-weight: 500;
    color: #212529; /* Default value color */
    word-break: break-word; /* Allow long values to wrap */
    text-align: left; /* Align value left */
}

.check-status-icon {
    grid-column: 3 / 4; /* Place in third column */
    font-size: 1.2em; /* Make icon slightly larger */
    text-align: center;
    line-height: 1; /* Prevent extra line height */
    width: 25px; /* Give icon fixed width */
}

/* Status Specific Styling */

/* OK Status (Default/Subtle) */
.check-status-icon.status-ok {
     color: #198754; /* Green icon */
}

/* Warning Status */
.check-item.status-warning {
    background-color: #fff3cd; /* Light amber background for the whole row */
    border-left: 4px solid #ffc107; /* Amber left border */
    padding-left: 10px; /* Indent content slightly */
    margin-left: -10px; /* Counteract padding to align border */
    border-radius: 0 4px 4px 0; /* Optional rounding */
}
.check-item.status-warning .check-label {
    /* color: #664d03; Optional darker label */
}
.check-item.status-warning .check-value {
    color: #664d03; /* Darker amber text for value */
    font-weight: 600;
}
.check-item.status-warning .check-status-icon {
    color: #ffc107; /* Amber icon */
}

/* Error Status */
.check-item.status-error {
    background-color: #f8d7da; /* Light red background */
    border-left: 4px solid #dc3545; /* Red left border */
    padding-left: 10px;
    margin-left: -10px;
    border-radius: 0 4px 4px 0;
}
.check-item.status-error .check-label {
     /* color: #842029; Optional darker label */
}
.check-item.status-error .check-value {
    color: #842029; /* Darker red text */
    font-weight: 600;
}
.check-item.status-error .check-status-icon {
    color: #dc3545; /* Red icon */
}


/* Overall Status Paragraph - Stronger Highlighting */
.overall-status {
    margin-top: 20px;
    padding: 12px 15px; /* Slightly more padding */
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    font-size: 1.0em; /* Slightly larger */
    border: none; /* Remove default border if any */
}

.overall-status.status-ok {
    background-color: #198754; /* Darker Green */
    color: #ffffff; /* White text */
}
.overall-status.status-warning {
    background-color: #ffc107; /* Amber */
    color: #342100; /* Dark text for contrast on amber */
}
.overall-status.status-error {
    background-color: #dc3545; /* Red */
    color: #ffffff; /* White text */
}

/* --- End Pre-Launch Check Styles --- */

/* styles.css additions */

/* ===================================== */
/* == Section 1: Mode Preview Styles == */
/* ===================================== */

#visual-mode-indicator {
    /* Existing styles: margin-top, border-top, padding-top */
    min-height: 100px; /* Give it some space */
}

/* Wrapper for each preview - controls visibility */
.mode-preview-wrapper {
    display: none; /* Hide by default */
    text-align: center;
    animation: fadeIn 0.3s ease-in-out; /* Reuse fade */
}
.mode-preview-wrapper.active {
    display: block; /* Show active preview */
}

/* Common styling for the preview box */
.mode-preview {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make blocks same height */
    gap: 8px;
    background-color: #e9ecef; /* Light grey background */
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    min-height: 60px; /* Minimum height */
    margin-bottom: 8px;
}

/* Individual blocks inside the preview */
.preview-block {
    background-color: #ffffff;
    border: 1px solid #adb5bd;
    border-radius: 3px;
    padding: 8px;
    font-size: 0.8em;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1; /* Allow blocks to grow */
}

/* Specific styles per preview type */
.content-preview .preview-block.main {
    /* Style for the single content block */
    flex-basis: 100%; /* Take full width */
    font-weight: 500;
}

.puzzle-preview .preview-block {
    /* Style for puzzle blocks */
    flex-basis: 30%; /* Roughly equal width */
}

.contest-preview .preview-block.rank {
    /* Style for contest blocks */
    flex-basis: 30%;
    font-weight: 600;
}
.contest-preview .preview-block.rank:first-child {
    border-color: #ffc107; /* Highlight first place */
    color: #664d03;
}

/* Description text below the preview */
.mode-preview-desc {
    font-size: 0.85em;
    color: #6c757d;
    margin: 0;
    padding: 0;
}

/* ===================================== */

/* styles.css additions */

/* ============================== */
/* == Section Info Icon Styles == */
/* ============================== */

/* Make H3 a flex container to position icon */
.section-header { /* Add this class to all section H3 tags */
    display: flex;
    justify-content: space-between; /* Pushes title and icon apart */
    align-items: center;
    /* Inherit original h3 styles like margin-bottom etc. */
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 20px;
    color: #212529;
}

.section-header > span:first-child {
     /* Title span takes available space */
     flex-grow: 1;
     padding-right: 10px; /* Space between title and icon */
}

.section-info-icon {
    display: inline-flex; /* Use inline-flex for alignment */
    align-items: center;
    justify-content: center;
    font-size: 0.8em; /* Make icon slightly smaller than title */
    font-weight: bold;
    color: #6c757d; /* Grey color */
    background-color: #e9ecef; /* Light grey background */
    border-radius: 50%; /* Make it circular */
    width: 22px; /* Fixed width */
    height: 22px; /* Fixed height */
    line-height: 1; /* Ensure text centers vertically */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0; /* Prevent icon from shrinking */
    user-select: none; /* Prevent text selection */
}

.section-info-icon:hover {
    background-color: #ced4da;
    color: #212529;
}

/* Styling for disabled section - ensure icon is also disabled */
.section-disabled .section-info-icon {
    pointer-events: none; /* Already handled by parent, but good practice */
    /* Opacity is inherited from parent */
}


/* ============================== */


/* --- Panel Sections within Main Panel --- */
.panel-section {
    /* ... existing styles ... */
    margin-bottom: 25px; /* Spacing between sections */
}

.panel-section:last-child {
    /* --- Increased bottom margin for more space at the end --- */
    margin-bottom: 60px; /* Increased from 30px (Adjust as needed) */
}