:root{
  --bg:#0b1020;        /* deep blue-black */
  --bg-soft:#121935;
  --text:#e6e9f2;
  --muted:#a8b0c2;
  --brand:#3b82f6;     /* azure-blue accent */
  --accent:#22d3ee;    /* cyan accent */
  --card:#0f1430;
  --line:#243056;
  --ok:#10b981;
  --warn:#f59e0b;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:linear-gradient(180deg,var(--bg) 0%, #0d1430 100%);
}

.container{ width:min(1120px, 92%); margin-inline:auto; }

.header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0;
}

.brand{ display:flex; align-items:center; gap:1rem; }
.logo{ width:56px; height:auto; border-radius:.25rem; box-shadow:0 0 0 1px #1d2547, 0 8px 24px rgba(0,0,0,.4); background:#fff; }
h1{ font-size:1.4rem; margin:.1rem 0 .1rem; font-weight:700; letter-spacing:.2px; }
.tagline{ margin:0; color:var(--muted); }

a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:.12em;
}

a:hover{
  color:#fff;
  text-decoration-thickness:2px;
}

.nav a{
  color:var(--muted); text-decoration:none; margin:0 .5rem; padding:.35rem .6rem; border-radius:.375rem;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.05); }

.intro{ padding:1rem 0 0; color:var(--muted); }
.cta{ margin:1rem 0 1.6rem; }
.button{
  background:linear-gradient(90deg,var(--brand),var(--accent));
  color:#0b1020; font-weight:700; border:0; padding:.7rem 1rem; border-radius:.5rem; text-decoration:none; box-shadow:0 6px 20px rgba(34,211,238,.2);
}

.panel{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:14px; padding:1.1rem; margin:1.1rem 0 1.4rem; }

h2{ margin:.2rem 0 1rem; font-size:1.2rem; }

.quadrant-wrap{ overflow:auto; padding:.4rem; background:var(--card); border-radius:12px; border:1px solid var(--line); }

#quadrant-svg{
  display:block;
  width:min(100%, 980px);
  height:auto;
  margin:0 auto;
}

.table-wrap{ overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.table{ width:100%; border-collapse:collapse; min-width:720px; }
.table th, .table td{ text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line); }
.table th{ color:#bcccff; font-weight:600; background:rgba(59,130,246,.08); }
.table tr:hover td{ background:rgba(255,255,255,.02); }

.filters{ display:flex; gap:.6rem; align-items:center; margin:.6rem 0 .8rem; }
.input{
  background:#0c1535; color:var(--text); border:1px solid var(--line); border-radius:.5rem; padding:.55rem .7rem; min-width:12rem;
}

.small{ color:var(--muted); font-size:.88rem; }

.contact li{ margin:.25rem 0; }

.map-note{ margin:.2rem 0 .9rem; }

.map-wrap{
  width:100%;
  height:560px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.leaflet-container{
  font:14px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.leaflet-legend{
  background:rgba(12,21,53,.9);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  padding:.45rem .55rem;
}

.leaflet-legend-item{
  display:flex;
  align-items:center;
  gap:.45rem;
  white-space:nowrap;
}

.leaflet-legend-item + .leaflet-legend-item{
  margin-top:.18rem;
}

.leaflet-legend-item span{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}

.footer{ padding:1.25rem 0 2rem; color:var(--muted); text-align:center; }