/* ============================================================
   EoG Africa — Land Intelligence Portal
   Design system adapted from the EDGE mockup, re-paletted to
   the EoG Africa brand (void navy / sand / gold / ember).
   ============================================================ */

:root{
  --bg:#0B0E1A;               /* void */
  --panel:#12172C;            /* void-2 */
  --panel-2:#1A2140;          /* void-3 */
  --panel-hover:#1E2648;
  --border:#273050;
  --border-bright:#3C4774;
  --gold:#D9A93D;
  --gold-bright:#F0C461;
  --gold-deep:#8C6A1C;
  --gold-dim: rgba(217,169,61,.14);
  --gold-line: rgba(217,169,61,.35);
  --sand:#F6F0E2;
  --sand-2:#ECE1C7;
  --sand-dim: rgba(246,240,226,.10);
  --sand-line: rgba(246,240,226,.30);
  --ember:#C2542E;
  --ember-bright:#DE7245;
  --ember-dim: rgba(194,84,46,.14);
  --ember-line: rgba(194,84,46,.45);
  --text:#F6F0E2;
  --text-soft:#C6BFAC;
  --text-mute:#7D8197;
  --green:#7FC79E;
  --green-dim: rgba(127,199,158,.12);
  --amber:#E0A458;
  --radius:16px;
  --radius-sm:9px;
  --font-display:'Fraunces', serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  min-height:100vh; overflow-x:hidden; position:relative;
}
::selection{ background:var(--gold-dim); color:var(--gold-bright); }
a{color:inherit;}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* ---------- background field ---------- */
.bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 82% -8%, rgba(217,169,61,.10), transparent 45%),
    radial-gradient(circle at -10% 30%, rgba(194,84,46,.06), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 42px);
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:20px;
  height:64px; padding:0 22px;
  background:rgba(11,14,26,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.wordmark{
  font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:.5px;
  display:flex; align-items:baseline; gap:8px; flex-shrink:0;
}
.wordmark .dot{ color:var(--gold); }
.wordmark small{
  font-family:var(--font-body); font-weight:600; font-size:10px; letter-spacing:1.5px;
  color:var(--text-mute); text-transform:uppercase; margin-left:2px;
}
.search-shell{
  flex:1; max-width:560px; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:11px;
  padding:0 8px 0 14px; height:40px; transition:border-color .18s, box-shadow .18s;
}
.search-shell:focus-within{ border-color:var(--gold-line); box-shadow:0 0 0 3px var(--gold-dim); }
.search-shell svg{ flex-shrink:0; opacity:.55; }
.search-shell input{
  flex:1; background:none; border:none; color:var(--text); font-family:var(--font-body);
  font-size:13.5px; height:100%;
}
.search-shell input::placeholder{ color:var(--text-mute); }
.go-btn{
  background:var(--gold); color:#171208; font-weight:700; font-size:12px;
  padding:8px 15px; border-radius:7px; letter-spacing:.2px; transition:background .15s;
  white-space:nowrap;
}
.go-btn:hover{ background:var(--gold-bright); }
.go-btn:disabled{ opacity:.6; cursor:default; }
.topbar-right{ display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
.city-toggle{
  display:flex; background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:3px;
}
.city-toggle button{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:6px;
  color:var(--text-mute); transition:all .15s;
}
.city-toggle button.active{ background:var(--gold-dim); color:var(--gold-bright); }
.tier-badge{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.4px;
  padding:6px 12px; border-radius:20px; border:1px solid var(--gold-line); color:var(--gold-bright);
  background:var(--gold-dim); white-space:nowrap;
}
.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:#171208;
  border:1px solid var(--gold-line);
}

/* ---------- shell layout ---------- */
.shell{ display:flex; position:relative; z-index:1; }
.rail{
  width:68px; flex-shrink:0; padding:20px 0; display:flex; flex-direction:column; align-items:center; gap:6px;
  border-right:1px solid var(--border); min-height:calc(100vh - 64px); position:sticky; top:64px; align-self:flex-start;
}
.rail-btn{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:var(--text-mute); transition:all .15s; position:relative;
}
.rail-btn:hover{ background:var(--panel-hover); color:var(--text-soft); }
.rail-btn.active{ background:var(--gold-dim); color:var(--gold-bright); }
.rail-btn.active::before{
  content:''; position:absolute; left:-13px; width:3px; height:20px; background:var(--gold); border-radius:2px;
}
.rail-btn .tip{
  position:absolute; left:56px; top:50%; transform:translateY(-50%);
  background:#1B2140; border:1px solid var(--border-bright); padding:6px 10px; border-radius:7px;
  font-size:11.5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s, transform .12s;
  z-index:50;
}
.rail-btn:hover .tip{ opacity:1; transform:translateY(-50%) translateX(4px); }
.rail-spacer{ flex:1; }

.main{ flex:1; min-width:0; padding:32px 36px 80px; max-width:1400px; }
.view{ display:none; }
.view.active{ display:block; }

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-bottom:30px; }
@media(max-width:920px){ .hero{ grid-template-columns:1fr; } }
.hero-card{
  position:relative; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden;
  padding:26px 28px; min-height:168px; display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .2s, transform .2s;
  background:var(--panel);
}
.hero-card:hover{ border-color:var(--border-bright); transform:translateY(-2px); }
.hero-snap{
  background:
    radial-gradient(circle at 85% 15%, rgba(217,169,61,.20), transparent 55%),
    linear-gradient(155deg, #181D33, #0E1222);
  cursor:pointer;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:10px; display:flex; align-items:center; gap:7px;
}
.hero-eyebrow.sand-eyebrow{ color:var(--sand-2); }
.hero-eyebrow .pulse-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 var(--gold-line);
  animation:pulse-ring 2s infinite;
}
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(217,169,61,.5); }
  70%{ box-shadow:0 0 0 8px rgba(217,169,61,0); }
  100%{ box-shadow:0 0 0 0 rgba(217,169,61,0); }
}
.hero-title{ font-family:var(--font-display); font-size:26px; font-weight:600; line-height:1.15; margin-bottom:6px; }
.hero-sub{ font-size:13px; color:var(--text-soft); max-width:340px; line-height:1.5; }
.hero-cta{
  align-self:flex-start; margin-top:16px; display:flex; align-items:center; gap:9px;
  background:var(--gold); color:#171208; font-weight:700; font-size:13px; padding:10px 18px 10px 15px;
  border-radius:9px; transition:background .15s, gap .15s;
}
.hero-snap:hover .hero-cta{ background:var(--gold-bright); gap:12px; }
.viewfinder-corner{ position:absolute; width:16px; height:16px; border:2px solid var(--gold-line); }
.vc-tl{ top:16px; left:16px; border-right:none; border-bottom:none; }
.vc-tr{ top:16px; right:16px; border-left:none; border-bottom:none; }
.vc-br{ bottom:16px; right:16px; border-left:none; border-top:none; }

.hero-address{ background:linear-gradient(155deg, #151A30, #0E1222); }
.desk-form{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.address-input-row{
  display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:0 13px; height:42px; transition:border-color .15s;
}
.address-input-row:focus-within{ border-color:var(--sand-line); }
.address-input-row input{
  flex:1; background:none; border:none; color:var(--text); font-size:13.5px; font-family:var(--font-mono);
}
.address-input-row input::placeholder{ color:var(--text-mute); font-family:var(--font-body); }
.desk-row{ display:flex; gap:8px; }
.desk-row input, .desk-row select{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:9px;
  color:var(--text); font-family:var(--font-mono); font-size:12.5px; height:38px; padding:0 11px;
}
.desk-row select{ font-family:var(--font-body); font-weight:600; }
.desk-row input::placeholder{ color:var(--text-mute); }
.desk-row input:focus, .desk-row select:focus{ border-color:var(--sand-line); outline:none; }
.mini-btn{
  background:var(--sand-dim); color:var(--sand-2); font-weight:700; font-size:11.5px; padding:0 13px;
  border-radius:9px; white-space:nowrap; transition:background .15s; border:1px solid transparent;
}
.mini-btn:hover{ background:rgba(246,240,226,.18); }
.desk-actions{ display:flex; align-items:center; gap:12px; }
.address-hint{ font-size:11.5px; color:var(--text-mute); font-style:italic; }

/* ---------- stats strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:34px; }
@media(max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; }
.stat-label{
  font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px;
  font-weight:600;
}
.stat-value{ font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--text); letter-spacing:-.5px; }
.stat-value.gold{ color:var(--gold-bright); }
.stat-delta{ font-size:11px; color:var(--green); margin-top:4px; font-family:var(--font-mono); }

/* ---------- content grid ---------- */
.content-grid{ display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; }
@media(max-width:1080px){ .content-grid{ grid-template-columns:1fr; } }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.section-title{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.filter-chips{ display:flex; gap:6px; }
.chip{
  font-family:var(--font-mono); font-size:11px; font-weight:600; padding:6px 12px; border-radius:20px;
  border:1px solid var(--border); color:var(--text-mute); transition:all .15s;
}
.chip:hover{ border-color:var(--border-bright); color:var(--text-soft); }
.chip.active{ background:var(--gold-dim); border-color:var(--gold-line); color:var(--gold-bright); }
.city-note{ font-size:12px; color:var(--text-mute); font-family:var(--font-mono); margin-bottom:14px; }
.city-note:empty{ display:none; }

/* ---------- property grid ---------- */
.property-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:1080px){ .property-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } }
.property-grid.portfolio-full{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.p-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:border-color .18s, transform .18s, box-shadow .18s;
}
.p-card:hover{
  border-color:var(--gold-line); transform:translateY(-3px);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.6);
}
.p-thumb{
  height:90px; position:relative; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:space-between; padding:10px 12px;
}
.p-thumb::after{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
  opacity:.5;
}
.p-thumb.t-raw{ background:linear-gradient(135deg,#2C3A25,#141A12); }
.p-thumb.t-str{ background:linear-gradient(135deg,#2E2B44,#141325); }
.p-thumb.t-dst{ background:linear-gradient(135deg,#43271C,#1B110C); }
.type-chip{
  position:relative; z-index:1; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.6px;
  padding:3px 8px; border-radius:5px; background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
}
.type-chip.raw{ color:#9FCB8D; }
.type-chip.str{ color:#B7A6E8; }
.type-chip.dst{ color:var(--ember-bright); }
.tier-pill{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:700; font-size:13px;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(4px); border:1px solid var(--gold-line); color:var(--gold-bright);
}
.tier-pill.tier-a{ border-color:var(--sand-line); color:var(--sand); }
.tier-pill.tier-b{ border-color:var(--border-bright); color:#9BA1B8; }
.p-body{ padding:13px 14px 15px; }
.p-name{ font-weight:700; font-size:14px; margin-bottom:2px; }
.p-loc{ font-size:11.5px; color:var(--text-mute); font-family:var(--font-mono); margin-bottom:10px; }
.p-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.p-score{ display:flex; align-items:center; gap:7px; }
.mini-dial{ width:28px; height:28px; border-radius:50%; position:relative; flex-shrink:0; }
.mini-dial::before{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--panel); }
.mini-dial-val{
  position:relative; z-index:1; font-family:var(--font-mono); font-size:9px; font-weight:700;
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text);
}
.p-price{ font-family:var(--font-mono); font-size:11px; color:var(--sand-2); font-weight:600; }
.p-concept{ font-size:11px; color:var(--text-soft); max-width:120px; text-align:right; line-height:1.3; }
.p-verified{
  font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.5px; padding:2px 7px;
  border-radius:10px; border:1px solid;
}
.p-verified.clear{ color:var(--green); border-color:rgba(127,199,158,.4); background:var(--green-dim); }
.p-verified.flagged{ color:var(--ember-bright); border-color:var(--ember-line); background:var(--ember-dim); }

/* ---------- sidebar mini cards ---------- */
.side-col{ display:flex; flex-direction:column; gap:16px; }
.mini-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 17px; }
.mini-card-label{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text-mute); font-weight:700; margin-bottom:9px; }
.mini-card-title{ font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:5px; }
.mini-card-sub{ font-size:12px; color:var(--text-soft); line-height:1.5; margin-bottom:10px; }
.mini-card-foot{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; }
.adv-avail{ display:flex; align-items:center; gap:6px; color:var(--green); font-weight:600; }
.adv-avail .d{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.mini-link{ color:var(--gold-bright); font-weight:700; font-size:12px; }
.mini-link:hover{ text-decoration:underline; }
.pipeline-mini{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
}
.pm-step{ padding:5px 11px; border-radius:14px; border:1px solid var(--gold-line); color:var(--gold-bright); background:var(--gold-dim); }
.pm-arrow{ color:var(--text-mute); }

/* ---------- map view ---------- */
.map-shell{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; height:calc(100vh - 220px); min-height:420px;
}
#mapCanvas{ width:100%; height:100%; background:#0B0E1A; }
.map-legend{
  display:flex; gap:14px; font-family:var(--font-mono); font-size:11px; color:var(--text-mute);
}
.map-legend span{ display:flex; align-items:center; gap:6px; }
.lg-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.leaflet-tile{ filter:grayscale(.4) brightness(.8) contrast(1.05); }
.leaflet-popup-content-wrapper{
  background:var(--panel-2); color:var(--text); border:1px solid var(--border-bright);
  border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
}
.leaflet-popup-tip{ background:var(--panel-2); border:1px solid var(--border-bright); }
.leaflet-popup-content{ font-family:var(--font-body); margin:13px 15px; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--text-mute); }
.pop-name{ font-weight:700; font-size:13.5px; margin-bottom:3px; }
.pop-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-soft); margin-bottom:9px; }
.pop-btn{
  background:var(--gold); color:#171208; font-weight:700; font-size:11.5px; padding:7px 13px;
  border-radius:7px; width:100%;
}
.pop-btn:hover{ background:var(--gold-bright); }

/* ---------- deal room ---------- */
.deal-explainer{ font-size:12.5px; color:var(--text-soft); margin-bottom:18px; }
.deal-explainer strong{ color:var(--green); }
.deal-list{ display:flex; flex-direction:column; gap:14px; max-width:860px; }
.deal-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; transition:border-color .18s;
}
.deal-card:hover{ border-color:var(--border-bright); }
.deal-card.flagged{ border-color:var(--ember-line); background:linear-gradient(155deg, rgba(194,84,46,.08), var(--panel)); }
.deal-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.deal-parcel{ font-weight:700; font-size:15px; }
.deal-sub{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-mute); margin-top:3px; }
.deal-buyer{ font-size:12px; color:var(--text-soft); margin-top:5px; }
.deal-buyer b{ color:var(--text); }
.deal-amount{ text-align:right; }
.masked-amount{
  font-family:var(--font-mono); font-size:17px; font-weight:600; color:var(--gold-bright);
  cursor:pointer; user-select:none; letter-spacing:1px;
}
.masked-amount:hover{ color:var(--sand); }
.deal-amount-hint{ font-size:10px; color:var(--text-mute); font-family:var(--font-mono); margin-top:3px; }
.deal-pipeline{ display:flex; align-items:center; gap:0; margin:6px 0 4px; }
.pipe-step{
  flex:1; text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--text-mute); position:relative; padding-top:16px;
}
.pipe-step::before{
  content:''; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--border-bright);
}
.pipe-step::after{
  content:''; position:absolute; top:8px; left:calc(-50% + 8px); width:calc(100% - 16px); height:1.5px;
  background:var(--border);
}
.pipe-step:first-child::after{ display:none; }
.pipe-step.done{ color:var(--sand-2); }
.pipe-step.done::before{ background:var(--sand); }
.pipe-step.done::after{ background:var(--sand-line); }
.pipe-step.current{ color:var(--gold-bright); font-weight:700; }
.pipe-step.current::before{ background:var(--gold); box-shadow:0 0 0 4px var(--gold-dim); }
.pipe-step.current::after{ background:var(--gold-line); }
.deal-card.flagged .pipe-step.current{ color:var(--ember-bright); }
.deal-card.flagged .pipe-step.current::before{ background:var(--ember); box-shadow:0 0 0 4px var(--ember-dim); }
.deal-actions{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.deal-warning{
  margin-top:12px; border:1px solid var(--ember-line); background:var(--ember-dim); border-radius:10px;
  padding:11px 13px; font-size:12px; color:var(--ember-bright); display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.deal-fatal{
  margin-top:12px; border:1px solid var(--ember-line); background:var(--ember-dim); border-radius:10px;
  padding:11px 13px; font-size:12px; color:var(--ember-bright);
}
.deal-fatal .fatal-label{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase;
  display:block; margin-bottom:4px; font-weight:700;
}
.deal-state-tag{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 10px; border-radius:12px; border:1px solid var(--border-bright); color:var(--text-soft);
}
.deal-state-tag.released{ color:var(--green); border-color:rgba(127,199,158,.4); background:var(--green-dim); }
.deal-state-tag.flagged{ color:var(--ember-bright); border-color:var(--ember-line); background:var(--ember-dim); }

/* ---------- roadmap placeholder ---------- */
.roadmap-panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:56px 48px; max-width:640px; margin:40px auto 0; text-align:center;
}
.roadmap-badge{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gold-bright); border:1px solid var(--gold-line);
  background:var(--gold-dim); padding:6px 14px; border-radius:16px; margin-bottom:20px;
}
.roadmap-title{ font-family:var(--font-display); font-size:30px; font-weight:600; margin-bottom:12px; }
.roadmap-body{ font-size:13.5px; color:var(--text-soft); line-height:1.6; max-width:440px; margin:0 auto 22px; }
.roadmap-tagline{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:15px; }

/* ---------- modal shared ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(5,6,12,.78); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--panel-2); border:1px solid var(--border-bright); border-radius:20px;
  width:100%; max-width:620px; max-height:88vh; overflow-y:auto; position:relative;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7);
}
.modal-close{
  position:absolute; top:16px; right:16px; z-index:5; width:32px; height:32px; border-radius:9px;
  background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:var(--text-soft);
  transition:background .15s;
}
.modal-close:hover{ background:rgba(255,255,255,.1); }
.modal-title{ font-family:var(--font-display); font-size:21px; font-weight:600; margin-bottom:6px; }
.modal-sub{ font-size:12.5px; color:var(--text-soft); margin-bottom:20px; line-height:1.5; }

/* ---------- snap modal steps ---------- */
.snap-stage{ padding:30px; min-height:420px; display:flex; flex-direction:column; }
.viewfinder{
  flex:1; min-height:260px; border-radius:14px; position:relative; overflow:hidden; margin-bottom:18px;
  background:linear-gradient(155deg,#1D2B1E,#0F130E);
  display:flex; align-items:center; justify-content:center;
}
.viewfinder .vc{ position:absolute; width:22px; height:22px; border:2px solid rgba(255,255,255,.5); }
.viewfinder .vc.tl{ top:14px; left:14px; border-right:none; border-bottom:none; }
.viewfinder .vc.tr{ top:14px; right:14px; border-left:none; border-bottom:none; }
.viewfinder .vc.bl{ bottom:14px; left:14px; border-right:none; border-top:none; }
.viewfinder .vc.br{ bottom:14px; right:14px; border-left:none; border-top:none; }
.viewfinder-grid{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 33.33%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 33.33%);
}
.crosshair{ width:52px; height:52px; border:1.5px solid var(--gold); border-radius:50%; position:relative; opacity:.9; }
.crosshair::before,.crosshair::after{ content:''; position:absolute; background:var(--gold); }
.crosshair::before{ left:50%; top:-9px; width:1.5px; height:14px; transform:translateX(-50%); }
.crosshair::after{ left:50%; bottom:-9px; width:1.5px; height:14px; transform:translateX(-50%); }
.shutter-row{ display:flex; align-items:center; justify-content:center; gap:16px; }
.shutter-btn{
  width:64px; height:64px; border-radius:50%; border:3px solid var(--gold); display:flex; align-items:center;
  justify-content:center; transition:transform .12s;
}
.shutter-btn:active{ transform:scale(.92); }
.shutter-btn .inner{ width:48px; height:48px; border-radius:50%; background:var(--gold); }
.step-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-bright);
  text-align:center; margin-bottom:6px;
}
.step-sub{ text-align:center; font-size:12.5px; color:var(--text-mute); margin-bottom:16px; }

.gps-readout{ text-align:center; font-family:var(--font-mono); color:var(--text-soft); font-size:13px; letter-spacing:.5px; }
.gps-big{ font-family:var(--font-mono); font-size:15px; color:var(--sand); margin-top:8px; }

.scan-stage{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; flex:1; }
.scan-ring-wrap{ position:relative; width:180px; height:180px; }
.scan-ring{
  width:100%; height:100%; border-radius:50%; border:1.5px solid var(--border-bright); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.scan-sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--gold-line) 40deg, transparent 80deg);
  animation:spin 2.1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.scan-core{ position:relative; z-index:2; font-family:var(--font-mono); font-size:11px; color:var(--text-mute); text-align:center; }
.scan-status{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-soft); text-align:center; min-height:20px; }
.scan-progress-track{ width:220px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.scan-progress-fill{ height:100%; background:var(--gold); width:0%; transition:width .3s linear; }

/* snap parcel picker */
.snap-pick-list{ display:flex; flex-direction:column; gap:9px; overflow-y:auto; max-height:340px; }
.snap-pick{
  display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left;
  border:1px solid var(--border); border-radius:11px; padding:12px 14px; transition:border-color .15s;
}
.snap-pick:hover{ border-color:var(--gold-line); }
.snap-pick .sp-name{ font-weight:700; font-size:13px; }
.snap-pick .sp-loc{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); margin-top:2px; }
.snap-pick .sp-score{ font-family:var(--font-mono); font-size:12px; color:var(--gold-bright); font-weight:700; flex-shrink:0; }

/* snap verification result */
.verdict-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; flex:1; justify-content:center; }
.verdict-badge{
  font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:2px;
  padding:14px 34px; border-radius:14px; border:2px solid;
}
.verdict-badge.clear{ color:var(--green); border-color:rgba(127,199,158,.5); background:var(--green-dim); }
.verdict-badge.flagged{ color:var(--ember-bright); border-color:var(--ember-line); background:var(--ember-dim); }
.verdict-parcel{ font-size:13px; color:var(--text-soft); text-align:center; }
.verdict-parcel b{ color:var(--text); }
.checklist{ width:100%; display:flex; flex-direction:column; gap:7px; }
.check-item{
  display:flex; align-items:center; gap:10px; font-size:12.5px; padding:9px 12px;
  border:1px solid var(--border); border-radius:9px;
}
.check-item .ci-icon{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:800;
}
.check-item.pass .ci-icon{ background:var(--green-dim); color:var(--green); }
.check-item.fail{ border-color:var(--ember-line); background:var(--ember-dim); color:var(--ember-bright); }
.check-item.fail .ci-icon{ background:var(--ember); color:#fff; }
.verdict-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); text-align:center; line-height:1.7; }
.verdict-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ---------- report / detail modal ---------- */
.report-head{
  padding:26px 28px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.report-name{ font-family:var(--font-display); font-size:22px; font-weight:600; margin-bottom:3px; }
.report-loc{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); }
.report-type-chip{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.5px; padding:4px 9px; border-radius:6px;
  margin-top:8px; display:inline-block;
}
.report-price{ text-align:right; }
.report-price .rp-val{ font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--gold-bright); }
.report-price .rp-lbl{ font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.report-body{ padding:22px 28px 28px; }
.score-row{ display:flex; gap:24px; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
.big-dial-wrap{ position:relative; width:132px; height:132px; flex-shrink:0; }
.big-dial{ width:100%; height:100%; border-radius:50%; position:relative; }
.big-dial::before{ content:''; position:absolute; inset:12px; border-radius:50%; background:var(--panel-2); }
.big-dial-sweep{
  position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(217,169,61,.28) 30deg, transparent 60deg);
  animation:spin 5s linear infinite; opacity:.7;
}
.big-dial-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2;
}
.big-dial-tier{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--gold-bright); line-height:1; }
.big-dial-num{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); margin-top:3px; }
.score-legend{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:160px; }
.legend-item{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.legend-item .lbl{ color:var(--text-soft); }
.legend-bar-track{ flex:1; height:5px; background:var(--border); border-radius:3px; margin:0 10px; overflow:hidden; }
.legend-bar-fill{ height:100%; background:var(--sand); border-radius:3px; opacity:.75; }
.legend-item .val{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); width:26px; text-align:right; }

.radar-wrap{ display:flex; justify-content:center; margin:6px 0 22px; }
.radar-wrap svg text{ font-family:var(--font-mono); font-size:8.5px; fill:var(--text-mute); }

.block-label{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-mute); font-weight:700; margin:22px 0 12px; }
.concept-list{ display:flex; flex-direction:column; gap:10px; }
.concept-item{
  border:1px solid var(--border); border-radius:11px; padding:13px 15px; display:flex; align-items:center; gap:14px;
  transition:border-color .15s;
}
.concept-item:hover{ border-color:var(--gold-line); }
.concept-rank{ font-family:var(--font-mono); font-size:11px; color:var(--gold-bright); width:20px; flex-shrink:0; font-weight:700; }
.concept-info{ flex:1; min-width:0; }
.concept-name{ font-weight:700; font-size:13px; margin-bottom:2px; }
.concept-detail{ font-size:11.5px; color:var(--text-mute); }
.concept-fit{ font-family:var(--font-mono); font-size:14px; color:var(--gold-bright); font-weight:600; flex-shrink:0; }

.risk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.risk-chip{
  font-size:11.5px; padding:6px 11px; border-radius:20px; border:1px solid; display:flex; align-items:center; gap:6px;
}
.risk-chip.warn{ color:var(--amber); border-color:rgba(224,164,88,.35); background:rgba(224,164,88,.08); }
.risk-chip.info{ color:var(--sand-2); border-color:var(--sand-line); background:var(--sand-dim); }
.risk-chip.fatal{
  color:var(--ember-bright); border-color:var(--ember-line); background:var(--ember-dim);
  font-weight:700; border-radius:10px; padding:9px 13px; width:100%;
}
.risk-chip .d{ width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.risk-fatal-note{ font-size:11px; color:var(--ember-bright); font-family:var(--font-mono); margin-top:8px; letter-spacing:.4px; }

.verif-box{ border:1px solid var(--border); border-radius:11px; padding:14px 16px; }
.verif-box.clear{ border-color:rgba(127,199,158,.4); background:var(--green-dim); }
.verif-box.flagged{ border-color:var(--ember-line); background:var(--ember-dim); }
.verif-status-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.verif-verdict{ font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:1.5px; }
.verif-verdict.clear{ color:var(--green); }
.verif-verdict.flagged{ color:var(--ember-bright); }
.verif-verdict.none{ color:var(--text-mute); }
.verif-meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-mute); margin-top:6px; line-height:1.7; }
.verif-checks{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.verif-check-pill{
  font-size:10.5px; font-family:var(--font-mono); padding:4px 9px; border-radius:12px; border:1px solid var(--border);
  color:var(--text-soft); display:flex; align-items:center; gap:5px;
}
.verif-check-pill.pass{ color:var(--green); }
.verif-check-pill.fail{ color:var(--ember-bright); border-color:var(--ember-line); }

.action-row{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.act-btn{
  font-size:12.5px; font-weight:700; padding:11px 16px; border-radius:9px; display:flex; align-items:center; gap:7px;
  transition:all .15s; border:1px solid var(--border);
}
.act-btn.primary{ background:var(--gold); color:#171208; border-color:var(--gold); }
.act-btn.primary:hover{ background:var(--gold-bright); }
.act-btn.primary:disabled{ opacity:.6; cursor:default; }
.act-btn.secondary{ color:var(--text-soft); }
.act-btn.secondary:hover{ border-color:var(--border-bright); color:var(--text); }
.act-btn.ember{ color:var(--ember-bright); border-color:var(--ember-line); }
.act-btn.ember:hover{ background:var(--ember-dim); }
.act-btn.small{ padding:8px 13px; font-size:11.5px; }

/* ---------- deal form ---------- */
.deal-form-wrap{ padding:28px; }
.fld{ display:block; margin-bottom:14px; }
.fld span{ display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-mute); margin-bottom:6px; }
.fld input, .fld select{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:var(--font-body); font-size:13.5px; height:42px; padding:0 13px;
}
.fld input:focus, .fld select:focus{ border-color:var(--gold-line); outline:none; }
.deal-submit{ width:100%; justify-content:center; margin-top:6px; }

/* ---------- loading / empty / error states ---------- */
.state-box{
  grid-column:1 / -1; border:1px dashed var(--border-bright); border-radius:var(--radius);
  padding:44px 30px; text-align:center; color:var(--text-mute);
}
.state-box .sb-title{ font-family:var(--font-display); font-size:17px; color:var(--text-soft); margin-bottom:6px; }
.state-box .sb-sub{ font-size:12.5px; line-height:1.6; }
.state-box.error{ border-color:var(--ember-line); }
.state-box.error .sb-title{ color:var(--ember-bright); }
.retry-btn{
  margin-top:14px; background:var(--sand-dim); color:var(--sand-2); font-weight:700; font-size:12px;
  padding:9px 16px; border-radius:8px;
}
.retry-btn:hover{ background:rgba(246,240,226,.18); }
.spinner{
  width:26px; height:26px; border-radius:50%; border:2.5px solid var(--border-bright);
  border-top-color:var(--gold); animation:spin .9s linear infinite; margin:0 auto 14px;
}
.loading-inline{ display:flex; flex-direction:column; align-items:center; padding:60px 20px; color:var(--text-mute); font-size:12.5px; font-family:var(--font-mono); }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:200;
  background:#1B2140; border:1px solid var(--gold-line); color:var(--text); font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:11px; opacity:0; pointer-events:none; transition:all .25s;
  display:flex; align-items:center; gap:9px; box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  max-width:90vw;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .d{ width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.toast.error{ border-color:var(--ember-line); }
.toast.error .d{ background:var(--ember-bright); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
}