body {
    background-color: #f8f9fa; /* Light gray background */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font stack */
    padding-bottom: 3rem; /* Space for footer */
}

.app-card {
    border: none; /* Remove default card border */
    border-radius: 0.75rem; /* Softer corners */
    background-color: #ffffff; /* White card background */
    overflow: hidden; /* Ensure shadows and rounded corners work well */
    transition: box-shadow 0.3s ease-in-out;
}

.app-card:hover {
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; /* Slightly more prominent shadow on hover */
}

h1.display-5 {
    color: #343a40; /* Darker heading */
}
h1 .text-primary {
    font-weight: 600; /* Make 'with Logo' slightly bolder */
}

.form-label {
    font-weight: 500; /* Slightly bolder labels */
    color: #495057;
}
.form-text {
    font-size: 0.8rem; /* Smaller help text */
}
.form-check .form-text {
    margin-top: 0.1rem; /* Reduce space above help text for checkbox */
    margin-left: -1.5em; /* Align help text with label text */
    padding-left: 1.5em; /* Add padding to align */
}


/* Style the color input */
.form-control-color {
    min-height: calc(1.5em + .75rem + 2px); /* Match height of other inputs */
    padding: .375rem; /* Adjust padding */
}
/* Style disabled color input */
.form-control-color:disabled {
    background-color: #e9ecef; /* Standard disabled background */
    opacity: 0.7;
    cursor: not-allowed;
}


/* QR Code container styling */
.qrcode-container {
    width: 100%;
    max-width: 350px; /* Slightly larger max width */
    aspect-ratio: 1 / 1; /* Maintain square shape */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6; /* Subtle border */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden; /* Hide anything overflowing */
    /* Add subtle background pattern to indicate transparency better in preview */
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Canvas specific styling */
#qr-canvas {
    display: block; /* Remove extra space */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Remove border radius from canvas itself if container handles transparency */
    /* border-radius: 4px; */
}

/* Hide placeholder when canvas has content (handled by JS) */
#qr-canvas:not([width='0']) + #output-placeholder {
    display: none;
}
#qr-canvas[width='0'] {
    display: none; /* Hide canvas if it has no width */
}


/* Buttons */
.btn-primary {
    background-color: #0d6efd; /* Bootstrap primary */
    border-color: #0d6efd;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-outline-secondary {
     transition: background-color 0.2s ease, color 0.2s ease;
}

/* Ensure download buttons only show when intended */
#download-buttons:not([style*="display: none"]) {
    display: flex !important;
}

/* Style disabled SVG button */
#download-svg-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Logo filename style */
#logo-filename {
    word-break: break-all; /* Prevent long filenames from breaking layout */
}

/* Style error/warning messages */
#error-message, #logo-error-message, #svg-disabled-warning {
    font-size: 0.9rem;
    text-align: center;
}

/* Footer */
footer {
    color: #6c757d; /* Match text-muted */
}
footer a {
    color: #6c757d;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
    color: #495057;
}

/* Responsive adjustments */
@media (max-width: 991px) { /* Adjust breakpoint for layout change */
     .qrcode-container {
        margin-top: 1.5rem; /* Add space above QR code on medium/small screens */
    }
}

@media (max-width: 767px) {
    .qrcode-container {
        max-width: 280px; /* Smaller QR code on smaller screens */
    }
    .card-body {
        padding: 1.5rem !important; /* Less padding inside card on small screens */
    }
    h1.display-5 {
        font-size: 1.8rem; /* Smaller main title */
    }
    .lead {
        font-size: 1rem;
    }
    .form-check .form-text {
        margin-left: 0; /* Reset alignment helper on small screens if needed */
        padding-left: 0;
    }
}