:root {
    --mbg-green: #198754;
    --mbg-dark: #111111;
}

body {
    min-height: 100vh;
}

.navbar-brand {
    letter-spacing: 0.2px;
}

.camera-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.camera-wrapper video,
.camera-wrapper canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.camera-wrapper video {
    object-fit: cover;
}

.camera-wrapper canvas {
    pointer-events: none;
}

.card {
    border-radius: 12px;
}

.food-result {
    border-left: 4px solid var(--mbg-green);
}

.scan-card {
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.scan-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0.5rem 1rem
        rgb(0 0 0 / 12%);
}

#previewImage {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    background: #f8f9fa;
}

@media (max-width: 576px) {
    .camera-wrapper {
        aspect-ratio: 4 / 3;
    }

    h1 {
        font-size: 2rem;
    }
}