/* --- Modern 3D style variables --- */
    :root {
      --surface: rgba(255,255,255,0.08);
      --surface-strong: rgba(255,255,255,0.12);
      --text: #e9eefb;
      --muted: #a8b2c8;
      --primary: #7aa2ff;
      --secondary: #59e1a9;
      --accent: #ff7ad9;
      --radius: 18px;
      --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
      --shadow-2: 0 30px 60px rgba(0,0,0,0.45);
    }
    body {
      margin: 0;
      font-family: Inter, system-ui, sans-serif;
      color: var(--text);
    }
    .scene {
      min-height: 100vh;
      perspective: 1000px;
      padding: 24px;
    }
    .header-wrapper {
      width: 100%;          /* full width wrapper */
      text-align: center;   /* centers inline-block children */
    }
    .header-container {
      background: rgba(255, 255, 255, 0.1); /* glassmorphism layer */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 20px 40px;
      text-align: center;
      /* Fit to text size */
      display: inline-block;
      /* Center horizontally */
      margin: 25px auto; 
    }
    .header-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      color: #00e0ff; /* fallback solid color */
      background: linear-gradient(90deg, #00e0ff, #7873f5);
      /* Standard + vendor-prefixed properties */
      background-clip: text;              /* standard */
      -webkit-background-clip: text;      /* Chrome/Safari */
      -moz-background-clip: text;         /* Firefox */
    
      -webkit-text-fill-color: transparent; /* Chrome/Safari */
      -moz-text-fill-color: transparent;    /* Firefox */
      margin: 0;
    }
    .header-subtitle {
      font-family: 'Poppins', sans-serif;
      font-size: 1.2rem;
      color: #ffffff;
      opacity: 0.9;
      margin-top: 8px;
    }
    .subtitle {
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      color: #ffffff;
      opacity: 0.7;
      margin-top: 12px;
    }
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
      gap: 24px;
    }
    .card {
      background: linear-gradient(180deg,var(--surface),var(--surface-strong));
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      padding: 20px;
      transition: transform 0.6s, box-shadow 0.6s;
    }
    .card:hover {
      transform: rotateX(3deg) rotateY(-3deg) translateZ(18px);
      box-shadow: var(--shadow-2);
    }
    .card-title {
      margin-bottom: 12px;
      font-weight: 600;
    }
    .btn {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 16px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      font-weight: 600;
      color: #0b0f17;
    }
    .btn-primary { background: var(--primary); }
    .btn-secondary { background: var(--secondary); }
    .btn-accent { background: var(--accent); }
    #camera, #results img {
      margin-top: 20px;
      border: 2px solid #ccc;
      border-radius: 12px;
      max-width: 100%;
    }
    .video-background {
      /* Desktop: side by side horizontally */
      flex-direction: row;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      z-index: -1; /* behind UI */
    }
    .bg-video {
      flex: 1;
      width: 33.333%;   /* desktop: each video takes 1/3 width */
      height: 100%;
      object-fit: cover;
    }
    /* Mobile: stack vertically */
    @media (max-width: 768px) {
      .video-background {
        flex-direction: column;
      }
      .bg-video {
        width: 100%;
        height: 33.333%; /* each video takes 1/3 height */
      }
    }
    /* Overlay to reduce visibility */
    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.25); /* 30% black overlay */
      pointer-events: none;        /* don’t block clicks */
    }
    .notice-container {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 20px;
      margin: 20px auto;
      width: 80%;
      color: #fff;
      font-family: 'Poppins', sans-serif;
      text-align: left;
    }
    .notice-container h2 {
      margin-top: 0;
      font-size: 1.5rem;
      color: #ff6ec4;
    }
    .modal {
      display: none; /* hidden by default */
      position: fixed;
      z-index: 999;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
    }
    .modal-content {
      text-align: center;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 20px;
      margin: 10% auto;
      width: 60%;
      color: #fff;
      font-family: 'Poppins', sans-serif;
    }
    .modal-body {
      display: flex;
      justify-content: center;
      align-items: center;
      max-height: 100%;   /* prevent vertical overflow */
      max-width: 100%;    /* prevent horizontal overflow */
      overflow: auto;     /* scrollbars if image is larger */
      padding: 0;         /* remove extra spacing */
    }
    #modalImage {
      max-height: 100%;
      max-width: 100%;
      height: auto;
      width: auto;
    }
    .scroll-container {
      width: 100%;
      height: 80vh;        /* modal body height */
      overflow: 90vh;      /* scrollbars for both planes */
      text-align: center;  /* center image */
      cursor: grab;
    }
    
    .scroll-container:active {
      cursor: grabbing;
    }
    
    #zoomedImage {
      display: block;
      margin: auto;
      max-width: 100%;       /* fit horizontally on open */
      max-height: 100%;      /* fit vertically on open */
      transform-origin: center; /* important: zoom from top-left so scrollbars reveal all */
      transform: scale(1);
      transition: transform 0.2s ease;
    }