*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #f4f7f9;
color: #333;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

h2, h3 {
margin-bottom: 0.75em;
color: #2c3e50;
}

/* --- Utility Classes --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

/* --- Card Styling --- */
.card { background-color: #ffffff; border: 1px solid #e0e6ed; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin-bottom: 25px; width: 100%; max-width: 800px; padding: 0; }
.card-header { background-color: #e9ecef; color: #495057; padding: 12px 20px; border-bottom: 1px solid #e0e6ed; border-top-left-radius: 8px; border-top-right-radius: 8px; font-size: 1.1em; font-weight: 600; }
.card-body { padding: 20px; }

/* --- Button Styling & SVG Icons --- */
.btn {
display: inline-flex; /* For aligning icon and text */
align-items: center; /* Vertically center icon and text */
justify-content: center; /* Horizontally center icon and text if only icon */
font-weight: 500; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.5rem 1rem; font-size: 0.95rem; line-height: 1.5; border-radius: 0.3rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 5px;
}
.btn svg {
width: 1em; /* Adjust as needed */
height: 1em; /* Adjust as needed */
margin-right: 0.4em; /* Space between icon and text */
fill: currentColor; /* Icon color inherits from button text color */
}
.btn.icon-only svg { /* For buttons that might only have an icon */
    margin-right: 0;
}
.btn:disabled { opacity: 0.65; cursor: not-allowed; }
.btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; }
.btn-primary:hover { background-color: #0069d9; border-color: #0062cc; }
.btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); }
.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-secondary:hover { background-color: #5a6268; border-color: #545b62; }
.btn-secondary:focus { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); }
.btn-success { color: #fff; background-color: #28a745; border-color: #28a745; }
.btn-success:hover { background-color: #218838; border-color: #1e7e34; }
.btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); }
.btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-danger:hover { background-color: #c82333; border-color: #bd2130; }
.btn-danger:focus { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); }
.btn-warning { color: #212529; background-color: #ffc107; border-color: #ffc107; }
.btn-warning:hover { background-color: #e0a800; border-color: #d39e00; }
.btn-warning:focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); }
.btn-info { color: #fff; background-color: #17a2b8; border-color: #17a2b8; }
.btn-info:hover { background-color: #138496; border-color: #117a8b; }
.btn-info:focus { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: 0.2rem; }
.btn-sm svg { width: 0.8em; height: 0.8em; margin-right: 0.3em;}


/* --- Input & Select Styling --- */
.file-input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.file-input + label { display: inline-flex; align-items: center; } /* Adjusted for icon */
.select-input, .time-input { display: inline-block; padding: 0.4rem 0.8rem; font-size: 0.9rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 0 5px; }
.select-input:focus, .time-input:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.time-input { width: 110px; text-align: center; }
input[type="range"] { width: 120px; height: 8px; -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 5px; outline: none; opacity: 0.9; transition: opacity .15s ease-in-out; vertical-align: middle; }
input[type="range"]:hover { opacity: 1; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #007bff; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: #007bff; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
.checkbox-input { margin-right: 5px; vertical-align: middle; }

/* --- Specific Section Styling --- */
#masterPreviewSection .preview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 15px; }
.time-display { font-family: 'Courier New', Courier, monospace; font-size: 1.1em; background-color: #e9ecef; padding: 5px 10px; border-radius: 4px; min-width: 200px; text-align: center; }
.status-message, .error-message, .info-note { padding: 8px 12px; border-radius: 4px; margin-top: 10px; font-size: 0.9em; }
.status-message { background-color: #e6f7ff; border: 1px solid #91d5ff; color: #0050b3; }
.error-message { background-color: #fff1f0; border: 1px solid #ffccc7; color: #cf1322; }
.info-note { background-color: #f0f0f0; border: 1px solid #d9d9d9; color: #595959; }
#globalControlsSection .control-group { margin-bottom: 15px; }
#globalControlsSection label { margin-right: 8px; font-weight: 500; }
#tracksContainer { display: flex; flex-direction: column; gap: 20px; }
.track-slot-header { font-size: 1em; }
.track-upload-ui { padding: 15px 0; display: flex; align-items: center; gap: 10px; }
.file-name-display { font-style: italic; color: #6c757d; font-size: 0.9em; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-controls-wrapper .control-section { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #e0e6ed; }
.track-controls-wrapper .control-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.track-solo-play, .track-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.track-action-buttons { justify-content: flex-start; }
.marker-control { display: flex; align-items: center; margin-bottom: 10px; gap: 5px; }
.marker-control label { min-width: 95px; font-weight: 500; }
.marker-control .time-input { flex-grow: 1; max-width: 120px; }
.track-volume-controls div { display: flex; align-items: center; margin-bottom: 8px; gap: 8px; }
.track-volume-controls label { min-width: 70px; font-weight: 500; }
.volume-display { font-size: 0.9em; min-width: 40px; text-align: right; color: #495057; }
.track-loop-control label { vertical-align: middle; margin-left: 5px; }

/* --- Collapsible Section Styling --- */
.collapsible-btn {
    display: flex; /* Use flex to align icon and text */
    align-items: center;
    background-color: #f0f0f0; color: #333; cursor: pointer; padding: 10px 15px; width: 100%; border: 1px solid #ddd; border-bottom: none; text-align: left; outline: none; font-size: 0.9em; font-weight: bold; margin-top: 15px; border-radius: 4px 4px 0 0; transition: background-color 0.2s ease;
}
.collapsible-btn svg.indicator-icon { /* Specific styling for indicator SVGs */
    width: 1em; height: 1em;
    margin-left: auto; /* Push to the right */
    margin-right: 0; /* Remove default btn svg margin */
    transition: transform 0.2s ease-in-out;
}
.collapsible-btn.active svg.indicator-icon {
    transform: rotate(45deg); /* Or different SVG for 'minus' */
}
.collapsible-btn:disabled { background-color: #e9ecef; color: #6c757d; cursor: not-allowed; }
.collapsible-btn:hover:not(:disabled) { background-color: #e0e0e0; }
.collapsible-btn.active:not(:disabled) { background-color: #d5d5d5; }
.collapsible-btn.active { border-radius: 4px 4px 0 0; }
.collapsible-content { padding: 0; display: none; overflow: hidden; background-color: #f9f9f9; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; }
.collapsible-content .control-section { padding: 15px; margin-bottom: 0; }
.collapsible-content .control-section:last-child { border-bottom: none; }

/* Final Actions & Post Save */
.action-group { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.final-actions-group .btn { padding: 0.75rem 1.5rem; font-size: 1rem; }
.post-save-area .download-button { display: block; width: fit-content; margin: 0 auto 20px auto; padding: 0.8rem 2rem; font-size: 1.1rem; }
.processed-player audio { width: 100%; margin-bottom: 15px; }
.upload-new-post-save { display: block; margin: 15px auto 0 auto; }

/* Responsive adjustments */
@media (max-width: 600px) {
    body { padding: 10px; }
    .card-body, .card-header { padding: 15px; }
    .btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
    .final-actions-group .btn { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
    .time-display { font-size: 1em; min-width: 180px; }
    .marker-control { flex-direction: column; align-items: flex-start; gap: 5px; }
    .marker-control label { min-width: auto; margin-bottom: 3px; }
    .track-volume-controls div { flex-direction: column; align-items: flex-start; gap: 5px; }
    .track-volume-controls label { min-width: auto; margin-bottom: 3px; }
    input[type="range"] { width: 100%; }
    .collapsible-btn { font-size: 0.85em; padding: 8px 12px; }
    .collapsible-content .control-section { padding: 10px; }
}