:root {
        --main-color: #8b0000; /* Dark Red */
        --hover-color: #ff4500; /* Orangered - a brighter red for hover */
        --text-color: #fff; /* White text */
        --background-color: #343a40; /* Dark background from Bootstrap dark theme */
        --secondary-background-color: #212529; /* Even darker background for elements */
    }
    
    body {
        background-color: var(--background-color);
        color: var(--text-color);
        min-height: 100vh;
    }
    
    .container {
        max-width: 1000px;
        margin: 50px auto;
        padding: 30px;
        background: var(--secondary-background-color);
        border-radius: 15px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    
    #drop-zone {
        border: 3px dashed var(--main-color);
        padding: 40px 20px;
        text-align: center;
        margin: 25px 0;
        transition: 0.3s;
        cursor: pointer;
        background: var(--secondary-background-color);
    }
    
    #drop-zone:hover {
        background: #444; /* Slightly lighter dark */
        border-color: var(--hover-color);
    }
    
    .alert {
        margin-top: 20px;
        padding: 15px;
        border-radius: 8px;
    }
    
    .btn-primary {
        background-color: var(--main-color);
        border-color: var(--main-color);
    }
    
    .btn-primary:hover {
        background-color: var(--hover-color);
        border-color: var(--hover-color);
    }
    
    .text-primary {
        color: var(--main-color) !important;
    }
    .text-danger{
        color: var(--hover-color) !important;
    }
    
    /* Custom styles for dark theme */
    .form-control, .form-select, pre, code {
        background-color: #343a40;
        color: #fff;
        border-color: #6c757d;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }
    
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }
    
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    
    .modal-content {
        background-color: var(--secondary-background-color);
    }
    
    .modal-header, .modal-footer {
        border-color: #6c757d;
    }
    
    #product-list-value li {
        background-color: var(--secondary-background-color);
        border: 1px solid #6c757d;
        margin-bottom: 5px;
        padding: 8px;
        border-radius: 4px;
    }