/* ═══════════════════════════════════════════════════════
   AreaPulse Camera App
   Colors: Terracotta #B85042 · Green #2D6A4F · Amber #B7770D
           Blue #1B4F72 · Sand #F5EFE6
   Fonts : DM Serif Display · DM Sans
═══════════════════════════════════════════════════════ */

:root {
  --accent: #B85042; --green: #2D6A4F; --amber: #B7770D;
  --blue: #1B4F72; --sand: #F5EFE6;
  --sev-high: #B85042; --sev-med: #B7770D; --sev-low: #2D6A4F;
}

*, *::before, *::after {
  margin:0; padding:0; box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
html, body {
  width:100%; height:100%; overflow:hidden; background:#111;
  font-family:'DM Sans', system-ui, sans-serif;
  color:#fff; -webkit-font-smoothing:antialiased;
}
.screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.screen.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════
   SCREEN 0 — LOGIN
═══════════════════════════════════════════════════════ */
#s-login { background:#111; padding:24px; overflow-y:auto; }
.login-card {
  background:#1a1a1a; border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:32px 28px;
  width:100%; max-width:360px;
  display:flex; flex-direction:column; align-items:center;
  gap:16px; text-align:center;
}
.login-brand { display:flex; align-items:center; gap:8px; font-family:'DM Serif Display',serif; font-size:22px; }
.login-brand em, .login-brand-name em { color:#B85042; font-style:normal; }
.login-title { font-family:'DM Serif Display',serif; font-size:26px; color:#fff; margin-top:-4px; }
.login-sub { font-size:13px; color:rgba(255,255,255,0.55); line-height:1.5; max-width:280px; }
.login-input {
  width:100%; padding:14px 16px; border-radius:10px;
  border:1.5px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.07); color:#fff;
  font-size:16px;       /* 16px stops iOS Safari zoom-on-focus */
  font-family:'DM Sans',sans-serif; outline:none;
  transition:border-color 0.15s;
}
.login-input::placeholder { color:rgba(255,255,255,0.35); }
.login-input:focus { border-color:#B85042; }
.login-register { font-size:12.5px; color:rgba(255,255,255,0.5); text-decoration:none; margin-top:-4px; }
.login-register:hover { color:#B85042; }
.login-note { font-size:11px; color:rgba(255,255,255,0.3); line-height:1.4; }

/* ═══════════════════════════════════════════════════════
   SCREEN 1 — CAMERA
═══════════════════════════════════════════════════════ */
#vid { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block; background:#1a1a1a; }
#ar  { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* Top bar */
.cam-topbar {
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:max(env(safe-area-inset-top,0px),12px) 12px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 100%);
  gap:8px;
}
.cam-logo {
  font-family:'DM Serif Display',serif;
  font-size:17px; display:flex; align-items:center; gap:7px;
  flex-shrink:0;
}
.cam-logo em { color:#B85042; font-style:normal; }
.cam-logo-dot {
  width:8px; height:8px; border-radius:50%;
  background:#B85042; box-shadow:0 0 10px #B85042;
  animation:pulse-dot 2s infinite;
}
.topbar-right {
  display:flex; align-items:center; gap:6px;
  flex-wrap:nowrap; min-width:0;
}
.cam-gps {
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); padding:5px 9px; border-radius:18px;
  font-size:10.5px; font-weight:500; color:rgba(255,255,255,.9);
  white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis;
}
.topbar-pill {
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(8px); color:rgba(255,255,255,0.9);
  padding:5px 10px; border-radius:18px;
  font-size:10.5px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; letter-spacing:0.3px;
  transition:background 0.15s, border-color 0.15s;
  min-height:30px; white-space:nowrap;
}
.topbar-pill:hover, .topbar-pill:active { background:rgba(184,80,66,0.4); border-color:rgba(184,80,66,0.5); }

/* AR side panels */
.ar-left-panel  { position:fixed; left:10px;  top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; gap:8px; max-width:160px; }
.ar-right-panel { position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; gap:8px; max-width:140px; align-items:flex-end; }

.ar-detect-card {
  background:rgba(15,15,15,0.85); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12); border-left:4px solid #B85042;
  border-radius:12px; padding:11px 13px;
  animation: popin-left .4s cubic-bezier(.175,.885,.32,1.275);
}
.card-label    { font-size:9px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,0.5); margin-bottom:4px; }
.card-value    { font-size:15px; font-weight:800; letter-spacing:0.3px; line-height:1.1; }
.card-value-sm { font-size:12px; font-weight:700; color:#fff; line-height:1.2; }
.card-sub      { font-size:10px; color:rgba(255,255,255,0.65); margin-top:4px; }

.ar-popup-title {
  font-size:9px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,0.7);
  background:rgba(0,0,0,0.55); backdrop-filter:blur(8px);
  padding:6px 10px; border-radius:8px; text-align:center;
  animation: popin-right .4s cubic-bezier(.175,.885,.32,1.275);
}
.ar-ngo-popup {
  background:rgba(15,15,15,0.85); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12); border-left:3px solid #2D6A4F;
  border-radius:10px; padding:9px 11px; cursor:pointer;
  animation: popin-right .45s cubic-bezier(.175,.885,.32,1.275);
  transition:transform .15s;
}
.ar-ngo-popup:active { transform:scale(.96); }
.ngo-popup-name  { font-size:11.5px; font-weight:700; color:#fff; line-height:1.25; }
.ngo-popup-focus { font-size:9.5px; color:rgba(255,255,255,0.55); margin-top:2px; }
.ngo-popup-dist  { display:flex; align-items:center; gap:5px; font-size:10px; color:#6FCF97; font-weight:700; margin-top:5px; }
.ngo-popup-dot   { width:5px; height:5px; border-radius:50%; background:#6FCF97; box-shadow:0 0 6px #6FCF97; }

/* Status pill */
.status-pill {
  position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:15;
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px); padding:6px 12px; border-radius:18px;
  font-size:11px; color:rgba(255,255,255,.9);
  max-width:90vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.status-ico { font-size:12px; flex-shrink:0; }

/* Coords strip */
.coords-strip {
  position:fixed; bottom:96px; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'DM Sans', monospace; font-size:10px; font-weight:600;
  color:rgba(255,255,255,.85); letter-spacing:.5px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px); padding:6px 0;
}
.coords-sep { color:rgba(255,255,255,.3); }

/* Bottom bar */
.cam-bottom {
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  padding:12px 16px max(env(safe-area-inset-bottom,0px),18px);
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 100%);
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.cam-back-btn, .cam-refresh-btn {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.8); padding:8px 12px; border-radius:20px;
  font-size:11.5px; font-weight:500; cursor:pointer;
  font-family:'DM Sans',sans-serif; text-decoration:none;
  backdrop-filter:blur(8px); white-space:nowrap;
  min-height:36px;
}
.scan-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.scan-btn {
  width:68px; height:68px; border-radius:50%;
  background:#B85042;
  border:3px solid rgba(255,255,255,.35);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .12s, opacity .12s;
  box-shadow:0 4px 20px rgba(184,80,66,0.55);
}
.scan-btn:active { transform:scale(.91); }
.scan-btn:disabled { opacity:.5; cursor:not-allowed; }
.scan-label { font-size:9px; font-weight:600; letter-spacing:1.5px; color:rgba(255,255,255,.7); }

/* Detect action bar */
.detect-action-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  padding:16px 16px max(env(safe-area-inset-bottom,0px),22px);
  background:linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 100%);
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.detect-action-bar.hidden { display:none !important; }
.det-btn {
  flex:1; max-width:200px; padding:14px 8px; border-radius:12px;
  font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; border:none;
  transition:opacity .15s, transform .12s;
  min-height:48px; line-height:1.2;
}
.det-btn:active { transform:scale(.97); }
.det-btn-ghost   { background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.25); }
.det-btn-primary { background:#B85042; color:#fff; box-shadow:0 4px 14px rgba(184,80,66,0.4); }

/* ═══════════════════════════════════════════════════════
   SCREEN 2 — ANALYZING
═══════════════════════════════════════════════════════ */
#s-analyze { background:#111; }
.analyze-simple { display:flex; flex-direction:column; align-items:center; gap:22px; padding:0 24px; }
.analyze-spinner {
  width:56px; height:56px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.1); border-top-color:#B85042;
  animation:spin 1s linear infinite;
}
.analyze-title { font-family:'DM Serif Display',serif; font-size:26px; text-align:center; }
.analyze-sub   { font-size:11px; color:rgba(255,255,255,.4); text-align:center; letter-spacing:.5px; margin-top:-14px; }

/* ═══════════════════════════════════════════════════════
   SCREEN 3 — REPORT
═══════════════════════════════════════════════════════ */
#s-report {
  background:#F5EFE6; align-items:stretch; justify-content:flex-start;
  overflow-y:auto;
  padding-top:env(safe-area-inset-top,0px);
}
.report-page  { flex:1; overflow-y:auto; width:100%; }
.report-inner { max-width:520px; margin:0 auto; padding:16px 16px 48px; }

.back-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-top:8px; flex-wrap:wrap; }
.back-btn {
  display:flex; align-items:center; gap:6px; background:#fff;
  border:1px solid rgba(0,0,0,.1); color:#444; padding:8px 14px; border-radius:8px;
  font-size:13px; cursor:pointer; font-family:'DM Sans',sans-serif;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  min-height:36px;
}
.rpt-tag { margin-left:auto; font-size:10px; font-weight:600; letter-spacing:1px; color:#888; text-transform:uppercase; }

.rpt-hero {
  background:#fff; border-radius:16px; padding:20px; margin-bottom:12px;
  position:relative; overflow:hidden; display:flex; gap:14px; align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.08); animation:slide-up .3s ease;
}
.rpt-accent-bar { position:absolute; left:0; top:0; bottom:0; width:5px; }
.rpt-emoji { font-size:46px; flex-shrink:0; }
.rpt-type  { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#999; margin-bottom:4px; }
.rpt-title { font-family:'DM Serif Display',serif; font-size:18px; color:#1a1a1a; line-height:1.3; margin-bottom:8px; word-break:break-word; }
.sev-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:600; letter-spacing:.3px; }
.sev-high   { background:#FDE8E8; color:#B85042; }
.sev-medium { background:#FEF3DC; color:#B7770D; }
.sev-low    { background:#E8F3ED; color:#2D6A4F; }

/* Captured photo card */
.rpt-image-card {
  background:#fff; border-radius:14px; padding:14px; margin-bottom:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.07); animation:slide-up .35s ease;
}
.rpt-image {
  display:block; width:100%; height:auto;
  border-radius:10px; max-height:420px; object-fit:cover;
  border:1px solid #ede9e3;
}

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; animation:slide-up .4s ease; }
.icard { background:#fff; border-radius:12px; padding:14px; box-shadow:0 1px 6px rgba(0,0,0,.07); }
.icard-lbl { font-size:9.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:#aaa; margin-bottom:5px; }
.icard-val { font-size:15px; font-weight:600; color:#1a1a1a; }
.conf-bg   { background:#eee; border-radius:3px; height:5px; margin-top:8px; overflow:hidden; }
.conf-fill { height:100%; border-radius:3px; background:#B85042; width:0; transition:width 1.2s cubic-bezier(.4,0,.2,1); }

.desc-box { background:#fff; border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 1px 6px rgba(0,0,0,.07); animation:slide-up .5s ease; }
.box-lbl  { font-size:9.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:#aaa; margin-bottom:8px; }
.desc-txt { font-size:13.5px; line-height:1.65; color:#333; word-break:break-word; }

.loc-box {
  background:#fff; border-radius:12px; padding:14px; margin-bottom:12px;
  display:flex; gap:12px; align-items:flex-start;
  border-left:4px solid #B85042; box-shadow:0 1px 6px rgba(0,0,0,.07);
  animation:slide-up .58s ease;
}
.loc-pin    { font-size:20px; flex-shrink:0; padding-top:2px; }
.loc-area   { font-size:14px; font-weight:600; color:#1a1a1a; margin-bottom:3px; }
.loc-coords { font-size:10.5px; color:#888; font-family:'DM Sans',monospace; }

.rpt-section-lbl {
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:#888; margin:16px 0 8px;
}

.ngo-rpt-card {
  background:#fff; border-radius:12px; padding:14px;
  margin-bottom:8px; box-shadow:0 1px 6px rgba(0,0,0,.07);
  border-left:4px solid #2D6A4F; animation:slide-up .5s ease;
}
.ngo-rpt-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:4px; }
.ngo-rpt-name { font-size:14px; font-weight:600; color:#1a1a1a; line-height:1.3; }
.ngo-rpt-dist { font-size:11px; font-weight:600; color:#2D6A4F; white-space:nowrap; margin-left:8px; margin-top:2px; }
.ngo-rpt-focus { font-size:12px; color:#888; margin-bottom:8px; }
.ngo-rpt-phone {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:600; color:#B85042; text-decoration:none;
  padding:6px 12px; background:#FDE8E8; border-radius:6px; min-height:32px;
}

.auth-rpt-card {
  background:#fff; border-radius:12px; padding:14px;
  margin-bottom:12px; box-shadow:0 1px 6px rgba(0,0,0,.07);
  border-left:4px solid #1B4F72; animation:slide-up .5s ease;
}
.auth-rpt-name  { font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:8px; }
.auth-rpt-phone {
  display:inline-block; font-size:13px; font-weight:600;
  color:#1B4F72; text-decoration:none; padding:6px 0;
}
.auth-rpt-email { font-size:11.5px; color:#888; margin-top:4px; word-break:break-all; }

.rpt-reporter        { font-size:12px; color:#999; text-align:center; margin:4px 0 12px; }
.rpt-reporter strong { color:#555; }

/* Buttons */
.btn-primary {
  display:block; width:100%; padding:15px; border-radius:12px;
  background:#B85042; color:#fff; border:none;
  font-size:15px; font-weight:600; font-family:'DM Sans',sans-serif;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:opacity .15s, transform .12s; animation:slide-up .66s ease;
  box-shadow:0 4px 14px rgba(184,80,66,.35);
  min-height:48px;
}
.btn-primary:active   { transform:scale(.98); }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.btn-ghost {
  display:block; width:100%; padding:13px; border-radius:12px; margin-top:10px;
  border:1.5px solid #ddd; background:#fff; color:#555;
  font-size:13.5px; cursor:pointer; font-family:'DM Sans',sans-serif;
  min-height:44px;
}

/* Issue tabs */
.issue-tabs { display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.issue-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px; border:1.5px solid #ddd; background:#fff;
  font-size:12px; font-family:'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; flex-shrink:0;
  min-height:36px;
}
.issue-tab.active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.tab-sev {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  font-size:9px; font-weight:700; color:#fff; margin-left:2px;
}
.tab-sev.sev-high   { background:#B85042; }
.tab-sev.sev-medium { background:#B7770D; }
.tab-sev.sev-low    { background:#2D6A4F; }

/* ═══════════════════════════════════════════════════════
   SUCCESS OVERLAY
═══════════════════════════════════════════════════════ */
.success-ov {
  position:fixed; inset:0; background:#F5EFE6; z-index:300;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:32px 24px; text-align:center;
  overflow-y:auto;
}
.success-ov.hidden  { display:none; }
.success-icon  { font-size:72px; animation:pop .4s cubic-bezier(.175,.885,.32,1.275); }
.success-title { font-family:'DM Serif Display',serif; font-size:26px; color:#1a1a1a; }
.success-sub   { font-size:14px; color:#888; }
.success-id    { font-size:11px; background:#fff; border:1px solid #ddd; padding:8px 16px; border-radius:8px; color:#888; font-family:'DM Sans',monospace; }
.success-ov .btn-primary, .success-ov .btn-ghost { max-width:320px; }

/* ═══════════════════════════════════════════════════════
   ERROR OVERLAYS
═══════════════════════════════════════════════════════ */
.err-ov {
  position:fixed; inset:0; z-index:400;
  background:rgba(7,16,26,0.96); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:32px 24px; text-align:center; overflow-y:auto;
}
.err-ov.hidden { display:none; }
.err-icon  { font-size:64px; }
.err-title { font-family:'DM Serif Display',serif; font-size:24px; color:#fff; }
.err-msg   { font-size:14px; color:rgba(255,255,255,0.7); max-width:320px; line-height:1.55; margin-bottom:8px; }

/* ═══════════════════════════════════════════════════════
   MY REPORTS PANEL
═══════════════════════════════════════════════════════ */
.my-reports-panel {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:#fff; border-radius:20px 20px 0 0;
  max-height:75vh; display:flex; flex-direction:column;
  box-shadow:0 -8px 40px rgba(0,0,0,0.35);
  animation:slide-up-panel .3s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.my-reports-panel.hidden { display:none !important; }
.mrp-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:18px 20px 12px; border-bottom:1px solid #f0ece6; flex-shrink:0;
  gap:12px;
}
.mrp-header-text { flex:1; min-width:0; }
.mrp-title { font-family:'DM Serif Display',serif; font-size:18px; color:#1a1a1a; }
.mrp-user  { font-size:11.5px; color:#999; margin-top:2px; }
.mrp-user strong { color:#555; font-weight:600; }
.mrp-close {
  width:36px; height:36px; border-radius:50%; background:#f5f0ea;
  border:none; cursor:pointer; font-size:14px; color:#888;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mrp-logout-row {
  padding:8px 20px 12px;
  border-bottom:1px solid #f0ece6;
  text-align:right;
  flex-shrink:0;
}
.mrp-logout-btn {
  background:#fff; border:1px solid #e2dcd2; color:#777;
  padding:7px 14px; border-radius:8px;
  font-size:12px; font-weight:500; font-family:'DM Sans',sans-serif;
  cursor:pointer; transition:all .15s; min-height:32px;
}
.mrp-logout-btn:hover, .mrp-logout-btn:active { background:#fdf6f5; border-color:#B85042; color:#B85042; }
.mrp-logout-btn.confirming {
  background:#B85042 !important;
  border-color:#B85042 !important;
  color:#fff !important;
  animation:pulse-warn 0.6s ease-in-out infinite alternate;
}
@keyframes pulse-warn { from { transform:scale(1); } to { transform:scale(1.04); } }
.mrp-list  { flex:1; overflow-y:auto; padding:8px 16px; -webkit-overflow-scrolling:touch; }
.mrp-empty { text-align:center; padding:32px 16px; font-size:13px; color:#aaa; line-height:1.6; }
.mrp-item {
  border:1px solid #ede9e3; border-radius:12px; padding:12px 14px;
  margin-bottom:8px; background:#faf8f5;
}
.mrp-item-main { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.mrp-emoji     { font-size:22px; flex-shrink:0; padding-top:1px; }
.mrp-item-body { flex:1; min-width:0; }
.mrp-item-title { font-size:13.5px; font-weight:600; color:#1a1a1a; line-height:1.3; margin-bottom:3px; }
.mrp-item-meta  { font-size:11.5px; color:#999; }
.mrp-sev-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.mrp-sev-dot.sev-high   { background:#B85042; }
.mrp-sev-dot.sev-medium { background:#B7770D; }
.mrp-sev-dot.sev-low    { background:#2D6A4F; }
.mrp-item-footer { display:flex; align-items:center; justify-content:space-between; }
.mrp-id { font-size:10.5px; color:#bbb; font-family:'DM Sans',monospace; }
.mrp-view-btn {
  font-size:12.5px; font-weight:600; color:#B85042;
  text-decoration:none; padding:6px 12px;
  background:#FDE8E8; border-radius:6px; min-height:32px;
}
.mrp-view-all {
  display:block; text-align:center; padding:14px 20px;
  border-top:1px solid #f0ece6;
  font-size:13.5px; font-weight:600; color:#B85042;
  text-decoration:none; flex-shrink:0;
}
.mrp-view-all:hover, .mrp-view-all:active { background:#fdf6f5; }

.orient-btn {
  position:fixed; bottom:130px; right:14px; z-index:30;
  background:rgba(184,80,66,.92); color:#fff; border:none;
  padding:10px 14px; border-radius:18px;
  font-size:11.5px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.3); min-height:40px;
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes pulse-dot      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }
@keyframes spin           { to{transform:rotate(360deg)} }
@keyframes pop            { 0%{transform:scale(0) rotate(-8deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes slide-up       { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes slide-up-panel { from{transform:translateY(100%)} to{transform:none} }
@keyframes popin-left     { 0%{opacity:0;transform:translateX(-30px) scale(.9)} 100%{opacity:1;transform:none} }
@keyframes popin-right    { 0%{opacity:0;transform:translateX(30px) scale(.9)} 100%{opacity:1;transform:none} }

/* GPS accuracy states */
.coords-strip.gps-meh { background:rgba(183,119,13,0.55); border-top:1px solid rgba(183,119,13,0.5); }
.coords-strip.gps-meh::before { content:'⚠️ Approximate'; margin-right:8px; color:#FFD79A; font-weight:700; }
.coords-strip.gps-bad { background:rgba(184,80,66,0.7); border-top:1px solid rgba(184,80,66,0.6); }
.coords-strip.gps-bad::before { content:'⚠️ IP-based location'; margin-right:8px; color:#FFD0CB; font-weight:700; font-size:9.5px; }

/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Top bar gets tight — shrink/hide pieces */
  .cam-topbar { padding-left:10px; padding-right:10px; }
  .cam-logo { font-size:15px; gap:6px; }
  .topbar-pill { padding:5px 8px; font-size:10px; }
  .cam-gps { padding:5px 8px; font-size:10px; max-width:90px; }

  /* AR side panels narrower */
  .ar-left-panel  { max-width:135px; left:6px; }
  .ar-right-panel { max-width:120px; right:6px; }

  /* Bottom controls tighter */
  .cam-bottom { padding-left:12px; padding-right:12px; }
  .cam-back-btn, .cam-refresh-btn { padding:7px 10px; font-size:11px; }
  .scan-btn { width:62px; height:62px; }

  .det-btn { font-size:12.5px; padding:13px 6px; }
}

@media (max-width: 360px) {
  /* Very narrow phones — hide GPS coords pill, keep just Reports + lang */
  .cam-gps { display:none; }
  .topbar-pill { padding:4px 8px; }
}

/* Landscape on phones — coords strip overlaps action bar — shrink things */
@media (max-height: 480px) and (orientation: landscape) {
  .status-pill { top:54px; font-size:10px; padding:4px 10px; }
  .scan-btn { width:56px; height:56px; }
  .coords-strip { bottom:78px; padding:4px 0; font-size:9.5px; }
}