/* Base */
:root{
  --blue:#00c9ff;
  --dark:#001a33;
  --dark2:#002a55;
  --txt:#e6faff;
}
*{box-sizing:border-box}
body{
  font-family:Inter,system-ui,Arial;
  background:linear-gradient(180deg,var(--dark),var(--dark2));
  color:var(--txt);
  margin:0;
  text-align:center;
}
.header{ padding:30px 10px 15px; }
h1{ color:#7ff6ff; margin:0 0 6px; }
p{ color:#cfeff8; }

/* Top buttons */
.report-options{
  display:flex; justify-content:center; gap:10px; margin-top:15px;
}
.btn{
  background:var(--blue); color:#002033; border:none;
  padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer;
}
.btn.good{ background:#00ff99; }
.btn.bad{ background:#ff5050; }
.btn.both{ background:#444; color:#fff; }
.btn:hover{ filter:brightness(1.08); }

/* Meter */
.meter-section{ max-width:680px; margin:26px auto 54px; padding:0 12px; }
.meter-shell{
  position:relative; padding-top:40px; /* space for badge */
}
.score-wrap{
  position:relative; height:56px; width:100%;
  background:rgba(255,255,255,.08);
  border-radius:28px; overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
}
.progress-bar{ position:absolute; inset:0; border-radius:28px; }
.progress-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg,#ff2e2e,#ffed5e,#00ff8c);
  transform-origin:left; transform:scaleX(1); transition:transform 1s ease;
}
.grade-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-45%);
  background:linear-gradient(145deg,#ffffff 0%,#cce6ff 60%,#99cfff 100%);
  color:#003355; font-weight:900; font-size:28px;
  padding:6px 16px; border-radius:12px; z-index:2;
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.85);
  text-shadow:0 2px 4px rgba(255,255,255,.4);
}
.score-value{ color:#bfefff; margin-top:10px; font-size:15px; }

/* Badge animations */
@keyframes shine { 0%{background-position:-120px 0} 50%{background-position:220px 0} 100%{background-position:-120px 0} }
.grade-badge.shine{
  background:linear-gradient(120deg,#ffffff 0%,#cce6ff 40%,#ffffff 60%,#99cfff 100%);
  background-size:200% 100%; animation:shine 3s linear infinite;
}
@keyframes pulseDanger {
  0%,100%{ box-shadow:0 0 16px rgba(255,50,50,.65), inset 0 0 8px rgba(255,0,0,.35); }
  50%{ box-shadow:0 0 26px rgba(255,0,0,.95), inset 0 0 12px rgba(255,0,0,.55); }
}
.grade-badge.dangerPulse{
  background:linear-gradient(145deg,#ffb0b0,#ff4040);
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6);
  animation:pulseDanger 1.8s ease-in-out infinite;
}

/* Floating report button */
#quickReportBtn{
  position:fixed; bottom:20px; right:20px; z-index:1000;
  font-size:28px; background:var(--blue); color:#002033; border:none;
  border-radius:50%; width:60px; height:40px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
#quickReportBtn:hover{ transform:scale(1.06); }

/* PWA install button (hidden by default) */
#pwaInstallBtn{
  position:fixed; bottom:20px; left:20px; z-index:1000; display:none;
  background:#00a6ff; color:#fff; border:none; border-radius:22px;
  padding:10px 14px; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4);
}
#pwaInstallBtn.show{ display:inline-block; }

/* Modal */
#quickModal{
  position:fixed; inset:0; background:rgba(0,0,0,.78);
  display:none; align-items:center; justify-content:center; z-index:999;
}
#quickModal.active{ display:flex; }
.modal-content{
  background:linear-gradient(145deg,#012b3d,#00455f); border-radius:16px;
  padding:16px; width:92%; max-width:640px; text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.6);
}
.modal-content h3{ color:#7ff6ff; margin:6px 0 10px; }

/* Tabs */
.tab-nav{ display:flex; justify-content:space-around; gap:8px; margin-bottom:10px; }
.tab-btn{
  flex:1; background:rgba(255,255,255,.1); color:#bfefff; border:none;
  padding:10px; font-weight:800; border-radius:10px; cursor:pointer;
}
.tab-btn.active{ background:var(--blue); color:#001a33; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Tiles */
.issue-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:10px; margin:12px 0 10px;
}
.issue-tile{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 6px; color:#eaffff;
  font-size:22px; cursor:pointer; transition:all .25s ease; user-select:none;
}
.issue-tile span{ display:block; margin-top:4px; font-size:12px; color:#bfefff; }
.issue-tile.active{
  background:var(--blue); color:#001a33; transform:scale(1.05);
  box-shadow:0 0 10px rgba(0,255,255,.65);
}
.issue-tile.danger.active{
  background:#ff4040; color:#fff; box-shadow:0 0 12px rgba(255,0,0,.75);
}

/* Show more */
.show-toggle{
  background:none; border:1px dashed rgba(255,255,255,.35);
  color:#cfeff8; border-radius:10px; padding:8px 12px; cursor:pointer;
}

/* Actions */
.modal-actions{ display:flex; justify-content:center; gap:12px; margin-top:12px; }
.btn-outline{
  background:none; border:1px solid var(--blue); color:var(--blue);
  padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer;
}

/* Footer */
footer{ margin:38px 0; color:#7ff6ff; font-size:13px; }
.footer-link{ color:#00c9ff; text-decoration:none; font-weight:800; }
/* Last report receipt */
.receipt{
  max-width:680px; margin:16px auto 0; padding:14px 14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; text-align:left;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.receipt.hidden{ display:none; }
.receipt-head{
  display:flex; justify-content:space-between; align-items:center;
  color:#bfefff; margin-bottom:6px;
}
.receipt-body{ color:#e6faff; line-height:1.5; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
  background:#00c9ff; color:#001a33; padding:10px 16px; border-radius:10px;
  font-weight:800; box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:1100;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* Optional mini inputs inside modal */
.mini-fields{ display:flex; gap:8px; margin:8px 0 10px; }
.mini-fields input{
  flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#e6faff; padding:8px 10px; border-radius:8px; outline:none;
}
.floating-grade {
  position: absolute;
  top: 20px;
  right: 12px;
  font-size: 40px;
  font-weight: 900;
  color: #00ffcc;
  text-shadow: 0 0 16px rgba(0,255,255,.65);
}
document.getElementById("geoBtn")?.addEventListener("click", () => {
  if (!navigator.geolocation) {
    alert("Geolocation not supported.");
    return;
  }
  navigator.geolocation.getCurrentPosition(async (pos) => {
    const { latitude, longitude } = pos.coords;
    try {
      // Use free OpenStreetMap reverse geocode
      const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}`);
      const data = await res.json();
      document.getElementById("miniAddress").value = data.display_name || `${latitude}, ${longitude}`;
    } catch {
      document.getElementById("miniAddress").value = `${latitude}, ${longitude}`;
    }
  }, () => alert("Location access denied."));
});
.recent{
  margin:40px auto 60px;
  max-width:680px;
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
.recent h3{color:#7ff6ff;margin-top:0;}
.recent-list{color:#e6faff;text-align:left;line-height:1.6;font-size:14px;}
.recent-list div{border-bottom:1px solid rgba(255,255,255,.1);padding:6px 0;}
.recent-list small{color:#9fd9ff;}
.link-cta{color:#00c9ff;font-weight:800;text-decoration:none;}
.signup-hint{margin-top:8px;color:#cfeff8;text-align:center;font-size:13px;}
@keyframes fadeInUp {
  0% { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}
.recent-item {
  opacity:0;
  animation: fadeInUp 0.4s ease forwards;
}
.recent-list.pulse {
  box-shadow:0 0 14px rgba(0,255,255,.4);
  transition:box-shadow 0.4s ease;
}