:root{
  color-scheme:dark;
  --bg:#03090d;
  --top:#10171c;
  --panel:#141c21;
  --panel2:#1a2329;
  --line:#343f46;
  --text:#f3f6f8;
  --muted:#aeb8be;
  --accent:#28c16f;
  --accent2:#20b8dc;
  --danger:#e65f5f;
  --cell:256px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input{font:inherit}
.topbar{
  height:118px;display:grid;grid-template-columns:minmax(270px,1fr) minmax(360px,560px) minmax(270px,1fr);
  gap:24px;align-items:center;padding:0 28px;background:linear-gradient(180deg,#131b20,#0f161a);
  border-bottom:1px solid #273238;box-shadow:0 5px 22px rgba(0,0,0,.28);position:relative;z-index:30
}
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:inherit;width:max-content}
.brandmark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#39cd82,#20a963);font-weight:900;color:white;box-shadow:0 4px 18px rgba(30,190,105,.23)}
.brand strong{display:block;font-size:18px;line-height:1.1}.brand small{display:block;margin-top:4px;color:#b8c3c9;font-size:13px}
.search-wrap{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px}
.search-wrap input{height:41px;border-radius:7px;border:1px solid #3c474e;background:#161d22;color:#fff;padding:0 13px;outline:none}
.search-wrap input:focus{border-color:#4ca5c8;box-shadow:0 0 0 2px rgba(37,159,209,.16)}
.search-wrap button,.top-link,.map-controls button{
  border:1px solid #3c474e;background:linear-gradient(#20292f,#171e23);color:#f5f8fa;border-radius:7px;cursor:pointer
}
.search-wrap button{font-weight:800}
.search-wrap button:hover,.map-controls button:hover,.top-link:hover{background:#273239}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.status-pill{padding:8px 13px;border-radius:9px;background:#173d2a;color:#6ee39c;font-size:12px;font-weight:850;letter-spacing:.02em}
.status-pill.offline{background:#482526;color:#ff9e9e}
.top-link{text-decoration:none;padding:8px 12px;font-size:12px;font-weight:800}
#map-shell{height:calc(100vh - 118px);min-height:420px}
#map-viewport{
  width:100%;height:100%;position:relative;overflow:hidden;cursor:grab;user-select:none;
  background:#0d4664;
  outline:none
}
#map-viewport.dragging{cursor:grabbing}

/* Full-screen water grid: always fills the complete visible map,
   independent of the finite region bounding box. */
#viewport-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:#0d4d6e;
  background-image:
    linear-gradient(to right,rgba(177,222,242,.20) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(177,222,242,.20) 1px,transparent 1px),
    linear-gradient(135deg,rgba(255,255,255,.020) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.020) 50%,rgba(255,255,255,.020) 75%,transparent 75%,transparent);
  background-size:104px 104px,104px 104px,48px 48px;
  background-position:0 0,0 0,0 0
}
#map-scene{
  position:absolute;left:0;top:0;z-index:1;transform-origin:0 0;will-change:transform;
  background:transparent
}
/* The old finite grid is disabled. The viewport grid above is now authoritative. */
#grid-layer{
  display:none!important
}
#regions-layer{position:absolute;inset:0}
.region{
  position:absolute;overflow:hidden;background:#071015;
  border:var(--region-border,1px) solid rgba(205,228,239,.46);
  box-shadow:0 5px 14px rgba(0,0,0,.24);
  cursor:pointer;isolation:isolate
}
.region::after{display:none}
.region.offline{filter:saturate(.55) brightness(.72)}
.region.selected{
  border-color:#42d37e;
  box-shadow:0 0 0 var(--region-selected,2px) rgba(66,211,126,.62)
}
.region img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:0
}
.region-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#0a3147,#082438);
  color:#c6dce7;font-weight:500;z-index:0;
  font-size:var(--fallback-font,13px)
}
.region-label{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  min-height:var(--label-height,28px);
  padding:var(--label-pad-y,4px) var(--label-pad-x,8px);
  display:flex;align-items:center;justify-content:flex-start;
  background:rgba(4,18,27,.76);
  color:#f5f8fa;
  font-size:var(--label-font,13px);
  line-height:1.1;
  font-weight:500;
  letter-spacing:0;
  white-space:normal;
  overflow:hidden;
  text-shadow:none;
  border-top:var(--region-hairline,1px) solid rgba(255,255,255,.10)
}
.region-meta{
  position:absolute;right:var(--meta-gap,6px);top:var(--meta-gap,6px);z-index:6;
  padding:var(--meta-pad-y,3px) var(--meta-pad-x,6px);
  border-radius:var(--meta-radius,4px);
  background:rgba(4,18,27,.72);
  border:0;
  color:#edf5f8;
  font-size:var(--meta-font,10px);
  line-height:1;
  font-weight:500;
  text-shadow:none;
  white-space:nowrap
}
.empty-coordinate{
  position:absolute;color:rgba(180,199,209,.28);font-size:11px;font-weight:700;padding:5px 7px;pointer-events:none
}
.loading{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 16px;border-radius:10px;
  background:rgba(17,24,29,.94);border:1px solid #36434a;color:#dbe5ea;z-index:20
}
.loading.error{color:#ffadad;border-color:#744}
.map-controls{
  position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  background:rgba(20,27,32,.94);border:1px solid #39454c;box-shadow:0 8px 25px rgba(0,0,0,.38);z-index:22
}
.map-controls button{width:36px;height:34px;font-size:18px;font-weight:900}
.map-controls input[type=range]{width:145px;accent-color:#b9c3ca}
.control-separator{height:24px;width:1px;background:#465159;margin:0 2px}
.zoom-label{min-width:58px;font-size:12px;color:#d6dde1;font-weight:800}
.coord-readout{
  position:absolute;right:22px;bottom:22px;padding:8px 10px;border-radius:8px;background:rgba(20,27,32,.9);
  border:1px solid #39454c;color:#c6d0d5;font-size:11px;font-weight:800;z-index:22;pointer-events:none
}
@media(max-width:850px){
  .topbar{height:150px;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:14px 16px;gap:10px}
  .search-wrap{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) 90px}
  #map-shell{height:calc(100vh - 150px)}
  .brandmark{width:40px;height:40px}.top-actions{gap:7px}.status-pill{padding:7px 9px}
  .map-controls{left:10px;bottom:10px}.coord-readout{right:10px;bottom:62px}
  .map-controls input[type=range]{width:100px}
}

/* 096-P3-R1-H3: clean map tiles, thin typography, coordinate-only badges,
   and a full-viewport water grid synchronized with pan/zoom. */