* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Minimal custom CSS to complement Tailwind utilities
       Keep classes used/modified by JS (status-bar, alert, results-container, scanRegion, animations). */

    /* Status bar variants are toggled by JS; base layout is handled via Tailwind classes in HTML. */
    .status-bar.ready {
      background: rgba(34, 197, 94, 0.2);
      color: #dcfce7;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .status-bar.scanning {
      background: rgba(59, 130, 246, 0.2);
      color: #dbeafe;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
      animation: pulse 1.5s ease-in-out infinite;
    }
    .status-bar.error {
      background: rgba(244, 67, 54, 0.12);
      color: #63171b;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.75; }
    }

    /* Alert box visibility */
    .alert { display: none; }
    .alert.active { display: block; }
    .alert.error { background: #ff5252; color: white; }
    .alert.success { background: #16a34a; color: white; }
    .alert.info { background: #0ea5e9; color: white; }

    /* Results container visibility toggled by JS */
    .results-container { display: none; }
    .results-container.active { display: block; }

    /* Scan region overlay (kept in CSS because of complex box-shadow and animation) */
    #scanRegion {
      position: absolute;
      border: 3px solid rgba(34,197,94,1);
      box-shadow: 0 0 0 99999px rgba(0,0,0,0.5), inset 0 0 16px rgba(34,197,94,0.25);
      pointer-events: none;
      animation: scanPulse 2s ease-in-out infinite;
    }

    @keyframes scanPulse {
      0%,100% { box-shadow: 0 0 0 99999px rgba(0,0,0,0.5), inset 0 0 16px rgba(34,197,94,0.25); border-color: rgba(34,197,94,1);} 
      50%  { box-shadow: 0 0 0 99999px rgba(0,0,0,0.6), inset 0 0 24px rgba(34,197,94,0.45); border-color: rgba(74,222,128,1);} 
    }

    /* Raw data box (monospace) */
    .raw-data { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace; white-space: pre-wrap; }

    /* Make sure video fills its container; layout/responsive handled by Tailwind utilities */
    #videoElement { width: 100%; height: 100%; object-fit: cover; display:block; }