:root {
      --scanner-ink: #12211b;
      --scanner-muted: #60716a;
      --scanner-accent: #b8862b;
      --scanner-primary: #064e3b;
      --scanner-surface: #fbfcfb;
    }

    body {
      background-color: #f1f5f9;
      background-image: 
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.07), transparent 32rem),
        radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.05), transparent 32rem);
    }
    select option {
      background-color: #ffffff !important;
      color: #0f172a !important;
      padding: 8px 12px;
    }

    @media (orientation: portrait) and (max-width: 600px) {
      header {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
      }

      header h1 {
        font-size: 1rem !important;
      }

      #event-subtitle {
        font-size: 0.8rem !important;
        max-width: 12rem !important;
      }

      #socket-badge,
      #qr-scanner-event-select,
      #manual-qr-input,
      form button {
        font-size: 0.95rem !important;
      }

      #qr-scanner-event-select,
      #manual-qr-input,
      form button {
        min-height: 3rem;
      }

      .qr-scanner-shell {
        border-radius: 1.1rem !important;
      }
    }

.scanner-inline-e5eae45d { animation-delay:0.8s }

.scanner-inline-6509fdab { width:14px; height:14px; }