/* Mengatur font secara global jika tidak diatur oleh Tailwind */
body {
    font-family: 'Inter', sans-serif; /* Menggunakan Inter sebagai font utama */
}

/* Base styling untuk elemen button yang tidak di-override oleh Tailwind classes */
button {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex; /* Agar ikon dan teks sejajar */
    align-items: center;
    justify-content: center;
}

/* Styling untuk result box yang mungkin perlu sedikit lebih spesifik dari Tailwind */
.result-box.error {
    background-color: #f8d7da; /* Warna latar belakang untuk error */
    border-color: #f5c6cb;     /* Warna border untuk error */
    color: #721c24;           /* Warna teks untuk error */
}

/* Styling untuk result box yang sukses atau default */
.result-box {
    text-align: left; /* Teks di dalam box rata kiri */
    word-wrap: break-word; /* Memastikan teks panjang tidak keluar dari box */
    /* Pastikan warna default jika tidak ada success/error */
    background-color: #f0f0f0; 
    border-color: #d0d0d0;
    color: #333;
}

/* Warna spesifik untuk result box sukses */
.result-box.bg-green-50 {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.result-box.bg-blue-50 {
    background-color: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

/* Warna untuk loading/memproses */
.result-box.bg-gray-50 {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
}

/* Video element untuk memastikan rasio aspek dan penyesuaian */
video {
    max-width: 100%;
    height: auto;
    display: block; /* Pastikan tidak ada spasi di bawahnya */
}

/* Menyesuaikan video dan canvas agar proporsional */
#video, #canvas {
    width: 100%;
    /* Gunakan rasio aspek 4:3 atau 16:9 yang umum untuk webcam */
    /* Contoh: padding-top: 75%; untuk 4:3 (height is 75% of width) */
    /* Contoh: padding-top: 56.25%; untuk 16:9 */
    /* Untuk object-fit: cover, pastikan parent memiliki tinggi */
    height: 300px; /* Tinggi tetap agar tampilan konsisten, objek akan fit */
    object-fit: cover; /* Memastikan video mengisi kotak tanpa distorsi */
}

/* Responsifitas untuk tata letak umum jika diperlukan */
@media (max-width: 640px) {
    .mode-buttons {
        flex-direction: column; /* Tombol mode akan stack vertikal di layar kecil */
    }
}