html,body{height:100%}
.map-body{height:100vh;overflow:hidden}
.map-header{position:relative;z-index:1000}
.map-app{height:calc(100vh - 72px);display:grid;grid-template-columns:370px minmax(0,1fr);overflow:hidden}
.map-sidebar{height:calc(100vh - 72px);background:#041827;border-right:1px solid var(--border);padding:14px;overflow-y:auto;overflow-x:hidden;position:relative;z-index:20}
.sidebar-toggle{display:none}
.filter-card{background:#08243a;border:1px solid var(--border);border-radius:16px;padding:14px;display:grid;gap:10px;margin-bottom:12px}
.filter-card label{font-size:13px;color:var(--muted);font-weight:1000}
.filter-card small{font-size:13px;color:var(--muted);font-weight:900}
.reef-list{display:grid;gap:8px}
.reef-list button{background:#071c2d;border:1px solid var(--border);border-radius:12px;padding:10px;text-align:left;color:white;width:100%}
.reef-list button small{display:block;color:var(--muted);margin-top:4px}
.map-stage{height:calc(100vh - 72px);position:relative;min-width:0;overflow:hidden}
#marineMap{position:absolute;inset:0;width:100%;height:100%;background:#082033;z-index:1}
.leaflet-container{height:100%!important;width:100%!important;background:#082033}
.leaflet-tile-container img{background:#082033}
.reef-dot span{display:block;width:18px;height:18px;border-radius:50%;border:2px solid white;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.reef-drawer{position:absolute;right:18px;top:18px;width:min(430px,calc(100% - 36px));max-height:calc(100% - 36px);overflow:auto;background:linear-gradient(145deg,rgba(8,36,58,.98),rgba(6,26,43,.98));border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 20px 70px rgba(0,0,0,.45);z-index:600;transform:translateX(calc(100% + 55px));transition:.25s}
.reef-drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;right:10px;top:10px;border-radius:50%;width:34px;height:34px;padding:0;background:#071c2d;border:1px solid var(--border)}
.drawer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.drawer-grid div{background:#071c2d;border:1px solid var(--border);border-radius:10px;padding:9px;display:grid;gap:4px}
.drawer-grid span{color:var(--muted);font-size:12px}
@media(max-width:900px){
  .map-body{overflow:auto}
  .map-app{display:block;height:auto}
  .map-sidebar{height:auto}
  .map-stage{height:70vh}
  #marineMap{position:relative;height:70vh}
  .reef-drawer{position:fixed;top:auto;bottom:10px;left:10px;right:10px;width:auto;max-height:55vh}
}