:root {
  --bg:#0b0f17; 
  --card:rgba(255,255,255,.06); 
  --stroke:rgba(255,255,255,.18);
  --text:#eef2ff; 
  --muted:#a4acc4; 
  --radius:22px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --success:#10b981; 
  --warning:#f59e0b;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  margin: 0; color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  background:
    radial-gradient(600px 300px at 10% -20%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(600px 300px at 110% 20%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(450px 250px at 50% 120%, rgba(245,158,11,.12), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: 1200px; 
  margin-inline: auto; 
  padding: clamp(24px,4vw,48px); 
  display: flex; 
  flex-direction: column; 
  gap: clamp(24px,3vw,36px);
}

/* Panels */
.panel {
  background: var(--card); 
  border: 1px solid var(--stroke); 
  border-radius: var(--radius); 
  box-shadow: var(--shadow); 
  padding: clamp(16px,2vw,20px);
}

/* Anonymous banner */
.anonymous-banner {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(6,182,212,.15));
  border: 1px solid rgba(139,92,246,.3);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
}
.banner-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.banner-text { color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.banner-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Device instructions */
.device-grid { display: grid; gap: 16px; }
.howto-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .howto-grid { grid-template-columns: 1fr; } }
.howto-block { background: rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:16px; padding:14px; }
.howto-block h4, .howto-block h3 { color:#dbe2ff; margin:0 0 .4rem; }
.howto-block p { color: var(--muted); margin:.3rem 0; line-height:1.5; }

/* QR and capture */
.qrBox {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* Tablet two-option layout: QR on left, direct camera on right */
.tablet-options {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.tablet-option {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.tablet-option h4 { color: #dbe2ff; margin: 0; }
.tablet-option p  { color: var(--muted); margin: 0; line-height: 1.5; font-size: 14px; }

/* CTA buttons */
.cta { --h:46px; display:inline-flex; align-items:center; gap:10px; height:var(--h); padding:0 18px; border-radius:calc(var(--h)/2);
  background: radial-gradient(80% 120% at 0% 0%, rgba(139,92,246,.35), transparent),
              radial-gradient(80% 120% at 100% 100%, rgba(6,182,212,.35), transparent),
              linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color: var(--text); text-decoration:none; font-weight:600; letter-spacing:.2px;
  border:1px solid var(--stroke); box-shadow:var(--shadow); cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .3s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.cta-secondary { background: rgba(255,255,255,.06); border: 1px solid var(--stroke); }
.cta-secondary:hover { background: rgba(255,255,255,.1); }

/* XL CTA for mobile */
.cta-xl { --h:72px; font-size:20px; font-weight:700; padding:0 40px; min-width:280px; justify-content:center;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4); border:2px solid rgba(255,255,255,.3);
  box-shadow:0 12px 40px rgba(139,92,246,.2), inset 0 1px 0 rgba(255,255,255,.15);
}
.cta-xl:hover { transform:translateY(-4px); background:linear-gradient(135deg,#9d6eff,#14b8d4); }

/* Camera modal */
.camera-modal { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:1000; display:none; align-items:center; justify-content:center; }
.camera-container { background:var(--card); border:1px solid var(--stroke); border-radius:20px; padding:24px; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; gap:20px; align-items:center; }

/* Photo preview */
.photo-preview { background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:20px; text-align:center; display:none; }
.photo-preview h4 { color: var(--text); margin-bottom: 12px; }
.photo-preview img { max-width: 100%; max-height: 40dvh; object-fit: contain; border-radius: 8px; }

/* Camera video: cap height so controls remain visible */
#cameraVideo { max-width: 100%; max-height: 50dvh; object-fit: cover; border-radius: 8px; }

/* Report container */
#reportContainer { height: 80vh; border-radius: 18px; border:1px solid var(--stroke); box-shadow: var(--shadow); overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }

/* Guest panel for anonymous users */
.guest-panel {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(6,182,212,.15));
  border: 1px solid rgba(139,92,246,.3);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: clamp(24px,3vw,36px);
  box-shadow: var(--shadow);
}
.guest-panel h3 {
  color: var(--text);
  margin-bottom: 12px;
}
.guest-panel p {
  color: var(--muted);
  line-height: 1.6;
}


/* Power BI Layout Adjustments */
#report-section.panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 700px;
  padding: 1.5rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background-color: #0b0f17;
  box-shadow: var(--shadow);
  margin-top: 2rem;
  width: 100%;
}

/* Power BI Container */
#powerbi-container {
  flex: 1;
  width: 100%;
  min-height: 650px;
  border: 1px solid #444;
  border-radius: 8px;
  background-color: #0e1117;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* Make it wider and centered on large screens */
@media (min-width: 1200px) {
  #report-section.panel {
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Mobile & tablet responsive overrides ── */
@media (max-width: 768px) {
  .wrap {
    padding: clamp(12px, 4vw, 20px);
    gap: clamp(16px, 3vw, 24px);
  }

  /* Power BI: drop fixed min-height, let aspect-ratio drive height */
  #report-section.panel {
    min-height: unset;
    padding: 1rem;
    margin-top: 1rem;
  }
  #powerbi-container {
    min-height: unset;
    /* 16:9 naturally fits the width; fallback height for very short screens */
    min-height: min(56vw, 320px);
  }

  /* XL camera button: fit the screen width */
  .cta-xl {
    min-width: unset;
    width: 100%;
    font-size: 18px;
    --h: 60px;
  }

  /* Tablet two-column option splits: stack on phones */
  .tablet-options { flex-direction: column; }

  /* Header actions: wrap tightly */
  .header-actions {
    gap: 8px !important;
  }
}

/* ══ Data source selection ══════════════════════════════════════════════ */
.ds-header { margin-bottom: 20px; }
.ds-title  { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.ds-sub    { color: var(--muted); font-size: 14px; margin: 0; }

.data-source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .data-source-grid { grid-template-columns: 1fr; } }

.ds-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 2px solid var(--stroke);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, background .2s;
  outline: none;
  user-select: none;
}
.ds-card:hover,
.ds-card:focus-visible { border-color: rgba(139,92,246,.5); background: rgba(139,92,246,.06); }
.ds-card.selected      { border-color: #8b5cf6; background: rgba(139,92,246,.1); }

.ds-check {
  position: absolute; top: 12px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #8b5cf6; color: #fff;
  font-size: 12px; display: none;
  align-items: center; justify-content: center;
}
.ds-card.selected .ds-check { display: flex; }

.ds-icon { font-size: 28px; line-height: 1; }
.ds-name { font-size: 15px; font-weight: 600; color: var(--text); }
.ds-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* Expandable extra area */
.ds-extra {
  border-top: 1px solid var(--stroke);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ds-extra-label { font-size: 13px; font-weight: 600; color: var(--text); }
.ds-extra-hint  { font-weight: 400; color: var(--muted); }

/* Keyword tag input */
.tag-input-wrap {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  cursor: text;
  min-height: 44px;
}
.tag-input-wrap:focus-within { border-color: #8b5cf6; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(139,92,246,.2); border: 1px solid rgba(139,92,246,.4);
  border-radius: 20px; padding: 3px 10px 3px 12px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.kw-tag-remove {
  background: none; border: none; padding: 0;
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center;
}
.kw-tag-remove:hover { color: #fca5a5; }
.tag-input {
  flex: 1; min-width: 140px;
  background: none; border: none; outline: none;
  color: var(--text); font-size: 13px; font-family: inherit;
}
.tag-input::placeholder { color: var(--muted); }

/* CSV file selector */
.csv-file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--stroke);
  border-radius: 10px; padding: 8px 14px;
  font-size: 13px; color: var(--text);
  transition: background .15s;
}
.csv-file-btn:hover { background: rgba(255,255,255,.12); }
.csv-file-btn input[type="file"] { display: none; }
#csv-filename { color: var(--muted); }
#csv-filename.has-file { color: #34d399; font-weight: 600; }

/* Continue button row */
.ds-footer { margin-top: 20px; display: flex; justify-content: center; }

/* Selection badge (shown in capture section) */
.ds-selection-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25);
  border-radius: 20px; padding: 6px 16px;
  font-size: 13px; color: var(--text); margin-bottom: 16px;
}
.badge-change {
  background: none; border: none; padding: 0;
  color: #8b5cf6; font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: underline; font-family: inherit;
}