/* Custom styles to match the image */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f0f2f5; /* Light grey background */
        }
        .header-bg {
            background: linear-gradient(to right, #fcd34d, #fde047); /* Yellow gradient for header */
            border-bottom: 1px solid #eab308; /* Darker yellow border */
        }
        .header-content {
            display: flex;
            align-items: center;
            justify-content: center; /* Center content horizontally */
            /* padding: 10px 0; */
        }
        .header-logo {
            /* height: 80px; Adjust as needed */
            /* margin-right: 20px; */
            width: 100%;
            display: block;
            
        }
        .header-text {
            color: #b91c1c; /* Red color for text */
            font-size: 2.25rem; /* text-4xl */
            font-weight: 700; /* font-bold */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Subtle shadow */
            line-height: 1.2;
            text-align: center;
        }
        .header-subtext {
            color: #ef4444; /* Slightly lighter red */
            font-size: 1.5rem; /* text-2xl */
            font-weight: 500;
        }
        .side-panel {
            background-color: #fef2f2; /* Light red background for panel */
            border: 1px solid #ef4444; /* Red border */
            border-radius: 0.5rem;
        }
        .side-panel-header {
            background-color: #ef4444; /* Red background for header */
            color: white;
            padding: 0.75rem 1rem;
            font-weight: 700;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            margin-bottom: 0; /* Remove bottom margin */
        }
        .section-header {
            background-color: #fef2f2; /* Light red for section headers */
            border-bottom: 1px solid #fca5a5;
            padding: 0.75rem 1rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #be123c; /* Darker red text */
        }
        .section-content {
            padding: 1rem;
            background-color: #fff; /* White background for content */
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            border: 1px solid #fca5a5;
            border-top: none; /* No top border */
        }
        .section-content.hidden {
            display: none;
        }
        .upload-area {
            border: 2px dashed #eab308; /* Yellow dashed border */
            background-color: #fff;
            padding: 2rem;
            text-align: center;
            color: #a16207; /* Darker yellow text */
        }
        .upload-icon {
            color: #fcd34d; /* Yellow icon */
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
        .frame-preview-container {
            border: 1px solid #e5e7eb; /* Light grey border */
            background-color: #fff;
            padding: 1rem;
            border-radius: 0.5rem;
        }
        .frame-thumb {
            border: 2px solid transparent;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            opacity: 0.8;
        }
        .frame-thumb.selected {
            border-color: #ef4444; /* Red border for selected */
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
            opacity: 1;
        }
        .control-group {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        .control-group label {
            width: 80px; /* Fixed width for labels */
            margin-right: 10px;
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* grey-700 */
        }
        input[type=range] {
            flex-grow: 1;
            -webkit-appearance: none;
            background: transparent;
            cursor: pointer;
            height: 4px;
        }
        input[type=range]:focus {
            outline: none;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #ef4444; /* Red thumb */
            margin-top: -6px;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            background: #fca5a5; /* Lighter red track */
            border-radius: 4px;
        }
        input[type=range]::-moz-range-thumb {
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #ef4444;
            border: none;
        }
        input[type=range]::-moz-range-track {
            width: 100%;
            height: 4px;
            background: #fca5a5;
            border-radius: 4px;
        }
        /* Styling for the canvas placeholder */
        #placeholder-text {
            background-color: #fff;
            border: 1px dashed #eab308; /* Yellow dashed border */
            color: #a16207; /* Darker yellow text */
            padding: 2rem;
            text-align: center;
            font-size: 0.9rem;
        }
        #placeholder-text h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .download-button {
            background-color: #dc2626; /* Red-600 */
            color: white;
            font-weight: 700;
            padding: 0.75rem 1.5rem;
            border-radius: 0.375rem;
            transition: background-color 0.2s;
        }
        .download-button:hover {
            background-color: #b91c1c; /* Red-700 */
        }
        .download-button:disabled {
            background-color: #fca5a5; /* Red-300 */
            cursor: not-allowed;
        }
        .footer-text {
            color: #6b7280; /* Gray-500 */
            font-size: 0.875rem;
        }