html, body { height: 100%; margin: 0; font-family: Arial, sans-serif; }
.wb-topbar { height: 42px; display:flex; align-items:center; gap:18px; padding:0 12px; border-bottom:1px solid #ddd; background:#fff; box-sizing:border-box; }
.wb-topbar a { color:#0a5c8f; text-decoration:none; }
.wb-layout { display:flex; height: calc(100% - 42px); }
#map { flex:1; height:100%; background:#eef2f4; }
.wb-panel { width: 360px; max-width: 42vw; overflow:auto; padding:12px; border-left:1px solid #ddd; box-sizing:border-box; background:#fff; }
.wb-panel h3 { margin: 12px 0 8px; }
.wb-section { margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #eee; }
.wb-form label { display:block; margin:8px 0 3px; font-size:13px; color:#333; }
.wb-form input, .wb-form select { width:100%; padding:6px; box-sizing:border-box; }
.wb-buttons { display:flex; gap:6px; margin-top:10px; }
button { padding:6px 10px; cursor:pointer; }
#logBox { min-height:120px; max-height:240px; overflow:auto; background:#111; color:#d6ffd6; padding:10px; white-space:pre-wrap; }
#nodeInfo { font-size:13px; line-height:1.45; border:1px solid #eee; padding:8px; min-height:72px; }
.node-label { font-size:11px; font-weight:bold; color:#b90000; text-shadow:1px 1px #fff; white-space:nowrap; }
.node-marker { border:2px solid #222; border-radius:50%; width:18px; height:18px; text-align:center; line-height:18px; font-size:10px; font-weight:bold; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.node-START { background:#63cbe8; }
.node-RESERVOIR { background:#f2b84b; }
.node-IRRIGATION { background:#58c971; }
.node-DOMESTIC { background:#a985e6; }
.node-CONFLUENCE { background:#4b86c5; }
.node-GROUNDWATER { background:#8cc084; }
.node-DIVERSION { background:#d95f54; }
.node-LOWFLOW { background:#2ecc71; }
.node-END { background:#9b9b9b; }
.value-label { color:#c00000; font-size:11px; font-weight:bold; text-shadow:1px 1px #fff; }
.legend { background:#fff; padding:8px; border:1px solid #bbb; font-size:12px; line-height:1.4; }
.legend-row { display:flex; align-items:center; gap:6px; }
.legend-dot { width:12px; height:12px; border:1px solid #333; border-radius:50%; display:inline-block; }
@media (max-width: 900px) {
  .wb-layout { flex-direction:column; height:auto; min-height:calc(100% - 42px); }
  #map { height:65vh; flex:none; }
  .wb-panel { width:100%; max-width:none; border-left:0; border-top:1px solid #ddd; }
}